将之前和之后滑块添加到您的网站的最简单方法

已发表: 2022-04-10

前后图像在非常广泛的行业中广泛用于营销目的。没有什么词能比一张准确地显示某人或某物在该过程之前和之后的样子的图像更好地描述某个过程所产生的效果。即使在不涉及效果可见的产品的企业中，也可以以幽默的方式使用此功能。

假设您正在经营一家餐厅——您可以展示一个人在您的宫殿用餐之前的样子，以及他们在品尝您的美食后的高兴程度。 在描述您的产品/服务的好处和优势方面，滑块提供之前和之后的可能性是无限的。这完全取决于您的想象。

就像在我们的页面中添加视差效果使您的网站看起来很现代一样，前后滑块让人难以忘记，因为图像可以告诉 1000 多个单词。

此外，您可以完全免费将此功能添加到您的网站，并且全部由您自己完成。在本文中，我们将向您展示如何使用流行的免费插件Qi Addons for Elementor创建前后滑块。

请继续关注以了解更多信息：

使用 Qi 插件为 Elementor 添加之前和之后的滑块

适用于 Elementor 的 Qi Addons 是一款直观的免费工具，可让您毫不费力地为您的网站添加各种华丽的元素。它带有一个非常实用、用户友好的界面，新手和高级用户都会发现它易于使用。 Qi 的特别棒之处在于，除了许多有用的功能外，它还为您提供了一丝现代优雅。

为 Elementor安装 QI 插件的过程与任何其他插件安装没有什么不同。如果您对此有任何疑问，请务必查看我们上面提供的链接，您也可以在评论部分写信给我们。

由于这是一个 Elementor 插件，因此请确保在创建新帖子时切换到 Elementor 编辑器。所有 Qi Addons 小部件都将整齐地显示在左侧元素菜单中。只需向下滚动菜单即可找到它们。

Before and After Slider 小部件提供了一种在同一帧中显示两个图像的简单有效的方法。通过在搜索字段中输入小部件名称或浏览菜单中的小部件，在左侧的侧边栏菜单中找到它。

要添加之前/之后比较滑块，请将 Elementor 元素拖放到所需位置。 添加小部件后，所有设置都将位于左侧，并且在 Content 和 Style 选项卡中是与滑块相关的所有选项。

现在，您需要将前后图像添加到滑块。首先，我们添加之前的图像——将鼠标悬停在图像字段上，将显示“选择图像”选项，或者只需单击该字段中间的小加号图标。

如果需要，您可以从媒体库中选择图像或将图像上传到您的媒体库。只需将选定的图片拖放到媒体库中，如果它还没有，然后选择它并选择。

插入所需的图像后，您可以通过更改将在滑块中间的圆圈中显示的文本来继续自定义之前/之后的滑块。你可以在这里写一条说明，或者一条更吸引人的信息，这取决于你和你的网站风格。您还可以选择是否希望文本垂直或水平对齐。

如果您想调整前后图像之间的边界将出现在滑块上的位置，您可以在字段中输入所需的偏移值。默认值为 50%，这意味着默认边框正好在图像的中间。如果您调整偏移量，这就是滑块的样子：

现在，是时候对前后滑块进行更多微调了。让我们看看您还可以自定义哪些内容以使滑块看起来符合您的需要。 单击样式选项卡以探索更多选项。

如果要从图片中心移动圆形手柄，只需使用滑块调整 Handle Top Offset 值。您将立即看到实时更改，因此您可以轻松决定最适合您的方式。您还将以相同的方式调整圆圈大小，以及图片前后版本之间的边框。

您还可以单击 Nabdle 文本颜色为圆圈中的文本创建颜色阴影，也可以以相同的方式选择文本字体。最后，您还可以以相同的方式自定义圆圈颜色。

在“高级”选项卡中，您会发现更多选项可以使滑块更具吸引力和吸引力。这些选项不仅限于此小部件，它们是默认的 Elementor 选项，您也可以使用它们来编辑页面上的其他小部件。

让我们来说明一些最有趣的。随意测试所有选项，因为您将看到您所做的所有更改，因此您可以立即了解每个选项对滑块的作用以及它是否适合您。

如果您打开 Advanced 菜单，您将看到设置 margin 和 padding 的选项。您会注意到每个选项旁边都有一个小型笔记本电脑图标，它允许您在不同设备（笔记本电脑、平板电脑或移动设备）上设置不同的边距和填充值。

运动效果特别有趣，您可以从超过 35 种运动效果中进行选择。您还可以设置不同的动画在不同的设备上显示。选择动画类型后，您还可以根据需要调整其持续时间和延迟。

现在单击“变换”选项卡以发现您可以使用的更多效果。从旋转到倾斜以及水平和垂直翻转，您可以做很多事情来更改滑块的显示。

在边框选项卡中，您将找到允许您通过在您选择的颜色中添加阴影图片边框来装饰边的选项。您还可以选择在滑动框周围添加阴影效果并设置阴影效果输出。

蒙版选项卡中的选项非常方便。您可以在此处设置滑块以不同的形状显示- 圆形、花朵、草图、三角形、斑点、六边形，甚至添加自定义形状。也可以调整所选形状的大小和位置。

请特别注意响应选项卡，因为您可以选择不显示在选定设备上的滑块。

这是我们根据需要调整滑块后在页面上的样子：

如您所见，在页面上添加前后滑块并不是火箭科学。现在，您可以尽情发挥想象力，为您的工作、产品或服务可能产生的效果创造一些令人印象深刻的视觉表现。如果您有任何问题、评论或询问，请随时与我们联系。

我们希望这篇文章对您有所帮助。如果您喜欢它，请随时查看其中的一些文章！