来不及找心仪的内容?                         +                 收藏当前页面
助力中小企业营销上云
唯平台免费企业网站模板免费响应式网站模板免费微网站模板免费建站网站版本价格网站定制AI伪原创工具网站SEO域名注册网站安全防护网站设计服务自助建站视频教程网站设计器免费小程序模板微信小程序微信商城小程序百度小程序头条抖音小程序小程序直播教育小程序同城信息小程序多商家平台小程序智能名片小程序小程序解决方案 >信息系统内容系统服务预约计算报价投票活动留言板在线答题闯关打卡查询系统轻应用功能小程序版本价格小程序定制服务商城小程序免费商城模板免费小程序商城模板免费微商城模板免费商城模板 >直播导购社区团购多人拼团会员储值传统分销万人分销当面付商家助手小票打印快速打单付费会员卡会员积分多商家平台电商ERP视频号砍价助力短视频导购优惠码秒杀酒店产品积分商城组合套餐商城解决方案商城版本价格商城使用手册AI工具箱会员特权免费模板互动版本价格解决方案微信抽奖系统微信答题系统微信投票系统营销活动互动营销免费模板微传单版本价格微传单模板消息群发公众号助手版本价格获客易运营易成交易管理易功能亮点>版本价格教务系统作业系统报名系统报价系统推广员系统课程拼团答题系统打卡系统会员卡直播授课特色功能>美容美业运动健身汽车服务宠物服务解决方案价格版本多渠道推广拼团支付版拼团非支付版会员储值会员积分积分商城进店有礼全民推广营销短信优惠券短视频营销门店系统功能门店系统视频教程版本说明腾讯企业邮箱观达云企业邮箱注册协议注册账号登录后台帮助中心注册平台账号注册账号唯平台

【自适应模板】如何使用产品导航模块?

 

本文内容结构如下图



一、使用“产品导航”模块能实现的效果


点击“产品导航”模块,就能对相应分类的产品进行筛选。(如下图,左侧为“产品导航”,右侧为“产品筛选”模块,点击左侧的“日常保洁”分类,右侧就会筛选出属于“日常保洁”分类下的所有产品。)



二、如何添加“产品导航”模块?


2.1、进入网站设计页面后,点击页面左侧的“模块”按钮,添加“产品导航”模块至首页(或是其他你想添加这个模块的页面),如下图。


2.2、把鼠标悬停在“产品导航”模块区域,然后点击“编辑模块”,把“产品导航”模块的跳转方式设置为“当前窗口”。


2.3、把鼠标悬停在通栏区域,点击通栏右上角“编辑通栏”按钮,添加一个新的列,然后调整左边“产品导航”所在列为合适宽度;然后退出编辑。


2.4、在右边的列中添加“产品展示”模块,可选择“直接添加”产品或使用“筛选条件”添加产品。


2.5、点击“产品导航”模块中的任意一个分类,进入“产品筛选”页。把鼠标悬停在通栏区域,点击“开启列”按钮,然后在左边的列中添加“产品导航”模块,并把“产品导航”模块的跳转方式设置为“当前窗口”。到这一步,就能实现点击“点击左侧的产品导航,右边筛选出对应分类产品”的效果。



三、如何编辑“产品导航”模块?


电脑视图下的产品导航模块的编辑项一共有6个,分别是“分类选择”、“模块样式”、“文字设置”、“跳转设置”、“标题栏”、“间距”。(下图左)

手机视图下的产品导航模块的编辑项一共有3个,分别是“文字设置”、“标题栏”、“间距”。(下图右)

    


接下来将分别介绍电脑视图手机视图下,“产品导航”模块的各个编辑项。(下图为此部分的内容结构)


3.1、电脑视图

3.1.1、分类选择


如果你已给产品设置分类,可在添加“产品导航”模块后选择“产品导航”模块中展示的产品分类为“全部”分类(下图1)或“指定”分类(下图2)。


3.1.2、模块样式

目前支持两种类型的模块样式,一种为横向展示(下图1),另一种为纵向展示(下图2)。


3.1.3、文字设置

文字:可自定义字体(默认是微软雅黑)、鼠标未悬停在文字上时的文字颜色(默认是黑色)、鼠标悬停在文字上时的文字颜色(默认是网站主题色)。

行高:可自定义每一行文字与文字之间的距离。

分割线:当“模块样式”处选择了“横向样式”时才显示此设置项。分割线的颜色、宽度、样式可编辑。


3.1.4、跳转设置

可设置鼠标点击“产品导航”模块时的跳转方式为“新窗口”或“当前窗口”,这个看个人需求。


3.1.5、标题栏

默认是隐藏标题栏,当取消勾选“隐藏”后,可自定义标题文字、标题文字样式、标题栏高度、标题栏背景。


3.1.6、间距

可通过调修改“产品导航”模块的外间距,调整“产品导航”模块与通栏内容区边界之间的距离。



3.2、手机视图

3.2.1、文字设置

文字:可自定义字体(默认是微软雅黑)、鼠标未悬停在文字上时的文字颜色(默认是黑色)、鼠标悬停在文字上时的文字颜色(默认是网站主题色)。

行高:可自定义每一行文字与文字之间的距离。

分割线:可自定义分割线的颜色、宽度、样式。


3.2.2、标题栏

支持显示或隐藏标题栏,以及自定义标题栏文字、高度、背景。


3.2.3、间距

通过修改模块的外间距,可调整模块与通栏内容边界之间的距离。



四、如何编辑“产品筛选”模块?


点击“产品导航”模块中的任意分类后,会自动跳转至“产品筛选”页。将鼠标悬停在“产品筛选”模块上,模块右上角会显示“编辑模块”的按钮。

电脑视图下,编辑项分为“常规”和“参数”。(下图左)

手机视图下,编辑项分为“标题栏”和“间距”。(下图右)


观达云产品矩阵

观达云产品矩阵

全经营场景覆盖,快速高效解决经营难题

ABUIABAEGAAg_K3-_wUo2trU9QUwYDhg

自助建站系统

快速建站,全网四合一,支持IPv6

ABUIABAEGAAg_K3-_wUo0OS0UzBgOGA

商城系统

轻松搭建PC商城、微商城、商城小程序

ABUIABAEGAAg_63-_wUo5MuTkAUwYDhg

轻应用系统

展示、服务、知识付费、同城信息小程序

ABUIABAEGAAg_63-_wUo5Izf6AQwYDhg

门店会员系统

线下门店数字化运营、门店小程序

ABUIABAEGAAg-q3-_wUoiqixOjBgOGA

公众号助手

微信公众号一站式运营工具

ABUIABAEGAAg-q3-_wUoyoPGTzBgOGA

短信平台

覆盖丰富的短信场景,支持自定义

ABUIABAEGAAg_K3-_wUogNqAugcwYDhg

微传单系统

趣味H5,热门微场景营销工具

ABUIABAEGAAg_63-_wUo6NTOjAEwYDhg

企业邮箱

专业、安全、高性价比的企业邮箱服务

ABUIABAEGAAg_63-_wUo3rvQKTBgOGA

互动营销系统

玩转主流H5微信营销活动

ABUIABAEGAAg_K3-_wUoqI3qrgYwYDhg

云设计

简单好用的在线制图工具

ABUIABAEGAAg-q3-_wUooObNmAYwYDhg

在线教育系统

快速搭建教育机构网站、小程序

ABUIABAEGAAg_63-_wUo5qzqogMwYDhg

AI销售系统

微信智能电子名片获客、企微助手

合作伙伴

合作伙伴

/ PARTNERS

ABUIABAEGAAgrLeGhAYoqZHEnQcwrwk4PA
观达云平台提供完善的产品教程,根据用户提交的需求,免费开发优化,每周自动迭代升级
在线客服
 
 
关注公众号
获取最新优惠