如何使用多个滑块通过自动动画展示服务

大多数公司需要在其网站上向访问者展示服务。 展示首屏服务的一种方法是使用滑块。 这允许您一项一项地突出显示每个服务，但缺点是用户必须来回导航才能找到他们需要的服务。 更好的用户体验可能是让这些服务始终对用户可见。

在本教程中，我将向您展示如何使用滑块展示服务，同时让每个服务内容始终对用户可见。 为此，我们将使用多个滑块和自动动画，以便使用特定的幻灯片设计一一突出显示每个服务。 我们将使用 Divi 的内置设计选项来做到这一点。

让我们开始吧。

抢先看

以下是使用多个滑块来一一展示服务的设计的快速浏览。

免费下载具有多个滑块布局的展示服务

要亲身体验本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

要将布局导入您的页面，只需提取 zip 文件并将 json 文件拖到 Divi Builder 中。

让我们进入教程好吗？

订阅我们的 YouTube 频道

你需要什么开始

首先，您需要具备以下条件：

1. 已安装并激活 Divi 主题
2. 在前端从头开始构建的新页面（可视化构建器）
3. 用于模拟内容的图像

之后，您将有一个空白画布开始在 Divi 中进行设计。

在 Divi 中使用多个滑块设计创建展示服务

创建部分和第 1 行

首先，创建一个带有一列行的常规部分。

然后在添加任何模块之前，打开部分设置并添加深色背景图像（或背景颜色）。

然后打开行设置并更新以下内容：

最大宽度：80%

使用文本模块添加标题文本

要为设计添加标题文本，让我们使用文本模块。 继续向该行添加一个文本模块。

然后使用以下 HTML 更新文本模块正文内容：

<h1>How can we help?</h1>

然后更新设计设置如下：

标题字体：蒙特塞拉特
标题文字颜色：#ffffff
标题文字大小：6vw
填充：顶部 5%，底部 5%

添加第二行

接下来，添加具有三列布局的另一行。

然后更新最大宽度为 80% 的行设置。

最大宽度：80%

将滑块添加到第 1 列

现在我们准备开始将滑块添加到每个输出列。 首先将滑块模块添加到第 1 列。

删除第二张默认幻灯片，以便只保留一张幻灯片。

然后更新以下内容：

显示箭头：否
显示控制：否
背景颜色：rgba(0,0,0,0)

文本对齐方式：左
标题字体：蒙特塞拉特
标题字体粗细：半粗体
按钮背景颜色：#38b3cb
按钮边框宽度：0px

然后设置自动动画选项如下：

自动动画：开
自动动画速度：3000
继续悬停时自动滑动：开

默认情况下，Divi 会在幻灯片之间添加微妙的淡入淡出动画。 我们想禁用它，以便幻灯片之间没有明显的变化。 为此，请将以下自定义 CSS 添加到幻灯片说明：

animation: none !important;

这会处理滑块设置。 现在我们需要更新我们的个人幻灯片。

为 Slider 1 创建幻灯片

我们将使用三个滑块，三列中的每一列都有一个滑块。 并且为了让幻灯片的时间点一一突出每个服务，我们需要为每个滑块准备三张幻灯片。 然后我们可以选择一张幻灯片来展示或突出服务。

让我们从为 Slider 1 创建三张幻灯片开始。

打开单个幻灯片的设置。 然后调整正文内容，使其只包含一个简短的句子。

现在保存单个幻灯片设置并复制幻灯片 2 次，这样您总共有三张幻灯片。 请记住，对于此设计，您需要拥有与滑块/列相同数量的幻灯片。

将滑块复制并粘贴到每个剩余的列中

在滑块 1 上放置三张幻灯片后，我们可以复制滑块模块并将其粘贴到第 2 列和第 3 列中。

现在您应该在每列中都有相同的滑块。 每个滑块都有三个相同的幻灯片，设置为每 3000 毫秒自动转换一次。 由于我们禁用了淡入淡出动画，您无法看到幻灯片之间的过渡。 但是，如果我们更改其中一张幻灯片的设计，当滑块移动到该幻灯片时，我们将能够看到不同之处。 这允许我们更改每个滑块中一张幻灯片的设计，以便通过自动动画展示（或突出显示）服务。

使用展示幻灯片更新每个滑块

为此，我们将更改滑块 1 中的第一张幻灯片、滑块 2 中的第二张幻灯片和滑块 3 中的第三张幻灯片的设计。这将自动突出显示每个服务（每 3000 毫秒），从左列开始并以右侧的第三列。 然后它会继续重复这个自动动画。

更新滑块 1 展示幻灯片

首先打开滑块 1 的设置，然后打开第一张单独幻灯片的设置。

为了突出显示该服务，我们将使用背景颜色（与按钮匹配）和使用多重混合模式与背景颜色混合在一起的背景图像更新幻灯片。

为此，请添加更新以下内容：

背景颜色：#00b2ca
背景图片：[上传您选择的图片]
背景图像混合：相乘

然后更新此幻灯片的按钮样式，如下所示：

按钮文字颜色：#00b2ca
按钮背景颜色：#ffffff

保存设置。

现在，将新设计添加到第一张幻灯片后，只要滑块到达第一张幻灯片，您就会看到第一张幻灯片突出显示服务。

更新 Slider 2 展示幻灯片

对于 Slider 2，我们希望第二张幻灯片是我们的展示幻灯片，以便它立即出现在滑块 1 中的展示幻灯片之后。

打开第 2 列中滑块的滑块模块设置并更改按钮背景颜色。

按钮背景颜色：#1d4e89

然后打开第二张幻灯片的单个幻灯片设置并更新以下内容：

背景颜色：#1d4e89
背景图片：【上传选择的图片】
背景图像混合：柔光（或相乘以获得更暗的效果）

然后更新幻灯片的按钮样式。

按钮文字颜色：#1d4e89
按钮背景颜色：#ffffff

更新 Slider 3 Showcase Slide

对于 Slider 3（在第 3 列中），我们需要将第三张幻灯片更新为我们的展示幻灯片，以便它立即出现在第二个滑块展示幻灯片之后。

首先，更改滑块 3 的按钮颜色如下：

按钮背景颜色：#ef476f

然后打开第三张幻灯片的设置并更新以下内容：

背景颜色：#ef476f
背景图片 [插入选择的图片]
背景图像混合：相乘

然后更新幻灯片的按钮样式如下：

按钮文字颜色：#ef476f
按钮背景颜色：#ffffff

最后结果

让我们看看最终的结果。

这是设计在平板电脑和手机上的叠加方式。

最后的想法

使用带有自动动画的多个滑块展示服务似乎有点棘手。 但是一旦你理解了这个概念，它实际上很容易。

由于每个滑块代表一项服务，因此您需要保持内容相同，并确保每张幻灯片的按钮 url 相同。

还有许多其他方法可以使用此设置。 例如，您可以将自动动画持续时间设置为不同的速度，以使服务偶尔突出显示。 您甚至可以在滑块的每张幻灯片中添加不同的服务，以弹出更多服务。

我个人喜欢当前的设置，因为它显示了进展并且可以用来向访问者展示一个过程。 但我很想听听你的想法和想法。

我期待在评论中收到您的来信。

干杯!