如何给WordPress网站添加前后图片对比功能？——BEAF

我们在搭建网站时，有时会需要展示产品前后对比的效果，比如展示产品迭代、设计修改、装修前后、修图效果、施工进展或任何具有显著对比的视觉内容时，使用前后图片对比滑块的功能会更加直观有冲击力。

这篇文章就教你如何实现：

BEAF 是一款专为 WordPress 设计的插件，它让创建精美的前后图片对比滑块变得前所未有的简单。无需编码知识，您就能在几分钟内为您的网站增添这一吸睛功能。

1. 登录您的 WordPress 后台。
2. 前往 插件 -> 安装插件。
3. 在搜索框中输入 Ultimate Before After Image Slider & Gallery – BEAF。
4. 找到插件后，点击 立即安装。
5. 安装完成后，点击 启用。

在 WordPress 后台左侧菜单中，你会看到一个新的选项，Before and After Slider，点击进入。

1. 点击 Add New Slider (添加新滑块)。
2. 为您的滑块命名。
3. 上传“之前”和“之后”图片：
   • 在插件界面中，会有明确的选项让您分别上传 Before Image (之前图片) 和 After Image (之后图片)。
   • 点击上传按钮，从您的媒体库中选择或上传图片。建议选择相同尺寸或比例的图片，以获得最佳效果。

接着在最下面还可以设置滑块滑动的方向和样式。

【Options】选项下面可以设置滑块的起始位置以及Before和After图片显示的文字。

【Style】则设置样式颜色参数。

等上面的内容都修改好之后，右上角会有一个简码。

复制下来，然后到需要放置的页面或文章中，添加简码元素，把复制的简码粘贴进去。

这样我们就做好了一个Before After Image的模块，如果你需要更多的图片展示，可以到BEAF中继续添加。

© 文章版权归白小菌所有，🫰欢迎转发分享。未经允许请勿抄袭转载。