Divi 插件亮点：Divi Sensei Before After Slider

前后滑块是让访问者比较两个图像的好方法。 顾名思义，它们可以是改变前后的图像，例如减肥、修饰的图像、装饰的房间、喷漆的汽车等。当然，它们比以前有用得多和照片后。 它们可用于比较图形、产品、度假目的地等。

在本文中，我们将看看 Divi Sensei Before and After Slider，一个用于 Divi Builder 的前后滑块模块，看看它可以做什么，并帮助您决定是否在您的 Divi 中需要这个第三方插件工具箱。

Divi Sensei 前后滑块模块

像往常一样上传并安装 Divi Sensei Before 和 After 插件。 三是无需设置。 上传并激活插件后，您会看到一个新模块添加到 Divi Builder，名为 Sensei Before and After Slider。

该模块在左侧显示前图像，在右侧显示后图像。 它在中心显示一个滑块，用户可以抓住它并从一侧滑动到另一侧。 将鼠标悬停在图像上会显示之前和之后的标签并添加叠加层。 您可以对这些元素中的每一个进行设计控制。

让我们来看看滑块的功能和选项。 对于这些示例，我使用来自 Unsplash.com 的图像。

内容标签

内容选项卡可让您添加前图像、后图像和标签。 在此示例中，我添加了同一图像的两个不同版本来创建前后图像。 这对于显示经过修饰的照片的结果很有用。 这些选项还包括标准链接、背景和管理标签设置。

它还提供了可以更改前后标签文本的字段。 我将鼠标悬停在图像上以显示标签。 默认情况下，它们仅在悬停时显示，但您可以更改此设置。

设计选项卡

“设计”选项卡包括滑块、标签和叠加的设置。 它还包括大小、间距、边框、框阴影、过滤器、变换和动画的标准设置。

滑块

滑块设置允许您在水平和垂直之间选择滑块方向，设置起始偏移以确定滑块在图像上的起始位置，以及更改滑块、手柄、手柄背景和手柄图标的颜色。 我已经在上面的示例中调整了这些设置中的每一个。

标签

对于标签，您可以让它们始终显示或仅在悬停时显示，并调整背景和字体。 背景颜色包括纯色和不透明度调整。 您可以单独调整背景，但它不允许您单独调整文本颜色。 您还可以选择字体、更改它们的大小、样式、对齐方式、行高、添加阴影等。行高设置背景的大小。

在上面的例子中，我已经指定了背景和字体颜色，改变了字体的大小，以及行高的大小。 我还将它们设置为始终显示，以便用户无需将鼠标悬停在图像上即可看到它们。

覆盖

默认情况下启用覆盖。 您可以禁用它、调整颜色和调整不透明度。 默认颜色为黑色，不透明度为 50%。

我在本例中选择了蓝色，并将不透明度设为 50%。 在您悬停时让图像显示出来似乎效果最好。 您使用浅色还是深色以及您设置的不透明度量将取决于图像中的颜色以及您希望如何使用叠加层。

对于此示例，我使用了黑白配色方案。 叠加和标签文本为白色，滑块元素为黑色。 我降低了标签背景的不透明度，使它们变暗。 我将它们保留为默认尺寸。

Divi Sensei 之前和之后的滑块示例

让我们看几个使用滑块的方法示例，以及它们在 Divi 布局中的外观。 我正在使用来自 Unsplash 的图像和那些在内置于 Divi 的免费 Divi 布局中可用的图像。 我会在使用时确定我正在使用的 Divi 布局。

图形比较

对于这个，我使用了 Divi Video Game 布局包中的设计元素。 我禁用了叠加层，将滑块元素更改为绿色，并使标签始终显示。 标签的背景为纯蓝色。 我增加了字体大小，更改了颜色，使用了 Rubik 字体系列，使字体粗细中等，并将它们全部大写。 如果您拥有或玩过这些游戏系统，并且您知道为什么这种虚构的图形比较不存在，那就太好了。

这是它在布局中的外观。 它非常适合进行像两个不同游戏机图形的模型这样的比较。

组合前后的服务

这个例子模仿了装修前后房间的想法。 当两张图片的尺寸不同时，它会使用较大的图片的尺寸，较小的图片会显示一个间隙。 它将平等地放置它们的高度或宽度，并将其余部分填充为空白空间。 在此示例中，右侧的图像比左侧的图像短。 虽然具有相同尺寸的图像效果更好，但它仍然适用于接近相同尺寸的图像。

我添加了 Home Improvement 布局包中的颜色和字体。 这是它在布局的一部分中的外观。

这是叠加层的外观。 我已将滑块移到一侧以显示更多之前的图像。

作为参考，这是移动手柄以显示更多后图像的图像。

产品对比

在本示例中，我将 Tea Shop 布局中的三个茶图像替换为 3 个 DS B&A 滑块。 我正在为按钮和滑块控件使用布局中的颜色。 中间滑块设置为垂直只是为了不同。 覆盖层使用布局中不透明度降低的颜色。

以下是它们在布局中的外观。 这非常适合比较多个产品、多个位置、多种颜色的视觉细节，对于具有多个选项的产品，可以显示和不显示选项等。

比较位置

在本例中，我使用滑块来比较两个位置。 它们不必相似，只需出于某种原因进行比较即可。 我已经从滑块和标签的布局中添加了颜色，以及标签的字体。 我还添加了一个框阴影以帮助它从其余图像中脱颖而出。

这是使用布局中的颜色在 Siteseeing 布局包中的外观。 这是一个很好的例子，说明两个图像不必是同一事物甚至相似事物的前后。 这是展示婚礼场地、度假胜地等的好方法，可以帮助买家在它们之间进行选择（或者使选择更加困难，但我不建议将其作为目标）。

购买

您可以在 Divi Marketplace 中购买 Divi Sensei Before 和 After Slider。 无限网站使用和 1 年支持和更新的费用为 5 美元。 此价格包括 30 天退款保证。

结束的想法

Divi Sensei 前后滑块是一个简单的模块。 例如，滑块没有宽度控件，标签不包括边框、框阴影、渐变等，但它的设置使它很容易适应我添加到的每个布局的样式。 对于价格和它的功能，设置级别很有意义，我能够轻松获得我想要的设计。

所有控件都很直观，我从没想过需要说明。 您甚至可以为图像使用不同的 alt 标签来帮助改进 SEO。 如果您对用于 Divi 网站的前后滑块感兴趣，Divi Sensei Before and After Slider 值得考虑。

我们希望听到您的意见。 您是否尝试过 Divi Sensei 前后滑块？ 请在下面的评论中告诉我们您对此的看法。

精选图片来自 Elvetica/shutterstock.com