如何使用滚动图片组件?

浏览数量:1     作者:小七     发布时间: 2016-01-18      来源:本站

滚动图片
 
【组件简介】 滚动图片组件实现多张图片滚动展示,可控制不同终端下可视滚动区域的图片个数、是否自动滚动、滚动箭头的效果等。
 
【应用场景】滚动图片组件一般应用于工程案例的展示、工厂图片的展示、资质证书的展示等,选择若干张同一类型相同尺寸的图片,以滚动的形式展示出来,可以是自动滚动,也可以设置点击左右切换按钮才滚动,形式多样,灵活选择。
 
【使用方法】

1、如何添加滚动图片组件?
1)     打开浏览器输入www.7datong.com 到达七达通科技云营销平台首页,点击右上角登录按钮。

七达通科技建站05
 
2)     在白色框内输入账号和密码,点击登录。
七达通科技建站06
 3)     点击编辑网站,进入网站后台。
七达通科技建站07
 4)      把要操作的页面切换为当前页面。把鼠标放到“当前页面”四个字眼的右侧区域,弹出下拉菜单,在自定义页面或系统页面中找到相关页面,单击此页面名称(不要单击页面名称后面的按钮),即可切换为当前页面。

选择页面

 
5)     在当前页面,把鼠标放到要添加社交关注组件附近的区域,出现黑色小水滴,将鼠标移到黑色小水滴上,水滴呈现蓝色,单击蓝色小水滴,弹出”添加组件“对话框;

添加组件入口
6)     添加“滚动图片”组件。在基础组件中,在左边第六个找到“滚动图片”组件,单击“滚动图片”,弹出“设置滚动图片”窗口。
   添加滚动图片组件
 
2、如何设置滚动图片组件?
 
在弹出的设置滚动图片窗口,可以设置滚动图片的内容和风格。

或者通过如下入口也可进去滚动图片组件的设置项:把鼠标放到滚动图片组件区域,左上角出现组件名称,把鼠标移到“滚动图片”四个字右侧的第一个按钮处即“设置”,单击它即可进入设置项中。
滚动图片组件
内容:
 
组件标题:根据需要可以输入组件标题,若不输入,标题也不会显示 ;
添加图片:首次添加这张图片,需要通过“本地上传”按钮传上来;若之前传过的图片,默认是保存在资料库里的,这种情况也可以通过“从资料库选择”按钮到资料库选择这张图片;
“更多”链接:根据需要,这个页面您可以只放几张有代表性的图片,更多的图片可以引导用户到其它的详情页面去看,就可以在这里加一个链接,中文显示“更多”,英文显示“more”,显示在这个组件区域的右上角位置;
设置滚动图片


每张图片左下角有一个笔形状的按钮,此按钮是编辑按钮,单击此按钮,弹出设置框,可以设置以下内容:
图片Alt属性:默认取图片名称,建议根据推广的内容对每张图片都重新修改此标签,这是搜索引擎对图片识别的唯一标识,因此加了以后对SEO有利。同时若访客网络不好时,图片加载不出来,若加了此标签,用户也可以了解是关于什么的了,因此对用户体验也是有好处的。描述:可以对图片添加描述,然后通过设置图片描述风格使描述显示在不同的位置;图片链接:若选择的是链接模式,可以给此图片添加链接,链接类型有很多,比如:站内页面、外部链接、电子邮件、页面锚点、产品分类、文章分类、文件,可以根据需要来选择
添加滚动图片 设置滚动图片属性
(每张图片也可以分别添加链接)若想添加链接,单击输入框右边链接按钮,若想删除链接,单击左右边删除按钮。
选择链接类型:在这里您可以选择链接到站内页面、外部链接、电子邮件、页面锚点、产品分类、文章分类、文件、FAQ分类。
选择一个站内页面:当您在链接类型中选择某类型之后,会出现下拉框或输入框,一般选择的链接要符合所选组件显示的内容。
在新窗口打开连接:非站内链接可以选择此选项,在浏览器中重新打开一个页面显示链接内容,然后单击保存即可。
滚动图片插入链接
 
高级:在这里可以调整每张图片左右两边的边距和不同设备每行显示的图片数
图片间距:拖动滚动条,一般每张图片左右边距为10px-20px比较合适。
设置滚动图片间距
响应式变化下不同设备的显示图片数:
 
不同终端的屏幕宽度是一样的,用户可以根据需要”自定义“不同终端下显示的图片数量。
自适应:就是根据图片的宽度自动排版,非通栏的内容区域是1180px的宽度,比如图片都是600px*600px,那可能一行只能排一张图片,一行显示不下2张图片。如果上传一批500*500的图片,可能就会一行显示2张图片的形式排版,因为1180px的宽度一行就只能放2张。
自定义:根据需要自定义不同终端显示的图片数量,宽屏电脑的宽度通常都是>1200px的,笔记本或PAD横屏的宽度通常在961px~1200px,PAD竖屏的宽度通常在741px~960px,手机横屏的宽度通常在500px~740px,手机竖屏的宽度通常<500px。
显示图片数量
 
 
风格:
展示样式:
单线滚动:图片先向左后向右滚动,要求图片高度一致,宽度一致,这样排列起来比较整齐;
循环滚动:图片一直向左滚动,要求图片高度一致,宽度一致,这样排列起来比较整齐;
 
是否默认滚动:
滚动:注意展示的图片总数小于一行展示数量是不会滚动的。
不滚动:用户手动滚动。
 
是否显示左右傻按钮:
显示:若选择了不滚动模式,那么按钮可最好选择显示,那样用户才会注意到图片可以滚动。
隐藏:若选择了默认滚动模式,那么按钮可以选择隐藏。
滚动图片展示样式


选择按钮样式:有按钮在外面和按钮在里面,圆形按钮 方形按钮三种样式可供选择,根据网站分格选择按钮样式。
是否显示图片分页:分页可以增加滚动图片的灵动感,用户也可以点击分页按钮查看图片,一般显示在滚动图片正下方。
选择分页样式:三种分页样式,可供选择。
设置好后保存即可。

滚动图片按钮样式

          微信公众号

阿里巴巴国际站

网站建设

知识圈

联系我们
  客服QQ:279415070
   服务顾问:17727578727  ( 微信 )
  邮箱:info@7datong.com
  地址 : 深圳市龙华区华油工业区1栋2层
Copyright © 深圳市七达通科技有限公司 All Rights Reserved 版权      互联网服务粤ICP备16005814号
   - 网站地图