如何使用 Divi 在悬停时创建 3 步 Blurb 显示

许多公司网站在某些时候分享了他们方法的预览。 创建方法部分时，您可以以传统方式处理它，也可以尝试为其添加更多交互。 如果您正在寻找实现第二种选择的方法，那么您会喜欢这篇文章的。

在本教程中，我们将向您展示如何使用 Divi 的新尺寸选项创建 3 步模糊显示。 我们将首先显示标题，继续显示通向步骤的三个箭头，并通过显示动画简介来完成效果。 您也可以免费下载 JSON 文件！

让我们开始吧。

预览

在我们深入学习教程之前，让我们快速浏览一下不同屏幕尺寸的结果。

桌面

移动的

免费下载 3 步 Blurb 显示布局

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

下载文件

免费下载

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

下载

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

让我们开始重建吧！

订阅我们的 YouTube 频道

添加新部分

默认渐变背景

您需要做的第一件事是向您正在处理的页面添加一个新部分。 打开部分设置并向其添加以下渐变背景：

• 颜色 1：#ffa3ad
• 颜色 2：#ffcea3
• 梯度方向：122deg

悬停渐变背景

修改悬停时的渐变背景：

• 颜色 1：#000000
• 颜色 2：#ffffff
• 渐变类型：径向
• 径向：顶部
• 起始位置：36%
• 结束位置：26%

间距

转到设计选项卡，然后添加一些自定义的顶部和底部填充。

• 顶部填充：1vw
• 底部填充：1vw

溢出

在这篇文章的后面，我们将讨论该部分的高度。 为了确保没有超出部分容器的内容，我们将隐藏可见性设置中的溢出。

• 水平溢出：隐藏
• 垂直溢出：隐藏

添加第 1 行

列结构

完成部分设置后，您可以继续使用以下列结构将第一行添加到该部分：

将文本模块添加到行

添加 H2 内容

将新的文本模块添加到行的列并输入您选择的一些 H2 内容。

H2 文本设置

转到设计选项卡并相应地更改 H2 文本设置：

• 标题 2 字体：蒙特塞拉特
• 标题 2 字体粗细：半粗体
• 标题 2 文本对齐：居中
• 标题 2 文本颜色：#ffffff
• 标题 2 文字大小：2vw（桌面）、5vw（平板电脑）、6vw（手机）
• 标题 2 字母间距：-2px

添加第 2 行

列结构

继续使用以下列结构添加第二行：

间距

在不添加任何模块的情况下，打开行设置并在不同的屏幕尺寸上添加一些自定义的顶部和底部填充。

• 顶部填充：2vw（桌面）、4vw（平板电脑）、5vw（手机）
• 底部填充：2vw（桌面）、4vw（平板电脑）、5vw（手机）

展示

为了确保所有列在较小的屏幕尺寸上彼此相邻显示，我们将向行的主要元素添加一行 CSS 代码。

display: flex;

将箭头文本模块添加到第 1 列

添加符号

我们将使用这一行来添加动画箭头。 将新的文本模块添加到行的第一列，并将“↓”符号添加到内容框中。

文字设置

移至设计选项卡并更改文本设置。

• 文本对齐：右
• 文字颜色：#ffa3ad
• 文字大小：4vw（桌面）、6vw（平板电脑）、8vw（手机）

间距

接下来在间距设置中添加一些自定义边距值。

• 最高利润率：-3vw
• 底边距：8vw

变换旋转

在变换设置中旋转模块。

• 左：45度

动画片

并使用以下设置添加自定义动画：

• 动画风格：幻灯片
• 动画方向：中心
• 动画延迟：1000ms

将箭头文本模块添加到第 2 列

添加符号

继续向第二列添加新行，并将“↓”符号添加到内容框中。

文字设置

转到设计选项卡并相应地更改文本设置：

• 文本对齐：居中
• 文字颜色：#ffa3ad
• 文字大小：4vw（桌面）、6vw（平板电脑）、8vw（手机）

间距

接下来添加一些自定义上边距。

• 最高利润率：1vw

动画片

并应用以下动画设置：

• 动画风格：幻灯片
• 动画方向：中心

将箭头文本模块添加到第 3 列

添加符号

转到第 3 列中的最后一个箭头文本模块。将“↓”箭头添加到内容框。

文字设置

转到设计选项卡并相应地更改文本设置：

• 文本对齐方式：左
• 文字颜色：#ffa3ad
• 文字大小：4vw（桌面）、6vw（平板电脑）、8vw（手机）

间距

接下来添加一些负上边距。

• 最高利润率：-3vw

变换旋转

在变换设置中旋转模块。

• 左：315度

动画片

并通过添加以下动画完成模块的设置：

• 动画风格：幻灯片
• 动画方向：中心
• 动画延迟：1000ms

添加第 3 行

列结构

完成第二行后，您可以继续使用以下列结构添加新行：

浆纱

在不添加任何模块的情况下，打开行设置并修改大小设置中的宽度和最大宽度值。

• 宽度：100%
• 最大宽度：100%

间距

接下来在不同的屏幕尺寸中添加一些自定义填充值。

• 顶部填充：2vw（桌面）、8vw（平板电脑）、6vw（手机）
• 底部填充：2vw（桌面）、8vw（平板电脑）、6vw（手机）
• 左填充：10vw（台式机），0vw（平板电脑和手机）
• 右填充：10vw（台式机），0vw（平板电脑和手机）

展示

将一行 CSS 代码添加到行的主要元素，以确保所有列在较小的屏幕尺寸上彼此相邻。

display: flex;

溢出

在本教程的最后一部分，我们将更改行的高度。 为此，我们需要通过在可见性设置中隐藏溢出来确保没有任何内容超出行容器。

• 水平溢出：隐藏
• 垂直溢出：隐藏

将数字文本模块添加到第 1 列

添加内容

是时候开始添加模块了！ 将新的文本模块添加到第一列并输入一个数字。

渐变背景

使用以下设置为模块添加渐变背景：

• 颜色 1：#ffa3ad
• 颜色 2：#ffcea3
• 梯度方向：122deg

文字设置

转到设计选项卡并相应地更改文本设置：

• 文字字体：蒙特塞拉特
• 文字字体粗细：超粗
• 文本对齐：居中
• 文字颜色：#ffffff
• 文字大小：2vw（桌面）、4vw（平板电脑）、8vw（手机）
• 文本行高：1em

间距

在不同的屏幕尺寸上添加一些顶部和底部填充。

• 顶部填充：1vw（桌面）、2vw（平板电脑）、3vw（手机）
• 底部填充：1vw（桌面）、2vw（平板电脑）、3vw（手机）

边界

并通过向边框设置中的每个角添加“20px”来完成模块的设置。

克隆编号文本模块两次并在剩余列中放置重复项

继续克隆第 1 列中的文本模块两次，并将重复项放置在该行的其余两列中。

更改号码

确保更改每个副本中的数字。

将 Blurb 模块添加到第 1 列

添加内容

第一列中我们需要的第二个模块是 Blurb 模块。 输入您选择的一些内容。

选择图标

继续选择一个图标。

背景颜色

并将背景颜色更改为白色。

• 背景颜色：#ffffff

图标设置

转到设计选项卡并相应地更改图标设置：

• 图标颜色：#ffcea3
• 图标位置：顶部
• 使用图标字体大小：是
• 图标字体大小：4vw（桌面）、5vw（平板电脑）、6vw（手机）

标题文字设置

也修改标题文本设置。

• 标题字体：蒙特塞拉特
• 标题字体粗细：粗体
• 标题文本对齐：居中
• 标题文字颜色：#000000
• 标题文字大小：1vw（桌面）、2vw（平板电脑）、4vw（手机）

正文设置

随着正文文本设置。

• 正文对齐方式：居中
• 正文大小：0.6vw（桌面）、1.3vw（平板电脑）、2vw（手机）
• 车身线高：2.5em

间距

我们还通过在不同的屏幕尺寸中添加以下自定义填充值来为我们的模块提供所需的形状：

• 顶部填充：3vw（桌面）、5vw（平板电脑）、7vw（手机）
• 底部填充：3vw（桌面）、5vw（平板电脑）、7vw（手机）
• 左填充：1vw
• 右填充：1vw

边界

接下来在边框设置中的每个角上添加“20px”。

盒子阴影

并通过添加一个微妙的框阴影来创建一点深度。

• 阴影颜色：rgba(0,0,0,0.07)

动画片

最后但并非最不重要的一点是，向模块添加动画。

• 动画风格：幻灯片
• 动画方向：中心
• 动画延迟：1000ms

克隆 Blurb 模块两次并在剩余列中放置重复项

完成第 1 列中的 Blurb 模块后，您可以将其克隆 3 次并将重复项放置在该行的其余两列中。

更改两个副本的内容

确保更改每个重复项的内容。

修改第 3 行大小设置

默认高度

现在，为了使悬停效果起作用，我们将打开最后一行的设置并转到大小设置。 在那里，我们将修改不同屏幕尺寸的高度。

• 高度：6vw（桌面）、18vw（平板电脑）、24vw（手机）

悬停高度

我们将在悬停时使高度恢复正常。

• 高度：自动

修改截面大小设置

默认高度

接下来打开部分设置并相应地更改高度：

• 高度：7vw（桌面）、15vw（平板电脑）、20vw（手机）

悬停高度

在悬停时恢复高度，你就完成了！

• 高度：自动

预览

现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何使用 Divi 的新尺寸选项创建 3 步模糊显示。 该示例的结果具有高度响应性，并允许您向页面添加额外的交互。 我们希望本教程也能激发您创建自己的替代 3 步设计。 如果您有任何问题或建议，请务必在下方评论区留言！

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品，请确保订阅我们的电子邮件时事通讯和 YouTube 频道，这样您将永远是第一批了解此免费内容并从中受益的人之一。