清徐做网站：如何使用Divi的新设计选项创建章节

清徐做网站在今天的Divi教程中，我们将向您展示如何为您的网站创建精彩的章节。这些章节为您的访客提供指导。当他们进入一个页面的另一个部分时，它会显示他们。通常，章节是与一个特定的背景颜色结合使用，贯穿所有的章节。

如果你正在考虑在你的网站上使用章节，这篇文章可能是一个获得一些灵感的好地方。我们将向您展示四种风格的章节，您可以很容易地重新通过这篇文章。

结果

在我们进入四个章节风格的实际方面之前，让我们看一看您可以从最终结果中得到什么。

章节风格#1

章节风格#2

章节风格#3

章节风格#4

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

订阅我们的YOUTUBE频道

章节风格#1

行选项

首先，将两列行添加到您正在处理的页面中，并在“设计”选项卡中选择左行对齐。

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

分频器模块

在我们的所有示例中，我们将只使用这两列中的一列(取决于行对齐方式)。如果要将章节放在页面的左侧，请选择左侧列。然后，在Content选项卡中添加一个DividerModule并启用‘ShowDivider’选项。

移到“设计”选项卡，使用“#000000”作为分隔颜色。

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

接下来，确保以下设置适用于“大小”子类别：

· 隔板重量：3 px

· 高度：23 px

· 宽度：62%

· 模块对齐：左

第一文本模块

一旦您添加了Divider模块，就可以在其下面添加第一个文本模块了。选择章节编号后，使用以下渐变背景：

· 第一颜色：RGBA(96，150，193，0.16)

· 第二颜色：RGBA(255，255，255，0)

· 梯度类型：径向

· 径向：中心

· 起始位置：51%

· 期末职位：51%

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

· 文字字体：快乐猴子

· 文本字体大小：53(桌面和平板电脑)，25(电话)

· 文本颜色：#000000

· 文本行高：1em

· 文本定位：中心

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

此文本模块最不需要的是以下自定义边距和填充：

· 最高保证金：-40 px

· 顶部填充物：40 px

· 右垫：50 px

· 底部填充物：40 px

· 左填充物：50 px

第二文本模块

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

· 文本字体：Arimo

· 文本字体大小：19 px

· 文本颜色：#000000

· 文本行高：1em

· 文本定位：中心

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

最后，添加一个‘-15 px’的顶部边距。

第三文本模块

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

· 文本字体：Arimo

· 文本字体样式：粗体

· 文本字体大小：19 px

· 文本颜色：#000000

· 文本行高：1em

· 文本定位：中心

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

在本章中，您需要做的最后一件事是添加一个‘-20 px’的最高边距。

章节风格#2

行选项

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

打开清徐做网站间隔子类别，并将‘0px’分配到顶部、右侧、底部和左侧填充。

分频器模块

在右边的列中添加一个Divider模块，并启用‘ShowDivider’选项。

我们将使用下面的渐变背景作为除法器：

· 第一颜色：RGBA(132，132，132，0.61)

· 第二颜色：RGBA(224，43，32，0.86)

· 梯度型：线性

· 梯度方向：180度

· 起始位置：43%

· 结束位置：100%

移至“设计”选项卡，选择“RGBA(0，0，0，0.26)”作为分隔颜色。

接下来，使用“实心”作为分区样式，使用“顶部”作为分区位置。

然后，打开“大小”子类别，并应用以下设置：

· 隔板重量：3 px

· 身高：11 px

· 宽度：68%

· 模块对齐：右

第一文本模块

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

· 文本字体：Cantata One

· 文本字体大小：100 px

· 文本颜色：#000000

· 文本线高度：1.7em

· 文本取向：右

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

· 最高保证金：-95%

· 顶部填充物：40 px

· 右垫：50 px

· 底部填充物：40 px

· 左填充物：50 px

第二文本模块

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

· 文本字体：Arimo

· 文本字体大小：20 px

· 文本颜色：#000000

· 文本行高：1em

· 文本定位：中心

接下来，添加‘-50 px’的上边框。

第三文本模块

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

· 文本字体：龙虾2号

· 文本字体大小：43 px

· 文本颜色：#000000

· 文本行高：1em

· 文本定位：中心

最后，添加‘-30 px’的上限。

章节风格#3

行选项

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

· 第一颜色：#edf 000

· 第二颜色：RGBA(255，255，255，0)

· 第1列梯度类型：线性

· 第1栏梯度方向：139度

· 第1栏起始位置：11%

· 第1栏结束位置：36%

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

再次，我们将使用‘0px’作为上，右，下和左边距。

分频器模块

现在，在左边的列中添加一个Divider模块，并启用‘ShowDivider’选项。

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

· 第一颜色：#4b61af

· 第二颜色：RGBA(255，255，255，0)

· 梯度型：线性

· 梯度方向：161度

· 起始位置：18%

· 期末职位：38%

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

清徐做网站在样式子类别中，使用“Solid”作为分隔样式，使用“top”作为分区位置。

然后，确保以下设置适用于“大小”子类别：

· 分压器重量：6PX

· 高度：100 px

· 宽度：70%

· 模块对齐：左

第一文本模块

继续添加第一个文本模块，就在Divider模块下面，并选择以下渐变背景：

· 第一颜色：RGBA(131，233，0.58)

· 第二颜色：RGBA(255，255，255，0)

· 梯度型：线性

· 梯度方向：151度

· 起始位置：20%

· 最后职位：40%

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

· 文本字体：PoiretOne

· 文本字体样式：粗体

· 文本字体大小：69 px

· 文本颜色：#000000

· 文本线高度：1.7em

· 文本定位：中心

打开“大小”子类别，使用“70%”的宽度并选择左模块对齐。

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

· 最高保证金：124 px

· 顶部填充物：60 px

· 底垫：150 px

· 左填充物：50 px

第二文本模块

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

· 文本字体：Arimo

· 文本字体大小：20 px

· 文本颜色：#000000

· 文本行高：1em

· 文本定位：中心

打开“大小”子类别，选择“80%”的宽度并选择左模块对齐。

最后，添加一个‘-150 px’的上边距。

第三文本模块

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

· 文本字体：Arimo

· 文本字体样式：粗体

· 文本字体大小：20 px

· 文本颜色：#000000

· 文本行高：1em

· 文本定位：中心

打开“大小”子类别，使用“80%”的宽度并选择左模块对齐。

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

章节风格#4

行选项

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

然后，打开间隔子类别，并将‘0px’分配到顶部、右侧、底部和左侧。

第一文本模块

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

· 第一颜色：RGBA(255，255，255，0)

· 第二颜色：#92d84b

· 梯度型：线性

· 梯度方向：55度

· 起始位置：25%

· 结束位置：100%

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

· 文本字体：Cantata One

· 文本字体大小：220(桌面和平板电脑)，100 px(电话)

· 文本颜色：#f2f2f2(与部分背景色匹配)

· 文本线高度：1.7em

· 文本取向：右

打开“大小”子类别，使用“82%”的宽度并选择正确的模块对齐方式。

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

· 顶部：60 px

· 右：50便士

· 底部：60 px

· 左：50 px

第二文本模块

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

· 文本字体：Arimo

· 文本字体大小：20 px

· 文本颜色：#000000

· 文本行高：1em

· 文本取向：右

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

最后，在上边框中添加‘-130 px’。

第三文本模块

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

· 文字字体：舞蹈剧本

· 文本字体大小：45 px

· 文本颜色：#000000

· 文本行高：1em

· 文本取向：右

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

最后但并非最不重要的是，选择一个顶部填充物‘-30便士’，你就完成了！

最后思想

在清徐做网站文章中，我们向您展示了如何创造性地在您的网站上创建和样式章节。这些章节允许您在每一节使用相同的背景颜色的同时，在各节之间创建一个分区。如果您有问题或建议，请确保在下面的评论部分留下评论！