大多数站长在使用WordPress进行外贸建站时,可以在WordPress网站上安装一些具有前后对比效果的插件,就可以呈现出产品的前后效果图了。产品的前后对比图可以帮助顾客更好地了解商家的产品,以便用户进行购买。一张好的产品效果对比图可以提高店铺销量,和转化率。那么,如何使用WordPress插件来实现产品效果的前后对比呢,将是本文接下来的叙述要点。

各位商家可以通过添加相关功能的WordPress插件就可以完成该效果。这里给大家演示的WordPress插件是Twenty20 Image Before-After。

Twenty20 Image Before-After插件

在WordPress后台搜索安装该插件,然后激活,就可以使用了。编辑页面的时候,就可以在WordPress编辑器里找到这个插件。

WordPress编辑器

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

两张图片作为前后对比的效果

 

选择好图片,然后点击insert插入,然后就进入具体的编辑界面。

将图片插入具体页面

设置好,点击insert shortcode添加短代码,然后在需要添加该功能的时候,添加这段短代码就可以了。当然了,还可以添加到widget微件中。

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

找到appearance和widget

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

产品效果前后对比图

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

如果网站使用的是Elementor(访问官网)编辑器,那也非常的方便。首先安装Happy Addons插件,这个插件是专门用于Elementor page builder的。

 

Happy Addons插件

安装Happy Addons之后,Elementor就会多出很多的小工具。然后你添加before and after微件,就可以制作实现产品前后对比的功能了。

Elementor会多出很多小工具

 

相关文章

  • Shopify 主题编辑器

    Shopify主题自定义开发教程

    对于独立站有品牌塑造要求的商家来说,通过现有的主题模版自定义开发设置网站是一种不可或缺的手段。所以下文将围绕Shopify跨境电商独立站,向大家介绍Shopify主题自定义开发的主要教程,以供大家参考。 当使用 Shopify 主题编辑器自定义开发时,是在自定义页面模板,而不是单个页面本身,这意味着对特定模板所做的任何更改都将应用于使用该模板的所有页面。 可以自定义在线商店的内容、布局、排版和颜色,每个模板都提供了部分和设置,允许更改商店的外观,而无需触摸甚至查看任何代码。 Shopify独立站…

    开发教程 2025年 7月 16日
  • 网站代码优化

    网站代码优化的内容有哪些及优化方法?

    对于不熟悉网站代码的外贸建站商家来说,通过优化网站代码来实现独立站访问速度和搜索引擎排名的提高可能是非常陌生的。网站代码优化的内容及方法主要包括延迟加载、代码缩小合并、最小化I/O、代码矢量化等十几种技巧,为了帮助小白商家更好的了解网站代码优化的内容和方法有哪些,下文将具体为大家展示以上所述的代码优化的内容及方法,以供大家参考。 1、延迟加载 延迟加载是一种策略,可以将资源的加载推迟到实际需要它们时。在 Web 开发中,这可以应用于图像、样式或脚本,通过仅加载必要的内容,可以减少初始页面加载时间…

    网站SEO 2025年 2月 19日
  • TranslatePress插件安装使用

    TranslatePress插件安装使用教程

    TranslatePress是外贸建站中常用的一款非常直观的WordPress多语言翻译插件,可与任何插件和主题同时使用。TranslatePress采用了不同的方法,类似于WordPress定制器的可视化翻译界面;可以实时看到翻译,并且不会错过任何单词内容。本文为大家介绍下TranslatePress插件安装使用教程。 一、TranslatePress插件安装 1、安装TranslatePress 安装TranslatePress非常简单,打开WordPress仪表版并导航至Plugins-&…

    插件指南 2024年 5月 24日
  • 安装并激活SeedProd网站构建器插件

    WooCommerce独立站维护模式设置教程

    使用WordPress+WooCommerce搭建外贸独立站时,有时商家会进行网站的改版或更新等工作,这时为了让网站更加顺利的进行访问,就不得不启用WooCommerce独立站的维护模式,但是对于一些不熟悉WooCommerce代码知识的用户来说,此过程可谓是一头雾水,但是为了让小白都能进行独立站维护模式的设置,所以下文将基于此为大家介绍如何使用WooCommerce插件进行独立站维护模式的设置。 一、安装WooCommerce维护插件 安装并激活SeedProd WordPress插件。 导航…

    开发教程 2025年 1月 24日
  • WordPress安全插件Wordfence的安装与使用

    WordPress建站:WordPress安全插件Wordfence的安装与使用

    在外贸建站的过程中,WordPress网站的安全性应该也是大家需要考虑的问题,尤其是对于建站小白来说,如何借助最便捷的方法维护网站的日常安全维护呢?所以本文接下来将为介绍一款WordPress安全插件为各位的网站安全保驾护航。 Wordfence是一个WordPress安全插件,可保护WordPress网站免受黑客、恶意软件、DDOS和暴力攻击等安全威胁。它配备了网站应用程序防火墙,可以过滤进入网站的所有流量并阻止可疑请求。并且它有一个恶意软件扫描程序,可以扫描所有WordPress插件、主题、…

    插件指南 2024年 7月 30日
  • flow

    六大PHP Web框架软件汇总

    Web框架作为Web程序开发前段工具,可以减少开发时间和维护成本,对于外贸建站来说,是一个较好的代码应用数据库。PHP则是Web开发应用较广泛的前端脚本语言,所以本文基于此,将和大家分享一些PHP Web框架软件,助力外贸独立站的建设。 一、Agavi Agavi是一个强大的,可扩展的PHP 5应用程序框架,遵循MVC范例。它使程序员能够编写清晰,可维护和可扩展的代码。Agavi将选择和自由放在限制性公约上,重点是持续的质量而不是短视的决定。它不是一个完整的网站建设工具,而是一个程序员可以构建应…

    开发教程 2024年 7月 9日
联系我们

联系我们

0551- 62586667

邮件:service@spiderltd.com

工作时间:周一至周日,9:00 - 21:00,节假日不休息

在线客服
微信客服
微信客服
分享本页
返回顶部