如何使用 Divi 的 Blurb 模块创建时间线

在这篇文章中，我们将向您展示如何使用 Divi 的 Blurb 模块轻松创建简单而优雅的时间线。 我们将结合模块和行提供的不同选项来实现您可以在下面查看的结果。 我们将分享的示例仅基于内置的 Divi 选项，这意味着您无需添加任何额外的 CSS 代码！ 我们还确保它在桌面和移动设备上看起来都不错。

结果

时间线的外观是通过两个设计元素实现的； 穿过所有三个 Blurb 模块和数字的线。 桌面版本如下所示：

移动版本如下所示：

让我们开始吧！

如何使用 Divi 的 Blurb 模块创建时间线

订阅我们的 YouTube 频道

添加标准部分

部分背景颜色

首先添加一个新的标准部分并使用“rgba(0,0,0,0.12)”作为其背景颜色。

部分填充

转到“设计”选项卡并使用“300px”的顶部填充。

添加三列行（时间轴）

列背景

创建该部分后，向其添加一个三列行。 在该行的“内容”选项卡中，使用“#e09900”作为第 1 列的背景色、“#0c71c3”作为第 2 列的背景色和“#8300e9”作为第 3 列的背景色。

浆纱

转到“设计”选项卡，并为“尺寸”子类别使用以下设置：

• 使这一行全宽：是
• 使用自定义装订线宽度：是
• 天沟宽度：1
• 均衡柱高：是

自定义边距和填充

接下来，将以下自定义填充和自定义边距添加到该行：

• 顶部填充：1px
• 底部填充：0px
• 下边距：-200px

并将“3px”添加到每列的顶部和底部填充。

在平板电脑和手机上禁用

最后，在平板电脑和手机上禁用该行。

添加另一个三列行（模糊模块）

列渐变背景

创建第一个三列行后，您可以继续在其正下方创建第二个行（它们共享相同的部分）。 每一列都需要具有相同设置但具有不同第一种颜色的渐变背景：

• 第一种颜色：#e09900（第 1 列）、#0c71c3（第 2 列）、#8300e9（第 3 列）
• 第二种颜色：rgba(255, 255, 255, 0)
• 渐变类型：线性
• 梯度方向：180度
• 起始位置：73%
• 结束位置：92%

使行全宽

然后，转到“设计”选项卡并启用“使此行全宽”选项。

行自定义填充

打开间距子类别并为行使用以下自定义填充和自定义边距：

• 顶部填充：0px
• 右填充：60px
• 底部填充：100px
• 左填充：60px
• 上边距：-100px

还将“5px”添加到每列的顶部填充。

模糊模块

完成行设置后，您可以向刚创建的行的第一列添加一个 Blurb 模块。 在内容选项卡的图像和图标子类别中，启用“使用图标”选项并选择一个图标。

向下滚动相同的选项卡并使用“#f4f4f4”作为背景颜色。

转到“设计”选项卡并对“图像和图标”子类别进行以下调整：

• 图标颜色：#e09900
• 图像/图标放置：左
• 使用图标字体大小：是
• 图标字体大小：50px

在文本子类别中，确保启用左侧文本方向。

标题文本子类别的选项如下：

• 标题字体：Crete Round
• 标题文本对齐方式：左
• 标题字体大小：32px
• 标题行高度：1em

然后，打开正文子类别并使用以下设置：

• 正文对齐方式：左
• 正文字体大小：12px
• 车身线高：1.7em

我们还将使用具有以下设置的边框：

• 使用边框：是
• 边框颜色：#000000
• 边框宽度：2px
• 边框样式：虚线

接下来，打开 Sizing 子类别并使用“279px”作为内容宽度和“100%”作为宽度。

最后，将“30px”添加到顶部、右侧、底部和左侧填充。

文本模块

添加和修改 Blurb 模块后，继续并在其正下方添加一个文本模块。 文本模块也需要渐变背景：

• 第一种颜色：#e09900
• 第二种颜色：rgba(255, 255, 255, 0)
• 渐变类型：径向
• 径向：中心
• 起始位置：20%
• 结束位置：24%

转到“设计”选项卡并为“文本”子类别使用以下设置：

• 文字字体大小：21px
• 文字颜色：#FFFFFF
• 文本行高：1.7em
• 文字方向：居中

打开 Sizing 子类别，使用“48%”的宽度并选择正确的 Module Alignment。

最后，使用“-100px”的顶部边距并将“50px”添加到顶部和底部填充。

克隆模糊和文本模块

完成第一列后，您可以克隆两个模块并将它们放在其他两列中。 您唯一需要更改的是第二列的“#0c71c3”和最后一列的“#8300e9”的文本模块的模糊图标、模糊颜色和第一个渐变颜色。

在平板电脑和手机上禁用

完成第二行后，请确保也为手机和平板电脑禁用它。

克隆三列行（平板电脑和手机）

平板电脑和手机上的时间线版本略有不同。 使用您在本文前一部分中创建的简介克隆该行，然后按照后续步骤使其适合手机和平板电脑。

添加行渐变背景

平板电脑和手机上的行将需要以下渐变背景：

• 第一种颜色：rgba(0,0,0,0.7)
• 第二种颜色：rgba(255, 255, 255, 0)
• 渐变类型：线性
• 梯度方向：90度
• 起始位置：1%
• 结束位置：0%

行填充

删除桌面版本中使用的所有自定义填充和边距，并将“100px”添加到顶部填充。

在桌面上禁用

最后，不要在手机和平​​板电脑上禁用该行，而是在桌面上禁用它。

结果

按照帖子中的所有步骤操作后，您应该能够在桌面上获得以下结果：

平板电脑和手机上的结果如下：

最后的想法

在这篇文章中，我们向您展示了如何只使用内置的 Divi 选项来创建 Blurb 模块的简单时间线。 有助于将 Blurb 模块识别为时间线的两个因素是连接所有三个 Blurb 模块和数字的线。 如果您有任何问题或建议； 确保您在下面的评论部分发表评论！

请务必订阅我们的电子邮件通讯和 YouTube 频道，这样您就不会错过重大公告、有用提示或 Divi 免费赠品！