吕梁公司站点制作：如何用Divi的Blurb模块创建时间线

2019.05.25 吕梁公司站点制作

181

在吕梁公司站点制作这篇文章中，我们将向您展示如何使用Divi的Blurb模块轻松地创建一个简单而优雅的时间线。我们将结合模块和行提供的不同选项来实现您可以在下面查看的结果。我们将共享的示例仅基于内置的divi选项，这意味着您不需要添加任何额外的CSS代码！我们还确保它在桌面和移动设备上看起来都很好。

结果

时间线的外观是通过两个设计元素实现的：跨越所有三个Blurb模块和数字的线。桌面版本如下所示：

 

移动版看起来是这样的：

 

我们开始吧!

如何用Divi的Blurb模块创建时间线

订阅我们的YOUTUBE频道

增加标准部分

剖面背景色

首先添加一个新的标准部分，并使用‘RGBA(0，0，0，0.12)’作为其背景色。

 

分段填充

转到“设计”选项卡，使用顶部的“300 px”填充。

 

加三列行(时间线)

列背景

创建该节后，向其中添加一个三列行。在该行的Content选项卡中，使用‘#e09900’作为第1列背景色，‘#0c71c3’作为第2列背景色，使用‘#8300e9’作为第3列背景色。

 

上浆

继续到“设计”选项卡，并为“尺寸”子类别使用以下设置：

· 做这行富尔德威德：是的

· 使用自定义水槽宽度：是

· 排水沟宽度：1

· 等分柱高：是

 

自定义边距与填充

接下来，向行添加以下自定义填充和自定义边距：

· 顶部填充物：1 PX

· 底部填充物：0 px

· 底限：-200 px

并在每列的顶部和底部填充“3px”。

 

禁用平板电脑和电话

最后，禁用平板电脑和手机上的行。

 

再增加三列行(Blurb模块)

柱梯度背景

一旦您创建了前三列行，就可以继续创建第二列行(它们共享相同的部分)。每一列都需要具有相同设置但第一颜色不同的渐变背景：

· 第一颜色：#e 09900(第1栏)，#0c71c3(第2栏)，#8300 e9(第3栏)

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

· 梯度型：线性

· 梯度方向：180度

· 起始位置：73%

· 期末职位：92%

 

使行满宽

然后，转到“设计”选项卡，并启用“让这个行满宽”选项。

 

行自定义填充

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

· 顶部填充：0 px

· 右垫：60 px

· 底部填充物：100 px

· 左填充物：60 px

· 最高保证金：-100便士

将“5px”添加到每列的顶部填充。

 

BLUURB模块

完成行设置后，可以将Blurb模块添加到您刚刚创建的行的第一列中。在Content选项卡的Image&Icon子类别中，启用“UseIcon”选项并选择的图标。

 

向下滚动相同的选项卡，并使用‘#f4f4f4’作为背景颜色。

 

转到“设计”选项卡，吕梁公司站点制作对Image&Icon子类别进行以下调整：

· 图标颜色：#e 09900

· 图像/图标放置：左

· 使用图标字体大小：是

· 图标字体大小：50 px

 

在文本子类别中，确保启用了左文本方向。

 

标题文本子类别的选项如下：

· 标题字体：克里特圆形

· 标题文本对齐：左

· 页眉字体大小：32 px

· 标题线高度：1em

 

然后，打开正文文本子类别并使用以下设置：

· 正文对齐：左

· 体型尺寸：12 px

· 身高：1.7em

 

我们还将使用具有以下设置的边框：

· 使用边框：是

· 边框颜色：#000000

· 边框宽度：2 PX

· 边框样式：虚线

 

接下来，打开“大小”子类别，使用“279 px”表示内容宽度，使用“100%”表示内容宽度。

 

最后，将“30 px”添加到顶部、右侧、底部和左侧。

 

文本模块

一旦添加和修改了Blurb模块，就可以继续添加一个文本模块了。文本模块还需要一个梯度背景：

· 第一颜色：#e 09900

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

· 梯度类型：径向

· 径向：中心

· 起始位置：20%

· 期末职位：24%

 

移至“设计”选项卡，并对文本子类别使用以下设置：

· 文本字体大小：21 px

· 文本颜色：#FFFFFF

· 文本线高度：1.7em

· 文本定位：中心

 

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

 

最后，使用‘-100 px’的顶部边距，并在顶部和底部填充添加‘50 px’。

 

克隆Blurb&文本模块

完成第一列后，可以克隆两个模块并将它们放置在其他两列中。唯一需要更改的是文本模块的blurb图标、blurb颜色和第一个渐变颜色，第二列为“#0c71c3”，最后一列为“#8300e9”。

禁用平板电脑和电话

一旦您完成了第二行，确保您禁用它的手机和平板电脑以及。

 

克隆三列行(平板和电话)

平板电脑和手机的时间线版本略有不同。用您在这篇文章的前一部分中创建的剪贴画克隆行，然后按照接下来的步骤将其安装在电话和平板电脑上。

增加行梯度背景

平板电脑和手机上的行将需要以下渐变背景：

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

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

· 梯度型：线性

· 梯度方向：90德克

· 起始位置：1%

· 最终位置：0%

 

行垫

删除桌面版本中使用的所有自定义填充和页边距，并将“100 px”添加到顶部填充。

 

在桌面上禁用

最后，与其禁用电话和平板电脑上的行，不如在桌面上禁用它。

 

结果

在遵循文章中的所有步骤之后，您应该能够在桌面上获得以下结果：

 

平板电脑和手机上的结果如下：

 

最后思想

在吕梁公司站点制作这篇文章中，我们向您展示了如何通过使用内置的Divi选项来创建Blurb模块的简单时间线。帮助将Blurb模块识别为时间线的两个因素是连接所有三个Blurb模块和数字的线。如果您有任何问题或建议，请确保在下面的评论部分留下评论！

 


相关推荐
分享： 1 2 3

关键词

手机网站制作手机网站建设企业网站建设做网站价格医疗网站建设营销网站建设网站建设哪家好网站制作方案企业网站制作如何制作网站江门网站优化专业网站建设网站制作公司

热门分享

最新文章

随机推荐

最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监
TOP