已收藏,可在 我的资料库 中查看
关注作者
您可能还需要

WordPress建站 | 如何添加Before and After功能

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

WordPress建站 | 如何添加Before and After功能图片来源:图虫创意

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

比如截图展示的这样

WordPress建站 | 如何添加Before and After功能

图片来源:WordPress截图

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

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

WordPress建站 | 如何添加Before and After功能

图片来源:WordPress截图

WordPress插件Twenty20 Image Before-After

这里给大家演示的WordPress 插件是Twenty20 Image Before-After 

在WordPress后台搜索安装该插件,然后激活,就可以使用了。

在编辑页面的时候,就可以在你的WordPress编辑器里找到这个插件。 

WordPress建站 | 如何添加Before and After功能

图片来源:WordPress截图

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

WordPress建站 | 如何添加Before and After功能

图片来源:WordPress截图

选择好图片,然后点击insert插入

然年就进行具体的编辑界面

WordPress建站 | 如何添加Before and After功能

图片来源:WordPress截图

设置好,点击insert shortcode添加短代码,然后在你需要添加该功能的时候,添加这段短代码就可以了

当然了,还可以添加到widget微件中。

在WordPress后台,找到外观appearance,微件widget,然后把设置好的微件拖到你需要的位置

WordPress建站 | 如何添加Before and After功能

图片来源:WordPress截图

然后,你的网页 before and after功能就设置好啦

WordPress建站 | 如何添加Before and After功能

图片来源:WordPress截图

除了这款Twenty20 Image Before-After,还可以试试其他的插件哦

WordPress建站 | 如何添加Before and After功能

图片来源:WordPress截图

Happy Addons for Elementor

WordPress建站 | 如何添加Before and After功能

图片来源:WordPress截图

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

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

WordPress建站 | 如何添加Before and After功能

图片来源:WordPress截图

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

WordPress建站 | 如何添加Before and After功能

图片来源:WordPress截图

赶快去试试吧。 

债见

(来源:小王子的外贸笔记)

以上内容属作者个人观点,不代表雨果跨境立场!本文经原作者授权转载,转载需经原作者授权同意。​

分享到:

--
评论
最新 热门 资讯 资料 专题 服务 果园 标签 百科 搜索

收藏

--

--

分享
小王子的外贸笔记
分享不易,关注获取更多干货