如何使用 Divi 的滚动效果逐步闪现流程的步骤

公司通常通过提供流程步骤的有用说明来向访问者介绍他们的服务。 例如，网页设计机构可能会展示他们的网页开发过程，或者面包店可能会展示他们制作完美纸杯蛋糕的步骤。

借助 Divi，我们可以使用内置的滚动效果将“流程的步骤”提升到一个完全不同的水平。 在本教程中，我们将向您展示一种简单的方法，在用户向下滚动页面时逐步将步骤闪现到流程中。 这将给设计一个很好的交互提升，创造性地强调预期的信息。

抢先看

免费下载布局

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

下载文件

免费下载

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

下载

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

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

让我们进入教程，好吗？

你需要什么开始

首先，您需要执行以下操作：

1. 如果您还没有安装并激活 Divi 主题。
2. 在WordPress中新建一个页面，在前端使用Divi Builder编辑页面（visual builder）。
3. 选择“从头开始构建”选项。

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

如何使用 Divi 的滚动效果逐步闪现流程的步骤

要创建布局以将步骤闪现到滚动过程中，我们必须从添加新行开始。

创建四列行

首先，向该部分添加一个四列行。

在我们开始向列添加模块/内容之前，打开行的设置并更新以下内容：

• 天沟宽度：2
• 最大宽度：80%

到目前为止足够简单。 现在让我们开始添加一些内容。

向每列添加内容（步骤）

由于此设计具有滚动效果，可将步骤闪烁到流程中，因此我们的每一列都将包含其中一个步骤。 第 1 列将包含说明第 1 步的内容。第 2 列将包含第 2 步的内容。依此类推。

将文本模块添加到第 1 列

将新的文本模块添加到第 1 列。

文本模块内容和设计

然后更新文本内容如下：

打开设计选项卡并更新以下设置：

• 文字字体：Lato
• 文字字体粗细：粗体
• 文字文字颜色：#fc6d71
• 标题 2 字体：Oswald
• 标题 2 字体粗细：轻
• 标题 2 文字大小：32px
• 标题 2 字母间距：1px
• 标题 2 行高：1.3em
• 边距：0px 底部
• 填充：顶部 10%，底部 10%
• 边框宽度：1px
• 边框颜色：rgba(166,166,166,0.16)

将图像模块添加到第 1 列

文本模块就位后，在第 1 列中的文本模块下方添加一个图像模块。

然后按如下方式更新图像边距：

复制和粘贴第 1 列的内容

为了加快设计过程，我们可以使用多选来选择第 1 列中的两个模块，然后将它们粘贴到其余四列中的每一列中。

更新重复模块的内容

复制模块到位后，返回并更新文本内容和图像以反映流程中的四个步骤中的每一个。

完成后，您的设计应如下所示。

为每一列添加滚动效果

我们现在准备添加滚动效果以在用户向下滚动页面时闪烁过程的每个步骤。 我们不会为每个模块添加滚动效果，而是将滚动效果添加到每一列，以便将效果应用于内容中的所有模块。

为了创建闪烁的滚动效果，我们将为每一列使用淡入和淡出滚动效果。 这个想法是通过从 0% 不透明度开始，继续到 100% 不透明度，然后回到 0% 来开始效果。

第 1 列滚动效果

在行设置中，打开第 1 列的设置并添加以下滚动效果：

在淡入淡出选项选项卡下：

• 启用淡入淡出：是
• 起始不透明度：0%（在 20% 视口处）
• 中等不透明度：100%（在 25%-45% 视口处）
• 结束不透明度：0%（在 50% 视口处）

第 2 列滚动效果

打开第 2 列的设置并添加以下滚动效果：

在淡入淡出选项选项卡下：

• 启用淡入淡出：是
• 起始不透明度：0%（在 35% 视口处）
• 中等不透明度：100%（在 40%-60% 视口处）
• 结束不透明度：0%（在 65% 视口处）

第 3 列滚动效果

第 4 列滚动效果

添加标题

最后，我们可以在布局中添加一个标题。 为此，请在当前行下方添加一个新的单列行。

然后将文本模块添加到具有以下内容的行：

在设计选项卡下，更新以下内容：

• 文本对齐：拉托
• 标题 2 字体粗细：轻
• 标题 2 字体样式：TT
• 标题 2 文本颜色：#fc6d71
• 标题 2 文字大小：70 像素（桌面）、40 像素（平板电脑）、24 像素（手机）
• 标题 2 字母间距：0.5em

最后结果

要在实时页面上查看结果，您需要在该部分的上方和下方添加一些额外的空间，以查看从头到尾的滚动效果。 一种简单的方法是为该部分添加顶部和底部边距。

这是结果。

最后的想法

说明流程的步骤不必局限于静态图像或图形。 借助 Divi 的滚动效果，您可以在用户向下滚动页面时逐步将每一步闪烁到视图中，从而使插图栩栩如生。 而且，由于滚动效果添加到每一列，您可以轻松更改每列中的模块/内容，而不会中断功能。 希望这将是一种有用的技术，可以添加到您的设计工具箱中。

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

干杯!