192
清徐做网站在今天的Divi教程中,我们将向您展示如何为您的网站创建精彩的章节。这些章节为您的访客提供指导。当他们进入一个页面的另一个部分时,它会显示他们。通常,章节是与一个特定的背景颜色结合使用,贯穿所有的章节。
如果你正在考虑在你的网站上使用章节,这篇文章可能是一个获得一些灵感的好地方。我们将向您展示四种风格的章节,您可以很容易地重新通过这篇文章。
在我们进入四个章节风格的实际方面之前,让我们看一看您可以从最终结果中得到什么。
订阅我们的YOUTUBE频道
首先,将两列行添加到您正在处理的页面中,并在“设计”选项卡中选择左行对齐。
向下滚动相同的选项卡,并确保您选择‘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’的最高边距。
第二个示例位于屏幕的右侧。再次,添加一个两列行,但选择右行对齐。
打开清徐做网站间隔子类别,并将‘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’的上限。
对于第三个示例,我们将使用具有以下第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’的底部填充。
对于最后一个例子,我们将再次使用正确的行对齐方式。
然后,打开间隔子类别,并将‘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便士’,你就完成了!
在清徐做网站文章中,我们向您展示了如何创造性地在您的网站上创建和样式章节。这些章节允许您在每一节使用相同的背景颜色的同时,在各节之间创建一个分区。如果您有问题或建议,请确保在下面的评论部分留下评论!
最新文章
2019.07.11
清徐网站设计:PHP和Java-下一个项目你应该使用哪一个?
2019.07.03
清徐网站设计:与Divi一起创造美丽的模糊背景
2019.07.03
清徐建站:如何将垂直滑块元素添加到Divi的滑块模块中
2019.07.03
清徐建站:如何处理电子商务或会员网站上的失败付款
2019.07.03
清徐网站制作:为网络专业人员创建业务计划的简单指南
2019.07.03
清徐网站建设:可视化表和图表插件的概述和评述
2019.05.27
清徐高端网站制作:divi插件突出显示:divi客户端安全
2019.05.27
清徐企业网站设计:为每个网站的建设重点设计3个重要领域
2019.05.27
清徐站点建设:如何用Divi重新创建颜色过滤器、效果和混合模式示例(第2部分)
2019.05.27
清徐企业网站制作:如何使用CSS偶数和奇数规则在WordPress中创建连接表
随机推荐
2019.05.27
清徐站点建设:如何用Divi重新创建颜色过滤器、效果和混合模式示例(第2部分)
2019.07.03
清徐网站设计:与Divi一起创造美丽的模糊背景
2019.07.03
清徐建站:如何将垂直滑块元素添加到Divi的滑块模块中
2019.05.25
清徐高端网站建设:用Divi创建5个编辑风格节布局示例
2019.05.27
清徐企业网站设计:为每个网站的建设重点设计3个重要领域
2019.05.27
清徐高端网站开发:如何查找WordPress页面ID和POST ID(以及如何处理它们)
2019.07.03
清徐网站制作:为网络专业人员创建业务计划的简单指南
2019.05.27
清徐企业网站制作:如何使用CSS偶数和奇数规则在WordPress中创建连接表
2019.05.25
清徐网站开发:如何判断网站使用的是哪个WordPress主题
2019.05.25
清徐做网站:如何使用Divi的新设计选项创建章节