如何使用滚动产品组件?

浏览数量: 98     作者: 本站编辑     发布时间: 2019-10-23      来源: 本站

一、什么是滚动产品组件?


滚动产品组件是在页面上展示多个带图产品的模块,可控制不同访问终端下可视区域的产品个数、是否自动滚动、滚动箭头的样式等。



二、滚动产品组件有哪些应用场景?


使用滚动产品组件可以实现在页面上突出展示部分重点推广产品,产品图片和产品名称都默认带链接,点击可以进入到具体的产品详情页进一步了解详细信息,只要是这种场景都可以使用滚动产品组件来实现,滚动产品组件一般添加在网站首页上。

滚动产品组件展示效果举例如下:

前台展示效果.jpg



三、如何使用滚动产品组件?


1、先查看滚动产品组件是否已经存在

先查看滚动产品组件是否已经存在,若存在,请忽略此步骤直接往下看操作方法,若不存在,就需要先添加一个滚动产品组件了。

2、如何添加滚动产品组件?

在页面上添加组件的方法都是一样的

添加的组件名称为“产品列表”,如下图所示:

滚动产品组件.png


3、如何设置滚动产品组件?

1)进入组件的“设置”通常分两种场景:

● “此组件已经添加好”场景:进入所有组件的设置方法都是一样的,可

●  “新添加的组件场景:在添加此组件时会弹出这个组件的的设置话框。


2)在组件的设置中可以设置组件展示的内容、高级功能和风格。


▲ 内容

组件标题:在此可以输入这个组件的标题,不输入不占位也不显示;
选择列表的产品数据:在此可以选择展示在这个位置的产品,请注意:如果选择的产品数量过少,不满一行,是滚动不起来的哦;
如果需要展示某一分类的产品或者需要展示热门产品/新产品/推荐产品可以使用筛选条件来选择产品,如果展示的产品分散在不同的产品分类中,可以使用“选择指定产品”功能来选择产品;
“更多”链接:单击小链子形状的按钮,可以设置“更多”文字的链接,比如:在这里只是展示了部分产品,想设置一个超链接可以链接到产品列表总页面,就可以做这个设置,设置好之后在滚动产品右上角区域出现“更多”二字;
链接文字类型有很多,可以根据需要来选择,

滚动产品--内容.jpg



 高级

单击“高级”切换到高级页签下,可以做如下设置:

图片间距:在这里可以设置图片与图片之间的距离;

响应式变化下不同设备的显示图片数:您可以选择自适应,即根据响应式规则自动显示一行显示的图片数量,您可以自定义不同设备下一行展示的图片数量,如下图所示。

设置--高级.jpg          


 风格

单击“风格”切换到风格页签下,可以做如下设置:

风格.jpg


展示样式:目前有单线滚动、循环滚动、无缝滚动三种展示样式,具体的区别,可以自己分别选择试一下很快就会明白了;


是否默认滚动:可以设置默认滚动或不滚动,没有修改之前,都是默认不滚动;

滚动间隔时间:“是否默认滚动”项,若设置滚动,可以设置滚动间隔时间(单位是毫秒);

滚动间隔时间.png


是否显示左右按钮:左右按钮可以设置显示或隐藏,若设置显示,需要设置以下两项:

设置按钮对齐位置:右两个选项,垂直居中和垂直居中于图片,分别设置一下即可看出效果;

选择按钮样式:目前有3种样式可以选择,根据需要选择一个即可,如下所示:

显示按钮.jpg


设置图片边框:可以隐藏或显示图片边框,若显示,可以设置边框宽度与边框颜色,如下图:

设置图片边框.jpg



是否显示图片分页:若图片数量超过一行时,可以在这里设置是否显示图片分页,若设置显示,可以选择分页样式;
选择分页样式:在这里可以选择分页的样式。


是否显示图片分页.jpg


3)以上内容、高级功能和风格设置好以后,单击设置窗口右下角的“保存”,以上设置即可生效;

设置保存.jpg



4、如何编辑滚动产品组件的样式?

所有组件的“编辑样式”功能操作入口都是一样的,组件的“编辑样式”功能主要可以编辑此组件的以下内容:组件尺寸、组件背景、组件边框、组件边距、文字字号、颜色等。

组件的“编辑样式”功能,操作入口如下:


编辑样式.jpg


5、如何复制滚动产品组件?

通过组件的复制功能,可以快速拷贝出一个同原组件一模一样的组件,然后在这个组件的基础上再做局部的修改,这样省时省力省心。注意:通过复制组件生成的新组件,同原组件没有关系,单独编辑/删除其中一个组件不会影响到另一个组件。此功能经常用于页面上要展示多个同类的组件,先设置好一个组件,然后通过复制组件功能将内容样式等设置项全部拷贝过去,然后再简单修改即可实现不同的内容。

所有组件的“复制组件”功能都是一样的,

操作入口如下图所示:

复制组件.jpg


6、如何应用滚动产品组件?

通过组件的“应用组件”功能,可以将当前页面的组件应用到其他页面上,因为原理上它们是同一个组件,所以在任何被应用到的页面上编辑/删除组件时,被应用的页面会一起变化,这个是“应用组件”和“复制组件”最本质的区别。此功能经常用于面包屑导航、产品分类组件、文章分类组件等。被应用过去的组件会出现在页面的最底端,可以用鼠标左键按住组件名称拖动到需要的位置。

所有组件的“应用组件”功能操作入口都是一样的,

组件的“应用组件”功能,操作入口如下:


应用组件.jpg


7、如何删除滚动产品组件?

如果确定不需要这个组件了,可以通过“删除组件”按钮把此组件删除掉,被删除的组件会默认放到组件回收站中。

所有组件的“删除组件”功能操作入口都是一样的,

组件的“删除组件”功能,操作入口如下:


删除组件.jpg


8、如何恢复已被删除的滚动产品组件?

如果需要恢复已经删除的组件,可以到组件回收站中,找到对应的组件,然后执行【还原】操作,即可恢复此组件到原有的页面上,通常会位于页面的最底端。

恢复组件入口:所有组件的恢复功能操作入口都是一样的,如下图所示:

6-1


扫描二维码获得更多黑蝠资讯

产品与服务

行业解决方案

帮助中心

关于我们

联系方式

邮箱:sales@hefoweb.com
地址:深圳市宝安区宝源路名优采购中心B座308
扫一扫关注    
版权2023 前海黑蝠(深圳)网络技术有限公司
前海黑蝠(深圳)网络技术有限公司是深圳网站建设公司谷歌推广公司、专业网站建设公司,为您提供外贸网站建设、品牌网站建设、小语种网站建设、跨境独立站建设、谷歌SEO推广、外贸推广平台服务,有需要的可以联系我们!