如何在 Divi 中创建垂直粘性时间线布局

当用户向下滚动页面时，创建垂直粘性时间线对于按年和/或月对内容进行分类非常有用。 粘性日期元素在内容旁边保持固定，以方便用户提升用户体验。

在本教程中，我们将向您展示如何在 Divi 中创建完整的垂直粘性时间线布局。 此设计的关键是 (1) 为您的列提供自定义宽度，以便日期元素不会在移动设备上占用过多的水平空间，以及 (2) 使年和月具有粘性，并对该部分具有粘性限制（年份）和行（月份）。

尽管此布局具有多方面的应用程序，但我们将构建一个时间线布局来展示按月和年分类的照片画廊。

让我们开始吧！

抢先看

这是我们将在本教程中构建的设计的快速浏览。

免费下载布局

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

下载文件

免费下载

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

下载

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

要将部分布局导入您的 Divi 库，请导航到 Divi 库。

单击导入按钮。

在可移植性弹出窗口中，选择导入选项卡并从您的计算机中选择下载文件。

然后点击导入按钮。

完成后，分区布局将在 Divi Builder 中可用。

让我们进入教程，好吗？

你需要什么开始

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

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

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

第 1 部分：构建棒标题

我们要设计的第一个元素是粘性标题，它将在滚动时保持固定在页面顶部。

添加行

首先，向该部分添加五分之二五分之三的列布局。

左标题文本

在左栏中，我们将添加位于页面左侧的时间线的标题。 为此，请将文本模块添加到左列。

然后将文本“时间轴”添加到文本模块的正文中。

在设计选项卡下，更新以下文本样式：

• 文字字体：氧气
• 文字字体粗细：粗体
• 文字字体样式：TT
• 文字文字颜色：#666666
• 文字大小：50px（桌面）、30px（平板电脑）、18px（手机）
• 文本行高：1em
• 文本对齐：右

然后也更新填充：

• 内边距：5px 顶部

右标题文本

要为页面右侧的图库内容创建标题，请复制左栏中的文本模块并将其粘贴到右栏中。

然后打开重复的文本模块设置并更新以下内容：

• 文字文字颜色：#c22969
• 文本对齐方式：左（桌面），左（平板）

行设置

为了给我们在移动设备上需要的房间，我们需要按如下方式更新行设置：

• 天沟宽度：1
• 宽度：100%
• 最大宽度：1280px
• 填充：顶部 10 像素，底部 10 像素

在高级选项卡下，将以下自定义 CSS 添加到平板电脑上的主元素：

display:flex;
flex-wrap:nowrap;

左栏设置

因为我们使用的行间距宽度为 1，所以列之间没有间距。 要添加足够的间距，请打开第 1 列的设置并按如下方式更新填充：

• 填充（桌面）：顶部 10 像素，底部 10 像素，左侧 20 像素，右侧 20 像素
• 填充（平板电脑）：底部 10 像素，左侧 10 像素，右侧 10 像素

接下来，我们要覆盖平板电脑和手机上的默认左列宽度，使其为行宽的 30%。 这将匹配我们要添加到下面时间线中的列的列宽。

为此，请打开左列 (column1) 的设置并将以下 CSS 添加到平板电脑上的主要元素：

width: 30% !important;

对于右列，我们要添加与第 1 列相同的填充。我们将向列添加左边框作为分隔线，如下所示：

• 填充（桌面）：顶部 10 像素，底部 10 像素，左侧 20 像素，右侧 20 像素
• 填充（平板电脑）：底部 10 像素，左侧 10 像素，右侧 10 像素
• 左边框宽度：2px
• 左边框颜色：#333333

我们还希望右列的宽度为行宽度的 70%。 要更新列宽，请打开第 2 列的设置并将以下 CSS 添加到平板电脑上的主要元素：

width: 70% !important;

部分设置

要完成标题设计，请打开部分设置，并更新背景颜色：

• 背景颜色：#222222

然后更新部分填充：

• 填充：0px 顶部，0px 底部

要使该部分具有粘性，请转到“高级”选项卡并更新以下内容：

• 粘滞位置：粘在顶部

第 2 部分：创建粘性时间线

设计的下一部分是我们创建布局的粘性时间线部分的地方。 这里的关键是设计第一个部分、行和模块，所有元素都到位。 然后我们可以根据需要复制每个部分或行。

添加部分

首先，在我们刚刚完成的标题部分下添加一个新的常规部分。

在我们开始添加行和内容之前，打开部分设置并更新以下内容：

• 填充：0px 顶部，0px 底部

添加行、行样式和列结构

接下来，为该部分创建五分之一五分之三的列行。

要快速启动行的设计，请复制上面标题部分中的行样式并将其粘贴到新行中。

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

• 填充：顶部 50 像素，底部 50 像素

然后将自定义 CSS 添加到平板电脑上的主元素，如下所示：

display:flex;
flex-wrap:nowrap;

创造粘性年

时间线的第一个粘性日期元素将是年份。 这个“年份”文本元素将粘在滚动部分的顶部。

要创建年份文本元素，请将新文本模块添加到第 1 列。

然后在正文中添加文本“2020”。

在设计选项卡下，更新文本样式如下：

• 文字字体：氧气
• 文字字体粗细：粗体
• 文字 文字大小：40px（桌面）、24px（平板电脑）、18px（手机）
• 文字对齐：右

要使年份保持在该部分的顶部，请更新以下内容：

• 粘滞位置：粘在顶部
• 粘性顶部偏移：50px
• 底部粘性限制：部分

创建粘性月份

要创建粘性月份文本，请复制包含粘性年份的文本模块并将其粘贴到第 2 列中。

然后打开第 2 列中新文本模块的设置，并使用“dec”（月份缩写）更新文本正文。

月份文本需要粘在行的顶部而不是部分，因此更新粘滞限制如下：

• 底部粘性限制：行

添加图库内容

在最右侧的列（第 3 列）中，我们将添加与特定月/年相关的内容。 在这种情况下，我们将添加一个画廊模块来显示图像画廊。

要创建图库，请在第 3 列中添加图库模块。

然后将至少 6 张图像添加到图库（或您想要的任意数量）并更新以下内容：

• 图片数量：6
• 显示标题和说明：否
• 如何分页：否

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

• 填充：左 3%，右 3%

要在图库项之间创建一些自定义间距，请将以下自定义 CSS 添加到图库项 CSS：

padding: 0 1% 2% 1%;

更新列宽和间距

就像我们对标题部分中的列所做的一样，我们将为我们的列提供自定义间距和宽度（一个移动设备），以便它们与标题对齐并在平板电脑和手机上看起来很好。

第 1 栏

打开第 1 列的设置并更新以下内容：

• 填充：左 1%，右 2%

在高级选项卡下，将以下自定义 CSS 添加到平板电脑上的主元素：

width: 15% !important;

然后打开第 2 列的设置并添加相同的填充和 CSS，如下所示：

• 填充：左 1%，右 2%

主要元素 CSS（平板电脑）：

width: 15% !important;

然后打开第 3 列的设置并更新填充和主元素 CSS，如下所示：

• 填充：左 1%，右 2%

主要元素 CSS（平板电脑）：

width: 70% !important;

复制额外月份的行

第一行完成后，我们可以将该行复制几个月。

复制该行。

在重复行中，取出年份的文本。 我们每个部分只需要一年，因为年份将粘在该部分的顶部和底部。

然后打开月份的文本并用新月份更新月份缩写。

复制额外年份的部分

以同样的方式，我们将行复制几个月，我们可以复制整个部分额外的年份。

继续复制我们刚刚为 2020 内容创建的部分。

在重复部分中，使用年份“2019”更新第 1 行第 1 列中的年份文本。

您可以继续此过程，根据时间线布局的需要构建额外的年份和月份。

最后结果

查看最终结果。

最后的想法

此时间线布局的设计工作首当其冲是通过提供文本大小和列宽移动特定样式来使其响应。 但是，使用 Divi 的内置选项，日期元素的粘性定位非常容易。 希望这对未来的项目有用。 我可以看到这有助于展示关于页面甚至资源页面、下载页面或产品更新的历史时间线。

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

干杯!