下载使用 Divi 的转换选项制作的免费时间线部分

在构建内容时，创建时间线是让信息对访问者保持趣味性和吸引力的好方法。 它还可以帮助他们更快地浏览和处理他们阅读的信息。 当您使用漂亮的设计时，它也会提升页面的整体外观和感觉。 在这篇文章中，我们将向您展示如何使用 Divi 的转换选项创建令人惊叹的时间线部分。 我们将重新创建的设计将在较小的屏幕尺寸上保持响应。

让我们开始吧！

预览

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

桌面

移动的

免费下载时间线部分布局

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

下载文件

免费下载

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

下载

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

让我们开始重建吧！

订阅我们的 YouTube 频道

添加新部分

间距

创建一个新页面或打开一个现有页面并向其中添加一个常规部分。 打开部分设置，转到间距设置并添加一些自定义的顶部和底部填充。

• 顶部填充：12vw
• 底部填充：0vw

添加第 1 行

列结构

继续使用以下列结构向该部分添加新行：

浆纱

尚未添加任何模块，打开行设置。 转到设计选项卡中的大小设置，并允许行占据屏幕的整个宽度。

• 使用自定义装订线宽度：是
• 天沟宽度：1
• 宽度：100%
• 最大宽度：100%

能见度

我们将使用这一行在接下来的步骤中添加插图。 不过，我们只需要在桌面上使用该插图。 这就是我们将在平板电脑和手机上隐藏整行的原因。

添加图像模块

上传插图

正如在这篇文章的上一步中提到的，我们需要这一行的唯一原因是添加时间线插图。 您可以在本文开头下载的文件夹中找到它。 找到它后，将其上传到新的图像模块。

浆纱

为了确保所有屏幕尺寸的所有内容都保持响应，我们将在图像模块的尺寸设置中启用“强制全宽”选项。

• 强制全角：是

添加第 2 行

列结构

继续向该部分添加第二行，使用以下列结构：

浆纱

还没有添加任何模块，打开行设置并允许行占据屏幕的整个宽度。

• 使用自定义装订线宽度：是
• 天沟宽度：1
• 宽度：100%
• 最大宽度：100%

间距

然后，转到间距设置。 在这里，我们希望通过删除所有自定义顶部和底部填充来限制行（在桌面上）占用的空间。 我们在较小的屏幕尺寸上保留了一些顶部和底部填充。

• 顶部填充：0px（桌面），15vw（平板电脑和手机）
• 底部填充：0px（桌面），15vw（平板电脑和手机）

将 Blurb 模块添加到第 1 列

添加内容

是时候开始添加模块了！ 将 Blurb 模块添加到第 1 列。输入您选择的一些内容。

选择图标

继续选择您选择的图标。

渐变背景

还要添加渐变背景。

• 颜色 1：#a5c4ff
• 颜色 2：#ffffff
• 起始位置：40%
• 结束位置：40%

图标设置

然后，转到设计选项卡并更改图标设置。

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

标题文字设置

转到标题文本设置并相应地修改选项：

• 标题字体：Didact Gothic
• 标题字体粗细：粗体
• 标题文本对齐：居中
• 标题文字大小：1.1vw（桌面）、2.7vw（平板电脑）、4vw（手机）
• 标题行高度：2.8em

正文设置

对正文设置做同样的事情。

• 正文字体：Open Sans
• 正文对齐方式：居中
• 正文大小：0.7vw（桌面）、1.5vw（平板电脑）、2.1vw（手机）
• 车身线高：2em

间距

我们还添加了一些自定义边距和填充值，我们将根据不同的屏幕尺寸进行自定义。

• 左边距：3vw
• 右边距：3vw
• 下边距：5vw（平板电脑），7vw（手机）
• 顶部填充：2vw（台式机），6vw（平板电脑和手机）
• 底部填充：2vw（台式机），6vw（平板电脑和手机）
• 左填充：3vw（台式机）、9vw（平板电脑和手机）
• 右填充：3vw（台式机）、9vw（平板电脑和手机）

边界

移至边框设置并为每个角添加“20px”。

盒子阴影

最后但并非最不重要的一点是，通过向 Blurb 模块添加微妙的框阴影在页面上创建一些深度。

• 框阴影模糊强度：80px
• 阴影颜色：rgba(0,0,0,0.1)

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

完成创建和自定义 Blurb 模块后，您可以将其克隆 3 次。 将重复项放在行的其余列中。

更改副本 #1 的渐变背景

打开第一个副本（第 2 列中的模糊模块）并修改渐变背景的第一种颜色。

• 颜色 1：#ffa5ae

更改副本 #2 的渐变背景

对第 3 列中的 Blurb 模块执行相同的操作。

• 颜色 1：#f7e3a0

更改副本 #3 的渐变背景

并修改最后一个 Blurb Module 的渐变背景。

• 颜色 1：#caa5ff

将变换设置添加到 Blurb 模块

将 Transform Translate 添加到 Blurb 模块 #1

现在我们拥有了所有需要的设计元素，我们可以开始改变它们的位置了！ 为此，我们将使用转换转换选项。 打开第 1 列中的 Blurb 模块并相应地修改值：

• 底部：2vw（台式机），0vw（平板电脑和手机）
• 右：-106vw（台式机），0vw（平板电脑和手机）

将 Transform Translate 添加到 Blurb 模块 #2

转到第二个 Blurb 模块并相应地更改变换平移值：

• 底部：16.6vw（底部），0vw（平板电脑和手机）
• 右：-78vw（右），0vw（平板电脑和手机）

将 Transform Translate 添加到 Blurb 模块 #3

接下来打开第 3 列中的 Blurb 模块，并使用以下变换平移值：

• 底部：17vw（台式机），0vw（平板电脑和手机）
• 右：-46vw（台式机），0vw（平板电脑和手机）

将 Transform Translate 添加到 Blurb 模块 #4

对最后一个 Blurb 模块执行相同的操作，使用以下值：

• 底部：-66vw（台式机），0vw（平板电脑和手机）
• 右：-24vw（台式机），0vw（平板电脑和手机）

将负下边距添加到第 2 行

使用变换平移选项不会删除最初由行中的 Blurb 模块占用的空间。 为了摆脱这个空间，我们可以在行中添加一些负底边距，我们就完成了！

• 下边距：-15vw（台式机），0vw（平板电脑和手机）

预览

现在我们已经完成了所有步骤，让我们最后看看结果。

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何使用 Divi 的新变换选项创建漂亮的时间线部分。 在教程开始时，您可以免费下载 JSON 文件和插图！ 这应该可以帮助您立即开始。 如果您有任何问题或建议，请务必在下面的评论部分留言。