如图所示,大家在建站的过程中一般想要做出和商场一样的有大小图的响应图片展示,当鼠标点击到小图时,上面就会展示响应的大图。Avada自带的Post Slider可以达到类似的效果,无奈bug和无法编辑,所以基本上排不上用场;而Layerslider和Slider Evolution等强大的插件虽然可以达到这样的效果,不过体量和加载占用比较大,所以一般比较慎用,所以这边给大家推荐一款体量小,加载快的slider,Master Slider插件。废话不多说,进入正题:
首先到插件/Plug的设置里Add New,如图
搜索Master Slider并安装激活(第一个紫色的)
左下角点击Master Slider,并点击Create New Slider
接下来有三种可以选择:
免费的Custom Slider - 空白Slider模版,完全自定义
免费的Sample Slider - 简单的排版,可以用来学习研究一开始设置效果
付费升级的Pre-bulit Slider - 丰富多变的展示形式
正常前两者够用了,而且作为产品展示的也基本上足够了;当然有预算的也可以选择升级付费的,29美金的费用也不算高
接下来我们通过custom slider来了解下基础的设置
首先是基础的设置 - SLIDER SETTINGS,具体项目都有在图片中标注了
接下来是图片Slides的设置,点击加号可以添加要上传或者媒体库的图片,图片要保持一致的尺寸,比例需要和setting设置的长高比例一致(防止失真或者显示不全)
可以通过control或者shift键来选择多张图片
每张图片的设置情况如下:
这里的Link代表点击这张图片会跳转到的链接,一般作为产品展示比较少用到,可以放空
接下来的Slider Control是重点
具体实例对应的三种效果
重点讲下Thumblist(Tab一般少用,有兴趣的可以自己试下)
Arrows和Bullets
还有最后的callbacks,一般可以默认放着不动
补充:关于Lightbox的功能(点击图片可以实现大图查看)
设置好了之后可以preview看下效果,并且Save Changes,然后复制shortcode,然后用Code元素或者text block元素黏贴调用,保存更新就可以显示了!
以上就是基本上的操作介绍了,来上个实例展示下:
具体链接:https://www.kevinswp.com/portfolio-items/bypass-shower-doors-els08-1/
那么最后我们来总结快速做一个产品Slider的步骤
创建Custom Slider,添加/上传处理的图片(SLIDES选项)
设置产品的尺寸和模式,同时做好命名和其他设置(SLIDER SETTINGS)
添加Arrows, Bullet, Tumblist并做好设置
后面批量操作只要copy下之前建好的,然后替换图片就可以快速添加更多的Slider了
以上就是Master的基本介绍和使用了,有什么疑问的可以评论或者私信我,对你有帮助的话给个赞吧~
分享至微信