如何使用 Divi 的新设计选项创建章节章节

在今天的 Divi 教程中，我们将向您展示如何为您的网站创建令人惊叹的章节章节。 这些章节可作为访问者的指南。 当他们进入页面的另一部分时，它会显示出来。 通常，章节在所有章节中都与一种特定的背景颜色结合使用。

如果您正在考虑在您的网站上使用章节章节，这篇文章可能是一个获得灵感的好地方。 我们将向您展示 4 种风格的章节章节，您可以按照这篇文章轻松地重新创建这些章节。

结果

在我们进入四节章节样式的实践方面之前，让我们先看看您对最终结果的期望。

第 1 节章节样式

第 2 节章节样式

第 3 节章节样式

第 4 节章节样式

如何使用 Divi 的新设计选项创建章节章节

订阅我们的 YouTube 频道

第 1 节章节样式

行选项

首先向您正在处理的页面添加一个两列的行，然后在“设计”选项卡中选择左行对齐方式。

向下滚动相同的选项卡并确保为顶部、右侧、底部和左侧填充选择“0px”。 我们这样做的原因是使行尽可能小，这样它就不会在该部分占据太多位置。

分频器模块

在我们所有的例子中，我们将只使用两列之一（取决于行对齐）。 如果您将章节放在页面的左侧，请选择左栏。 然后，添加一个分隔器模块并启用“内容”选项卡中的“显示分隔器”选项。

转到“设计”选项卡并使用“#000000”作为分隔线颜色。

然后，打开样式子类别并选择“虚线”作为分隔线样式和“顶部”作为分隔线位置。

接下来，确保以下设置适用于 Sizing 子类别：

• 分隔线重量：3px
• 高度：23px
• 宽度：62%
• 模块对齐：左

第一个文本模块

添加分隔线模块后，就该在其正下方添加第一个文本模块了。 选择章节号后，使用如下渐变背景：

• 第一种颜色：rgba(96,150,193,0.16)
• 第二种颜色：rgba(255,255,255,0)
• 渐变类型：径向
• 径向：中心
• 起始位置：51%
• 结束位置：51%

然后，转到“设计”选项卡并对“文本”子类别进行以下更改：

• 文字字体：快乐猴子
• 文本字体大小：53（桌面和平板电脑），25（手机）
• 文字颜色：#000000
• 文本行高：1em
• 文字方向：居中

打开 Sizing 子类别，选择宽度为“40%”并选择中心模块对齐。

这个文本模块需要的最后一件事是以下自定义边距和填充：

• 上边距：-40px
• 顶部填充：40px
• 右填充：50px
• 底部填充：40px
• 左填充：50px

第二个文本模块

添加另一个具有以下文本子类别设置的文本模块：

• 文字字体：Arimo
• 文字字体大小：19px
• 文字颜色：#000000
• 文本行高：1em
• 文字方向：居中

向下滚动相同的选项卡，使用“97%”的宽度并启用中心模块对齐选项。

最后，还要添加“-15px”的顶部边距。

第三个文本模块

该部分章节的最后一个文本模块具有以下文本子类别设置：

• 文字字体：Arimo
• 文本字体样式：粗体
• 文字字体大小：19px
• 文字颜色：#000000
• 文本行高：1em
• 文字方向：居中

在 Sizing 子类别中，使用“99%”的宽度并选择中心模块对齐。

在本章中，您需要做的最后一件事是添加“-20px”的顶部边距。

第 2 节章节样式

行选项

第二个示例位于屏幕右侧。 再一次，添加一个两列的行，但选择正确的行对齐方式。

打开间距子类别并将“0px”分配给顶部、右侧、底部和左侧填充。

分频器模块

在右侧的列中添加一个分隔器模块并启用“显示分隔器”选项。

我们将为分隔线使用以下渐变背景：

• 第一种颜色：rgba(132,132,132,0.61)
• 第二种颜色：rgba(224,43,32,0.86)
• 渐变类型：线性
• 梯度方向：180度
• 起始位置：43%
• 结束位置：100%

移至“设计”选项卡并选择“rgba(0,0,0,0.26)”作为分隔线颜色。

接下来，使用“Solid”作为分隔线样式，使用“Top”作为分隔线位置。

然后，打开 Sizing 子类别并应用以下设置：

• 分隔线重量：3px
• 高度：11px
• 宽度：68%
• 模块对齐：右

第一个文本模块

第一个文本模块具有以下文本子类别设置：

• 文字字体：康塔塔一号
• 文字字体大小：100px
• 文字颜色：#000000
• 文本行高：1.7em
• 文字方向：右

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

• 上边距：-95px
• 顶部填充：40px
• 右填充：50px
• 底部填充：40px
• 左填充：50px

第二个文本模块

添加另一个文本模块并改用以下文本子类别设置：

• 文字字体：Arimo
• 文字字体大小：20px
• 文字颜色：#000000
• 文本行高：1em
• 文字方向：居中

接下来，添加“-50px”的顶部边距。

第三个文本模块

此示例的第三个也是最后一个文本模块具有以下文本子类别设置：

• 文字字体：龙虾二
• 文字字体大小：43px
• 文字颜色：#000000
• 文本行高：1em
• 文字方向：居中

最后，添加“-30px”的顶部边距。

第 3 节章节样式

行选项

对于第三个示例，我们将使用具有以下第 1 列渐变背景的两列行：

• 第一种颜色：#edf000
• 第二种颜色：rgba(255,255,255,0)
• 第 1 列渐变类型：线性
• 第 1 列梯度方向：139deg
• 第 1 列起始位置：11%
• 第 1 列结束位置：36%

转到“设计”选项卡并选择左行对齐方式。

再一次，我们将使用“0px”作为顶部、右侧、底部和左侧边距。

分频器模块

现在，向左列添加一个分隔器模块并启用“显示分隔器”选项。

打开背景子类别并使用以下渐变背景：

• 第一种颜色：#4b61af
• 第二种颜色：rgba(255,255,255,0)
• 渐变类型：线性
• 渐变方向：161度
• 起始位置：18%
• 结束位置：38%

打开“设计”选项卡并选择“#000000”作为分隔线颜色。

在样式子类别中，使用“实体”作为分隔线样式，使用“顶部”作为分隔线位置。

然后，确保以下设置适用于 Sizing 子类别：

• 分隔线重量：6px
• 高度：100px
• 宽度：70%
• 模块对齐：左

第一个文本模块

继续在分隔模块正下方添加第一个文本模块并选择以下渐变背景：

• 第一种颜色：rgba(131,0,233,0.58)
• 第二种颜色：rgba(255,255,255,0)
• 渐变类型：线性
• 梯度方向：151deg
• 起始位置：20%
• 结束位置：40%

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

• 文字字体：Poiret One
• 文本字体样式：粗体
• 文字字体大小：69px
• 文字颜色：#000000
• 文本行高：1.7em
• 文字方向：居中

打开 Sizing 子类别，使用“70%”的宽度并选择左侧的 Module Alignment。

最后，使用以下自定义边距和填充：

• 上边距：124px
• 顶部填充：60px
• 底部填充：150px
• 左填充：50px

第二个文本模块

继续添加另一个具有以下文本子类别设置的文本模块：

• 文字字体：Arimo
• 文字字体大小：20px
• 文字颜色：#000000
• 文本行高：1em
• 文字方向：居中

打开 Sizing 子类别，选择“80%”的宽度，然后选择左侧的 Module Alignment。

最后，添加“-150px”的顶部边距。

第三个文本模块

将最后一个文本模块添加到第一列，并确保应用以下文本子类别设置：

• 文字字体：Arimo
• 文本字体样式：粗体
• 文字字体大小：20px
• 文字颜色：#000000
• 文本行高：1em
• 文字方向：居中

打开 Sizing 子类别，使用“80%”的宽度并选择左侧的 Module Alignment。

最后，选择“-20px”的顶部边距和“50px”的底部填充。

第 4 节章节样式

行选项

对于最后一个示例，我们将再次使用正确的行对齐方式。

然后，打开 Spacing 子类别并将“0px”分配给顶部、右侧、底部和左侧的填充。

第一个文本模块

最后一个示例不包含分隔线模块，因此继续向左列添加文本模块。 完成后，选择以下渐变背景：

• 第一种颜色：rgba(255,255,255,0)
• 第二种颜色：#92d84b
• 渐变类型：线性
• 梯度方向：55度
• 起始位置：25%
• 结束位置：100%

然后，转到“设计”选项卡并确保应用以下文本子类别设置：

• 文字字体：康塔塔一号
• 文字字体大小：220（桌面和平板电脑），100px（手机）
• 文字颜色：#f2f2f2（与章节背景色匹配）
• 文本行高：1.7em
• 文字方向：右

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

最后，使用以下自定义填充：

• 顶部：60px
• 右：50px
• 底部：60px
• 左：50px

第二个文本模块

添加另一个文本模块并在文本子类别中使用以下设置：

• 文字字体：Arimo
• 文字字体大小：20px
• 文字颜色：#000000
• 文本行高：1em
• 文字方向：右

打开 Sizing 子类别，选择宽度为“39%”并选择中心模块对齐。

最后，将“-130px”添加到顶部边距。

第三个文本模块

本章示例的最后一个文本模块具有以下文本子类别设置：

• 文字字体：Dancing Script
• 文字字体大小：45px
• 文字颜色：#000000
• 文本行高：1em
• 文字方向：右

打开 Sizing 子类别，选择宽度为“50%”并选择中心模块对齐。

最后但并非最不重要的一点是，选择“-30px”的顶部填充就完成了！

最后的想法

在这篇文章中，我们向您展示了如何在您的网站上创造性地创建和设计章节章节。 这些章节部分允许您在部分之间创建分区，同时为每个部分使用相同的背景颜色。 如果您有任何问题或建议； 确保您在下面的评论部分发表评论！

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

特色图片由 Kwok Design/shutterstock.com 提供