如何给你的网站添加Before and After功能,展示产品前后对比效果?

📚 文章大纲

很多网站在产品页面展示的时候就会加上before and after的功能,来展示产品的前后使用功效的对比。

比如截图展示的这样

这个功能WordPress网站就可以轻松添加。

看看如何添加吧

WordPress插件Twenty20 Image Before-After

我们通过添加先关的功能的WordPress插件就可以完成该效果

这里给大家演示的WordPress 插件是Twenty20 Image Before-After 
在WordPress后台搜索安装该插件,然后激活,就可以使用了。
在编辑页面的时候,就可以在你的WordPress编辑器里找到这个插件。

然后在你的WordPress媒体管理里面,选择两张图片作为前后对比的效果

选择好图片,然后点击insert插入
然年就进行具体的编辑界面
设置好,点击insert shortcode添加短代码,然后在你需要添加该功能的时候,添加这段短代码就可以了
当然了,还可以添加到widget微件中。
在WordPress后台,找到外观appearance,微件widget,然后把设置好的微件拖到你需要的位置
然后,你的网页 before and after功能就设置好啦
除了这款Twenty20 Image Before-After,还可以试试其他的插件哦

Happy Addons

如何你的网站使用的是Elementor编辑器, 那也非常的方便。

首先安装Happy Addons插件,这个插件是专门用于Elementor page builder的,安装Happy Addons之后呢,你的Elementor就会多出很多的小工具。

然后你添加before and after微件,就可以制作实现产品前后对比的功能了。

赶快去试试吧。

大家还有什么关于WordPress建站和Elementor使用的问题,都可以联系我哦。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

微信公众号
助理微信