海外社媒SNS代运营Tiktok代运营公司
Revive Old Posts

假设您是一名健身博主,并希望通过分享您身体转变前后的图像来激励您的观众。 如果您可以使用前后图像滑块来显示差异,而不是将图像并排放置,那就太酷了。

等待! 什么是前后图像滑块?

它是一个图像滑块,可将一个图像堆叠在另一个图像上,并使用交互式滑块来显示图像。 如果滑块水平移动,则当滑块移动到最右侧时会显示第一张图像,而当滑块向左移动时将显示第二张图像。

这样的滑块对于比较两个相似的图像很方便。 因此,它对许多专业人士(如摄影师、美容师、设计师、医生和牙医)很有用。

如果您是 WordPress 用户并且想知道如何在您的网站上使用它,那么您来对地方了。 在本文中,我将分享如何在您的网站上使用滑块效果添加前后图像。

因此,事不宜迟,让我们开始吧。

https://www.youtube.com/watch?v=MmSjQMsOgPQ

海外社媒SNS代运营Tiktok代运营公司

订阅我们的 YouTube 频道

如何在图像滑块之前添加

有许多免费和高级插件,您可以使用它们在网页上添加前后图像滑块。

但是,我们将在本文中使用Twenty20 Image Before After 插件。 稍后,我还会提到一些流行的免费和付费替代品。

在插件之前安装Twenty20 Image

2020 是一个免费插件,可在 WordPress 插件库中找到。 它允许您在帖子、页面和侧边栏中添加前后图像滑块。 它还支持流行的页面构建器,如 Elementor 和 WPBakery。

要安装此插件,请转到 Plugins -> Add New 并搜索Twenty20 Image Before-After。 找到插件后,只需安装并激活它:

在您的帖子或页面中添加前后图像

Two20 插件不附带任何设置页面。 所以你可以在安装插件后开始做脏活。

现在,在 WordPress 5.0 更新之后,您可能正在使用 Classic 或 Gutenberg 编辑器。 所以让我向您展示这个插件如何在两个编辑器上工作。

古腾堡编辑

到目前为止,Twenty20 插件还没有块,但您可以使用其短代码功能并将代码添加到短代码块中。

让我们看一下短代码的示例:

[twenty20 img1=”3442″ img2=”3442″ direction=”horizontal” offset=”0.4″ align=”none” width=”100%” before=”Before” after=”After” hover=”false”]

让我解释一下每个参数:

  • 图片1 – 在这里您必须添加第一张图像的图像 ID(不是图像 URL)。
  • 图像2 – 添加第二张图片的 ID(而不是图片 URL)。
  • 方向 – 这允许您决定是在水平方向还是垂直方向上使用滑块。 因此,该值将是水平的或垂直的。
  • 抵消 – 偏移值应介于 0.1 到 1 之间。
  • 对齐 – 这决定了前后图像的对齐方式。 值可以是 none、left 或 right。
  • 宽度 – 图像的宽度可以是百分比或像素。
  • – 您可以在此处添加之前图像的标题。
  • – 添加后图像的标题。
  • 徘徊 – 此参数决定是否要在鼠标移动时移动滑块。 它接受真值或假值。

不知道如何找到图片的ID? 从 WordPress 仪表板的左侧边栏中转到媒体 -> 库,然后单击图像。 现在检查您的网络浏览器的地址栏:

在上面的示例中,您可以在 URL 中看到 item = 50。 因此,50 是该特定图像的 ID。

好的! 现在您知道如何使用Twenty20 简码,创建(或编辑)您想要添加前后图像滑块的帖子或页面。 然后,添加一个新块并搜索短代码小部件:

复制我在上面示例中使用的代码,将其粘贴到短代码框中并根据您的要求进行调整:

就是这样。 您现在可以预览帖子(或页面)并检查它是否正常工作。

经典编辑器

如果您使用的是经典编辑器,您将在安装插件后看到一个新按钮添加二十 20。 单击该按钮,将打开一个弹出窗口,要求您选择两个图像:

选择两个图像并单击插入后,将打开一个新窗口,询问您生成短代码的一些详细信息:

完成设置后,您可以单击“插入简码”按钮。

您也可以稍后对此短代码进行更改 – 只需按照古腾堡编辑器部分中的示例进行操作即可。

在侧边栏中添加前后图像

2020 插件还允许您在网站的侧边栏中添加前后图像。 它带有一个小部件,可以为您做很酷的工作。

前往外观 -> 小部件。 现在找到Twenty20 小部件并将其拖到侧边栏区域。 此小部件的设置与上一节类似 – 只是您有两个额外的按钮用于选择(或上传)前后图像。

完成后,保存小部件设置,然后检查您的网站。 很简单,不是吗?

一些替代插件

虽然我喜欢Twenty20 插件,因为它简单且免费,但您可能更喜欢其他的东西。 因此,我决定分享这个插件的一些免费和高级替代品:

1. Divi 的前 + 后图像

如果您是 Divi 用户,Divi 插件的 Before + After Images 最适合您的需求。 它是轻量级的、响应式的并且支持延迟加载。 它创建了一个新模块,可帮助您将前后图像添加到您的网站。 这个免费插件将与 Divi Builder 插件、Divi 主题和 Elegant Themes 的其他主题一起使用。

价格 – 免费 | 更多信息

2.多用途前后滑块

多用途 Before After Slider 是触摸和滑动启用的高级插件。 它带有一个易于使用的管理面板,可帮助您根据需要调整每个图像滑块,并且不需要使用短代码。 您可以创建无限的前后图像并在帖子、页面和侧边栏上使用它们。

价格 – 18 美元 | 更多信息

3. 智能前后查看器

Smart Before After Viewer 是一个完全响应和触摸友好的高级插件。 它允许您在前后图像上添加自定义标签文本。 您可以毫不费力地更改标签的位置和颜色。 此插件还允许您在单个页面上添加多个图像。

价格 – 18 美元 | 更多信息

尾注

前后图像滑块是显示两个相同图像之间差异的好方法。 您可以按照本教程在 WordPress 网站上使用此类滑块。

那么,您是否使用过本文中提到的任何插件? 或者,您想推荐一个适合实现相同目标的特定插件吗? 在评论部分告诉我们。

精选图片来自 __/shutterstock.com

海外社媒SNS代运营Tiktok代运营公司
Revive Old Posts