200

HTML5自助建站下怎么设置产品分类导航

时间: 2017-02-17 11:02:14   点击数: 31831   来源: 耐思智慧

当我们的商城网站产品比较多的时候,为了让用户快速找到想要的分类,锚点定位已经不够用了,我们就需要为商城网站添加产品分类导航。像京东商城这样的产品分类导航,借助建站宝盒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

上一篇:HTML5下如何让网站logo实现自适应? 下一篇:用建站宝盒V9在HTML5网页中设置锚点定位的简单方法

旗下网站:耐思智慧 - 淘域网 - 我的400电话 - 中文域名:耐思尼克.cn 耐思尼克.top

耐思智慧 © 版权所有 Copyright © 2000-2024 IISP.COM,Inc. All rights reserved

备案号码: 粤ICP备09063828号  公安备案号: 公安备案 粤公网安备 44049002000123号  域名注册服务机构许可:粤D3.1-20240003 CN域名代理自深圳万维网

声明:本网站中所使用到的其他各种版权内容,包括但不限于文章、图片、视频、音频、字体等内容版权归原作者所有,如权利所有人发现,请及时告知,以便我们删除版权内容

本站程序界面、源代码受相关法律保护, 未经授权, 严禁使用; 耐思智慧 © 为我公司注册商标, 未经授权, 严禁使用

法律顾问:珠海知名律师 广东笃行律师事务所 夏天风 律师