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

2019.05.25 清徐做网站

192

清徐做网站在今天的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便士’,你就完成了!

 

最后思想

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

 


最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP