轮播图
轮播图设置需要先设置图片相关内容,最后进行相关基础设置
-
图片:
轮播图可以上传多张图片,使图片左右滚动/上下滚动,也可以在图片中添加文字/图片/按钮
点击添加图片,上传图片,可同时选中多张图片,上传好图片后,如果在轮播图的图片基础上需要展示文字/图片/按钮,则需要选择为图片添加文字/图片/按钮的图片。点击图片进入编辑页面
风格
进入图片的编辑模式,可以选择风格1/风格2
风格1为普通展示,即上传的图片为背景图,再添加其他内容
风格2位叠加展示,即上传的图片为背景图,再上传一张背景图,是两张背景图重叠展示,设置和效果如下:
蒙层透明度
在上传了背景图后,会有默认的0.4值蒙层透明度,是为背景图添加一层黑色的蒙层,使图片看起来会要黑一些,设置的值为0.01-1,值越大蒙层越黑。根据喜好设置即可
内容设置
风格1
使用新版内容设置,尽量不使用富文本(适应会些许问题,需要专业人士调整)
可以选择添加图片/文本/按钮,每个所添加的内容都可以多次重复添加
-
每个图片内容仅上传一张图片,若有多图片需要上传,添加多个图片内容模块即可
-
每个图片模块里可以设置上下边距
-
每个文本内容仅支持一种字号/粗细/斜体/颜色/显示位置,若有文本文案字号/粗细/斜体/颜色/显示位置需要区分的,则添加多个文本内容模块设置即可
-
每个文本模块里可以设置上下边距
默认展示两个按钮,可以根据实际情况设置内容,可以只设置一个按钮内容;
如果两个按钮都设置的话,会平行展示按钮,如下图展示效果:
-
每个按钮内容里可以添加两个按钮框,展示方式为平行展示,若需要上下展示则在添加一个按钮即可
-
只有按钮模块可以添加链接
-
每个按钮的模块里可以设置上下边距
风格2
其内容与风格1一样,所有的内容设置也与风格1一样,其最主要的区别为内容为左右显示,需要设置左侧内容和右侧内容
边距设置
可以为图片里的内容设置顶部/底部/左/右,数值为0-100;内容设置可设置对齐方式(居左/居中/居右,顶部/中部/底部)
-
基本设置
在选中轮播图组件后,左侧弹窗上半部分的位置:根据页面整体及喜好选择对应的设置模式即可,注意其中布局的模版3和模版4为上下滚动方式
指示器样式
若上传了多张轮播图,在图片下方会有滚动的指示的提示显示,选择喜欢的即可
显示左右切换按钮
勾选开启显示轮播图左右可点击的中括号
图片高度
可以设置上传的图片高度,根据整体排版选择首张高度或自定义高度(建议使用适配首张高度和自定义高度)
若选择自定义高度,则需要设置一个高度的数值,数值最高可填写2000
轮播图播放
可设置是否自动播放以及播放的时长,最多可以设置10,单位是秒
若轮播图只上传了一张图,图片是不会自动播放,是静止的状态
布局
有4个模版
模版1: 默认版,正常显示图片上传的大小(但会受图片高度的影响),左右轮播
模版2: 会使上传的图片的大小缩小一倍(会受图片高度的影响),左右轮播
模版3: 默认版,正常显示图片上传的大小(但会受图片高度的影响),上下轮播(与模版1一样,播放的方式为上下)
模版4: 会使上传的图片的大小缩小一倍(会受图片高度的影响),上下轮播(与模版2一样,播放的方式为上下)
填充方式
默认为填充,设置为周边留白会在上传的图片左右会留出一小部分的空白部分(会受布局影响)
屏幕适配
默认是自适应屏幕宽度,若选择适配内容宽度,此宽度为上传图片后设置的内容宽高度(不建议使用此宽度)
轮播图图片背景尺寸建议:
宽度:1920px(固定)
高度:1080px(根据页面排版调整高度即可)
图文
文字/图片/按钮搭配使用,做为装修主要使用的组件,其多种模版可以满足不同页面排版
根据不同排版选择不同的模版,每个模版对应不同个数的卡片,卡片里可以插入设置文字/图片/按钮
背景
模版和卡片都可以设置背景图片(自定义图片,可以调整图片的高宽度(卡片背景不可调整高宽度),若图片尺寸过小,实际上传后的效果图片会比较模糊),也可以设置颜色,模版和卡片都可以设置,若都设置两个颜色会重叠显示,若设置了背景图又设置了颜色,颜色会被覆盖。
边距设置
模版和卡片都可以设置顶部/底部/左/右边距,根据偏好设置即可。
模板的边距设置
卡片的边距设置(需要点击下图位置的卡片,进入详情页后可以设置)
卡片内容
推荐使用新版内容设置(不建议使用富文本内容设置),新版内容设置可添加文字内容/图片/按钮,
使用新版内容设置,尽量不使用富文本(适应会些许问题,需要专业人士调整)
可以选择添加图片/文本/按钮,每个所添加的内容都可以多次重复添加
添加图片:上传一图片,可以更改图片的宽度,若设置图片宽度超出了图片实际的宽度,则图片只展示实际宽度而不会在放大显示
添加文本:输入文本文案,可以调整文案的字号/粗细/斜体/颜色/显示位置,以及设置文本内容的左右边距,添加链接
添加按钮:输入按钮的名称,可以调整字号/粗细/斜体/颜色/显示位置,以及设置按钮框和背景色
-
每个卡片的文本内容仅支持一种字号/粗细/斜体/颜色/显示位置,若有文本文案字号/粗细/斜体/颜色/显示位置需要区分的,则添加多个文本内容模块设置即可
-
每个按钮内容里可以添加两个按钮框,展示方式为平行展示,若需要上下展示则在添加一个按钮即可
-
整个卡片可以设置链接跳转
-
内容设置可设置对齐方式(居左/居中/居右,顶部/中部/底部)
图片导航
设置主要的类别,将icon上传后设置跳转的商品类别链接,以便用户更快捷的浏览购买商品
图片导航区分两种,一种图文(图片+文字命名),一种纯文字导航,根据偏好进行设置即可,各icon之间可以调整间距以,命名的文字可以设置颜色/大小,整个组件可以设置背景颜色以及组件的页面边距
-
导航(图片/文字)仅支持行显示
-
图片导航每行导航仅支持至多5个,文字导航目前没有限制
标题
将文字放进组件中,支持字体大小/颜色/粗细,居中或居左显示,以及组件的背景图/颜色和跳转链接设置
文本(不建议使用)
富文本编辑器,可以支持图片/文字/外部链接,当有一部分文字需要不同的字体来排版显示时可以考虑使用。
由于富文本的适应目前还未完善,不建议大篇文案的使用该组件,否则在前端显示会出现错误的排版
商品列表
在页面中添加店铺内的商品,根据偏好选择商品类别或指定商品
数据来源
点击商品类别按钮(如下图),分为商品类别和自定义商品
商品类别
该商品类别来自店铺后台商品-类别管理所创建的,可以勾选全部类别或指定类别,若选择指定类别,需要勾选需要显示的类别
自定义商品
若选择自定义商品,点击添加商品/商品组,选择店铺内的商品/商品组即可
列表样式
根据偏好选择显示的样式
商品卡片样式
可以设置商品基本信息是否显示
公告
设置一组公告,将文字文案放入组件的标题中,若文案过长则会滚动播放(也会跟进用户使用的屏幕大小适应),可以调整组件的背景色以及文案文本的小大/颜色/粗细和文案文本的边距等。
相册
图片展示,将需要展示的图片上传至组件中,若图片超过10张,在前端会显示查看全部按钮/See All(按钮名称固定,无法更改),上传后显示样式固定的,一行为5张图,可以设置每张图片之间间距以及组件与页面的间距
魔方布局
根据不同模版自由组合图片,选择偏好的模版,根据模版上提示的比例上传对应的图片,若图片的比例超出了建议的比例,则图片在前端会自适应该模版建议比例的效果。可以设置该组件的页面边距以及图片直接的间距
自定义模版
若选择自定义模版,横竖布局最多可以选择8个,每个方块上传的图片都是1:1
图片比例在后台是没有标注的,按以下的比例上传即可:
正方形图:1:1 横的长方形图:16:9
竖的长方形图:9:16
视频
支持上传 .mp4 .mov .m4v .3pg .m3u8的视频,可以自定义上传一张视频的封面图(建议尺寸16:9),其他设置根据偏好进行设置即可。视频在前端需要手动点击播放方可播放视频。
分割线
此组件主要作用是辅助,分为辅助空白、辅助实线/点/虚线,根据页面排版情况选其一调整高度即可。
表单
网页可以关联表单功能,使其用户在浏览网页时可以填写信息,后台可以搜集用户填写的信息。
关联表单后,可以设置显示的样式以及整个表单组件的背景图/背景色以及边距等,根据偏好进行设置即可。
关联的表单需要先在后台进行创建,创建好的表单可以被关联到装修中。
表单是收费使用的应用:
AU$3 / 1 月或AU$33 / 1 年
弹窗广告
在页面加载完成后会自动跳出一个板块可以根据偏好设置弹窗频率,该板块仅支持图片上传,可上传多张图片
网页顶部设置
主要设置网页的顶部导航部分,需要先添加菜单导航,关联一个菜单导航,并设置该菜单的文字大小和整个导航的高度,如果需要展示Logo则上传logo到对应的位置即可。
如果顶部的菜单导航页添加菜单需要在管理后台-装修-页面导航-添加菜单
Logo设置
可以选择居左或居右两种展示方式,并勾选一种展示的模式固定顶部或悬浮:
若选择悬浮,当用户在滑动页面时导航时悬浮于顶部的,并且悬浮的导航颜色与默认的导航背景颜色可以不一致,这样可以增加一个简单的交互效果,使其网页视觉效果上更高级些
导航设置
可以设置导航的背景色/自定义背景图,根据偏好设置即可。
在关联了菜单后,可以设置菜单文字的大小以及logo的上下边距(边距越小,logo越大),若菜单有二级/三级可以设置下拉时的圆角(数值越大越圆)
导航内容添加
可以在导航的位置添加文本/图片/按钮,设置方式与图文/轮播图添加内容一样,根据偏好设置即可。
公告
顶部专有的导航,在设置了公告后,前端显示的位置在最顶部,设置的方法与公告组件一致。
其他设置
可以勾选是否显示个人中心/购物车/语言切换
也可以上传自定义的个人中心/购物车的icon,若不上传则按系统默认的显示
网页底部设置
底部设置为网页的底部样式,最多可以添加3组菜单,底部仅支持背景色的调整
菜单
分为菜单地图和社交媒体
菜单地图
选择一个菜单关联,并设置菜单名字的默认颜色以及选中的颜色,设置显示的方式,也可以自定义上传一个icon,在前端用户也可以点击跳转
社交媒体
添加已有的社交媒体主页链接(PC),目前微信仅能上传图片(微信二维码),当用户鼠标指到微信icon时,上传的图片就会显示出来,社交媒体目前市场上流行的社交媒体都有,将对应的社交媒体主页链接放入对应的框即可,若所需要的社交媒体没有,可以自定义上传一个icon,在前端用户也可以点击跳转,输入社交媒体整个菜单的名字以及icon颜色和选择颜色
网页基本设置
网页的字体、颜色、图标、尺寸、按钮颜色的设置
颜色
针对主页的背景色和全网页的主题色以及辅助色
字体
针对全网页/标题/副标题header设置对应的字体,根据偏好设置即可
网站图标
该图标显示在网站名称的旁边,如下图:
上传图标图片大小建议尺寸:100px*100px
按钮
可以设置主/次要按钮的背景色/边框色,以及按钮文字的颜色(不建议修改,因为在有内容添加(按钮)的组件中,按钮都可以单独在进行设置以下信息)
网站尺寸
默认1400,不建议修改
自定义页面
在店铺后台装修-页面管理中选择/创建自定义页面
自定义页面所使用的所有组件与主页的组件是一样的,其中顶部和底部是与主页一致的(自定义页面无法修改),在页面设置中,可以进行对该页面的背景色进行设置调整、自定义页面命名和描述设置。
菜单导航
在店铺后台的装修-菜单导航,可以设置添加装修里各组件需要的菜单导航
添加菜单,输入菜单导航的名称以及关联一个链接,支持二级/三级菜单的创建添加
链接
后台所需要关联链接的地方都是一样的,可以选择外部链接、自定义页面、规则(退换货、服务协议、隐私政策)、商品分类、分类详情页等,选择一种添加即可。其中扫码点餐页为餐饮套餐商家专有的页面,需要开通该应用后才会显示可以添加。
个人中心/商品列表页/商品详情页
在网页顶部的下拉条中可以设置商品列表页/商品详情页/个人中心页
商品列表页
可以针对商品列表页所关联的商品设置、列表展示样式设置以及基本信息显示设置,设置后网页有关联商品分类页的链接,用户点击跳转后就会以设置的显示商品列表。
也可以在商品列表页内添加装修组件,添加的装修组件会添加了商品分类的链接中体现出来。
设置的方法与装修组件的商品列表一致,但此商品列表页管理的是全局
商品详情页
可以对商品详情的信息设置是否显示;以及在商品详情页内添加装修组件,添加的装修组件会在每一个商品详情页中展示出来,所有的组件设置方法与装修内的一样。
个人中心页
可以对个人中心页面的功能栏进行自定义命名,但每个栏都是固定的跳转,即便重新命名了跳转的还是默认对应的内容页面