搜狐首页 科技 画心师

手机搜狐

SOHU.COM

HTML5自助建站下怎么设置媲美京东的产品分类导航

当我们的商城网站产品比较多的时候,为了让用户快速找到想要的分类,锚点定位已经不够用了,我们就需要为商城网站添加产品分类导航。像京东商城这样的产品分类导航,借助建站宝盒V9,毫无代码基础的情况下也能做。

在京东的产品分类导航中,主要分为左侧主栏目大类,右侧扩展二级栏目,再到详细的类别分类三级栏目,右侧还除了了品牌的广告栏。对比建站宝盒V9模板网站的产品分类导航效果:

要做一个这样的产品分类导航,其实很简单。小耐今天给大家分享几个简单步骤,看一遍就能自己动手做!

操作过程:

1、添加模块产品模块产品分类,这里有很多风格可以选择,小耐选择第一种。

直接把模块拖拽出来。大家拖出来的效果可能是只看到左侧橙色部分,我们需要横向和纵向拉伸,因为系统默认模块是缩略显示,需要拉伸后才能看到整体效果。

2、双击模块,在属性框中可以看到勾选的产品分类,这些就是要在分类导航中显示的内容。

这里的设置需要在系统设置中的产品系统下进行。

比如想在手机数码主栏目下添加一个新二级栏目:品牌手机。选择添加产品添加分类,设置一个“品牌手机”分类,并把上级分类选为最顶级的“手机/运营商/数码”。

品牌手机栏目下若要新增多个品牌分类,选择添加产品添加分类,设置一个“华为”分类,并把上级分类选为最顶级的“品牌手机”。

这时候可以顺便把产品的具体信息补充完整,都是直接上传图片、添加文字的简单操作。

3、所有分类添加完成后,我们可以在产品管理产品分类下查看我们已经设置好的栏目。

回到网站编辑页面,可以发现产品分类已经自动展现了新增的内容。

4、这时候,如果不喜欢目前的展示风格,可以直接在属性框中切换样式,已经修改的产品分类不会改变。

5、下图的横向展示怎么设置呢?在属性框中的类别属性中开启分类主菜单内容显示,可以添加8个选项。

小耐新增了三个,可以对选项设置页面跳转。刷新页面预览即可看到效果。

6、右侧滚动广告栏怎么设置?同样在属性框的类别属性中开启右侧广告位。选择自定义,自由上传图片,设置跳转。

7、刷新后预览即可显示最终效果。

由于建站宝盒是H5响应式建站,在电脑站页面设置了分类导航后,手机站无需重复设置,预览手机站的时候我们会看到这样一个按钮:

点击后就是手机展示效果啦!

有没有很简单?一遍不会,看多几遍就能轻松设置啦!当然,有用户会觉得这样的设置还是有点麻烦,但和一个个代码敲出来相比,这已经是对小白最友好的设置办法了。想零基础做出精美商城网站的,不妨试试建站宝盒V9。

免费体验地址:http://www.iisp.com/special/v9special/index.php?s=yuqiuping

H5响应式建站宝盒V9线上发布会火热报名中,全程免费还有互动大奖,想深入了解建站宝盒V9的你千万不要错过!报名:http://www.iisp.com/video/?s=yuqiuping

精选