Avada主题添加图片对比效果(Before & After)

0

在一些网站中,我们经常会看到一些图片对比的效果,并且可以通过鼠标滑动控制,在效果对比、图片查看的体验非常好。在前段的Avada版本更新中将图片对比功能加入到了主题中,接下来我们就看一下如何使用Avada主题的图片对比

因为设置项比较多,一般都Fusion Builder中使用,先打开Fusion Builder可视化编辑器,并添加元素

Avada之前之后图片

我们选择这个image Before & After,也就是图片对比效果

可以看到有2个非常明显的上传按钮,在上边的是之前的图片,下边的是之后图片,最主要的就是更改这2个元素,最好选择2张同样大小的图片

上传对比图片

选择好图片再保存即可,预览效果如下图

Avada图片对比默认效果

如果对效果不满意,还可以进一步设置

比如更改控制拉杆的颜色和形状,可以根据图片背景选择一个明显的颜色

Avada图片对比更改样式

可以添加提示文字,鼠标悬浮时会自动增加黑色透明遮罩

Avada图片对比添加文字说明

可以设置垂直方向移动的控制拉杆

Avada图片对比调整方向

另外还有许多其他的设置,比如可见性、鼠标移动、自定义CSS样式等

图片对比的其他设置

 

留言

请输入你的评论
请输入你的昵称