首页 >> 鸣蝉课堂 >>手机站端 >> 第四节:手机网站页面设计操作讲解
详细内容

第四节:手机网站页面设计操作讲解

时间:2021-03-27     【原创】   阅读
文章内容


本节课程主要内容:手机站首页讲解、会员中心设置、产品页面设计说明、文章页面设计说明、空白页设计说明。


一、在手机网站后台设计页面


  • 左侧部分可以添加栏目,修改名称,添加素材和模块。

  • 中间对不同栏目页面进行设计具体操作。

  • 右侧部分可以设置编辑栏目页面的风格背景,控件(底部菜单)等。


手机站后台工作区说明


手机站后台设计页面分为三部分:左侧部分:栏目添加修改、模块、中间部分:栏目页面的编辑区域、右侧风格控件。


1.png

设计页面左侧部分-页面


2.png

设计页面左侧部分-页面-管理


创建好的栏目在哪查看?


查看创建好的栏目,在设计页面可以从以下地方查看:


image.png


*个查看的地方:左侧栏目,点击进入后在栏目管理中查看,如左图中的1。

第二个查看的地方:点击“添加页面”后面的“管理”,进入后查看创建好的栏目。如左图中的2。


设计页面左侧部分-页面-管理


image.png

  • 添加栏目。

  • 上传栏目图标。

  • 对栏目名称进行重命名。

  • 查看栏目类型。

  • 设置栏目显示或隐藏状态。

  • 修改商品,多级文章栏目的样式。

  • 对栏目进行排序。

  • 删除栏目。

回收站恢复删除的栏目或是彻底删除栏目。


设计页面左侧部分-素材


我的

“我的”是由您自己设计的模块生成的。生成自己的模块后,这个模块可以自由放到其他页面。


image.png

系统素材

“我的”后面的这些内容都是系统做好的素材,您可以直接调用,调用后替换为您自己的内容即可。



设计页面左侧部分-模块


模块分为常用、列表、营销、组件和*模块。

模块添加:点击模块中的模块,模块会自动显示在中间编辑区域中。然后在中间区域点击模块进行内容添加,样式设计等。

模块编辑设计:点击模块,模块上面会出现多个小图标,点击小图标进行对应的操作即可。

注:网站页头和系统搜索模块不可以同时添加哦!


设计页面左侧部分-模块-导航


image.png


  • 导航栏的编辑中可以创建栏目,查看创建好的栏目,及栏目回收站操作。

  • 导航栏模块的样式设计中可以修改导航栏的样式:横向导航或是浮动导航。


怎么把导航栏设置为横向的或是浮动的?导航样式中可以设置导航为浮动或是横向。


image.png


设计页面左侧部分-模块-自由容器


image.png

image.png


使用自由容器模块后可以做出右侧的效果


image.png


容器中仅可以添加文本、图片和按钮模块。容器中的文字,图片,按钮可以独立移动。


设计页面左侧部分-模块-标签容器


9.png

设计页面左侧部分-模块-滚动图标


image.png

image.png



  • 滚动图标模块可以设置多页并支持一行显示几个,显示几行。

  • 需手动翻到第二页及后面查看。暂时不支持自动滚动。


设计页面左侧部分-模块-短视频


image.png


  • 一个页面可以添加多个短视频模块。

  • 短视频是需要在商家助手app中上传,网站后台视频模块调用商家助手中的短视频。

  • 支持“手动选择短视频”和“根据规则调用”两种方式调取短视频内容。

  • 可将短视频模块自定义添加到支持设计的网站页面内。



设计页面中间编辑区域


image.png



模块添加:点击模块,模块会自动显示在中间编辑区域中。然后在中间区域点击模块进行内容添加,样式设计等。

模块编辑设计:点击模块,模块上面会出现多个小图标。点击小图标进行对应的操作即可。


设计页面右侧控件


15.png


设计页面右侧控件-风格


image.png


  • 可以对当前打开的栏目页面进行整个页面背景色或是背景图片设置。

  • 可以设置网站模板的色系。


设计页面左侧部分-右侧控件部分-底部菜单


image.png


  • 底部菜单*多显示5个。

  • *多支持5个自定义底部菜单。

  • 可以对底部菜单进行名称重命名、位置移动、图标上传等。

  • 设置浮动菜单是否在内容显示。

注意:底部菜单重命名时名称需要跟这个菜单的功能一致。避免不一致,误导用户使用。


想要点击底部菜单进入的页面如左侧图那样显示,怎么设置呢?


image.png



操作方法:

1、在底部菜单点击添加,创建一个自定义链接栏目,链接到产品栏目。

2、创建好的底部菜单设置为显示。

3、链接的产品栏目列表展示效果设置为抽屉型的。


image.png


设计页面左侧部分-右侧控件部分-底部菜单-分类

image.png


点击底部菜单“分类”后面的编辑图标进入分类设置页面。


image.png


分类页面不显示产品,显示的是产品栏目、产品栏目下的大类和小类。


image.png


标签管理中对栏目下的大类和小类进行图标上传、图标颜色修改和分类排序。

注:大类图标仅支持风格二显示。


image.png

栏目设置中设置哪些产品栏目显示在分类菜单中。

注意:当栏目管理中产品栏目设置为不显示时,分类菜单栏目设置为显示时不起作用的。


设计页面左侧部分-右侧控件部分-浮动客服

image.png

*设置中设置一级分类、二级分类、品牌及品牌图标的显示与否。


设计页面左侧部分-右侧控件部分-系统


image.png


  • 可以设置浮动客服的开启与不开启。

  • 对浮动客服添加内容。

  • 移动客服的上下位置。

  • 可以设置所显示的内页。

  • QQ客服和电话*多添加5个。


注意:微信客服是上传微信客服的二维码。


image.png


可以查看、下载手机站的二维码。

注:当网站没有绑定自己的独立域名时,不要把手机站二维码宣传使用。

可以查看微信关注二维码。

注:需网站对接认证服务号。


二、会员中心设置


旧版会员中心,可以自助添加模块,新版会员中心不支持设计,都是 系统默认的样式。


1617294369159188.png


旧版会员中心页面


系统默认模块设计调整:旧版会员中心页面,点击模块,模块上面会出现图标,可以进行简单的设计调整。

自主添加模块设计:旧版会员中心页面,可以点击页面左侧部分的模块,点击模块添加到会员中心页面。从而实现自主设计。


image.png

1617294503519737.png

点击会员模块的编辑图标,进入后可以设置背景图、设置显示参数。


1617294552877412.png


新版会员中心


新版会员中心页面效果不支持设计。

功能组件显示个数及内容,可以在网站后台设计。



image.png


  • 点击添加后,可以自定义添加功能组件项目。

  • 功能名称,图标,链接都是必填项。

  • 链接可以添加外链,也可以是内链,外链需是http开头。


三、产品页面设计说明


image.png


点击此图标,可以切换产品列表页面的展示样式。

点击样式设计,可以设置这三个图标隐藏。


image.png


  • 点击此图标进入后可以选择不同的展示效果及*设置。

  • 产品列表页面的抽屉效果*是在此设置。

image.png

image.png

image.png


在产品栏目页面编辑区域,可以点击模块,选择任意模块添加到页面中,设置自己想要的页面效果。

注意:手机站的产品详情页面是不支持自主设计,是系统默认的效果。


四、文章页面设计说明


多级文章页面设计说明


image.png


样式设计中隐藏右上角的会员中心和分享。

点此进入设置文字列表内容的展示效果及数据加载方式。


image.png


左侧素材和模块下的内容都可以添加到文字列表页面进行自主设计。

注意:手机站的文章详情页面是不支持自主设计,是系统默认的效果。


无分类文章页面设计说明


image.png


  • 点击可以设置会员中心你和分享隐藏。

  • 点此图标,进入后可以此页面列表项的背景,文字等。

  • 无分类文章列表页面也可以使用系统模块自主搭建。


五、空白页页面设计说明


空白页设计跟首页设计是一样的,都是使用系统模块自主设计。

空白页是手机站支持复制的栏目。

空白页右上角的分享是无法隐藏的。


线下地图

联系电话:152-3452-7450 / 17635100080
工作时间:周一至周六 08:00-20:00
网站邮箱:1466458824@qq.com
公司地址:太原市小店区宏安世纪大厦A座1406

未经授权禁止复制、建立镜像 . 版权所有  |  鸣蝉品牌管理有限公司  法律顾问:刘晏瑞律师     安全防御    保驾护航

业务范围

网站动态

关于网站

关于服务

华为云合作伙伴