阳泉站点制作：如何用Divi为您的个人网站创建一个美丽的英雄区

2019.05.25 阳泉站点制作

193

创建一个个人网站既有趣又有挑战性。你希望你的网站看上去很吸引人，并且有足够的个人魅力让你的故事被告知。同时，你想拥有一个美丽而真实的网站，显示你知道自己在做什么。

为了帮助您在创建这样的个人网站的创造性过程，阳泉站点制作创建了一个美丽的英雄部分，肯定会使您的网站脱颖而出。在这篇文章中，我们将一步地向您展示如何使用Divi为每个步骤内置的设置来创建结果。

如何用Divi为您的个人网站创建一个美丽的英雄区

创建科

首先，在WordPress网站上创建一个新页面，启用DiviBuilder，切换到VisualBuilder，并在其中添加一个新的部分。

梯度背景

在本节中，您唯一需要更改的是背景。此背景将适用于我们将在本文接下来的步骤中添加的所有行。打开背景子类别并向其添加以下渐变背景：

· 第一颜色：#c2c6f3

· 第二颜色：#cea5b9

· 梯度类型：径向

· 径向：中心

· 起始位置：45%

· 期末职位：45%

增加第一排

然后，继续将第一行添加到节中。这一行将只包含在布局顶部可以看到的文本模块。

柱结构

接下来，选择带有一列的列结构。

上浆

移到行设置的“设计”选项卡上，并为“大小”子类别使用以下设置：

· 全宽行：是的

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

· 排水沟宽度：1

undefined

文本模块

如前所述，这一行只需要一个文本模块。

文本设置

输入要在“内容”选项卡中显示的文本后，转到“设计”选项卡，并将下列设置应用于文本子类别：

· 文本字体：Arizonia

· 文本字体权重：普通字体

· 文本大小：150(桌面)，80(平板电脑)，70(手机)

· 文字颜色：RGBA(255，255，255，0.39)

· 文本定位：中心

增加第二排

完成第一行后，继续将第二行添加到同一节中。

柱结构

与前一行一样，该行也只有一列。

undefined

背景图像

打开行设置并添加要用作第一列背景图像的个人图像。确保图像位置设置为“中心”。

undefined

上浆

然后，打开SING子类别并进行以下更改：

· 使用自定义宽度：是

· 自定义宽度：557 px

undefined

间距

接下来，使用‘0px’作为行的上、下、右和左填充。

盒影

最后，使用以下框阴影：

· 框影水平位置：0 px

· 盒影垂直位置：2PX

· 盒影模糊强度：53 px

· 盒影扩展强度：10 px

· 阴影颜色：RGBA(0，0，0，0.3)

· 阴影位置：外阴影

undefined

文本模块

完成行设置后，继续将文本模块添加到阳泉站点制作的列中。

背景色

首先，这个文本模块需要一个“RGBA(0，0，0，0.66)”颜色的背景色。

文本设置

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

· 文本字体：Andika

· 文本字体权重：粗体

· 文本字体样式：大写

· 文本大小：78 px(桌面)，70 px(平板电脑)，50 px(电话)

· 文本颜色：#c2c6f3

· 文本行高：1em

· 文本定位：中心

undefined

边界

接下来，打开边界子类别并使用以下边框：

· 使用边框：是

· 边框颜色：#c2c6f3

· 边框宽度：8 px

· 边框风格：实心

间距

继续，添加以下边距和填充：

· 上、右、下、左边距：50 px

· 顶部填充物：200 px

· 底垫：200 px

盒影

最后，对文本模块使用以下方框阴影：

· 框影水平位置：0 px

· 盒影垂直位置：0 px

· 盒影模糊强度：0 px

· 盒影扩展强度：50 px

· 阴影颜色：RGBA(206，165，185，0.41)

· 盒影位置：外阴影

undefined

增加第三排

如前所述，本教程只使用一节内容。这背后的原因是，我们希望该部分的渐变背景分布在所有正在共享的不同内容上。继续添加一个新行。

柱结构

为该行选择两列。

上浆

然后，启用“使用自定义宽度”选项，并应用“663 px”宽度。

间距

最后，添加‘50 px’的顶部和底部边距。

第一文本模块

向行的第一列添加第一个文本模块。

文本设置

然后，转到“设计”选项卡，使用“Andika”作为文本字体，使用“正则”作为文本字体的权重。

克隆文本模块&放在第二列中

第二列中的文本模块具有完全相同的设置，所以继续，克隆文本模块并将其放在第二列中。

增加第四排

在设计完成之前，还有一行要添加到该部分。

柱结构

这个新行也有两列。

上浆

打开“行设置”，使下列设置应用于“尺寸”子类别：

· 全宽行：是的

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

· 排水沟宽度：1

间距

然后，添加20 px的顶部填充。

第一图像模块

继续，并将第一个图像模块添加到这最后一行的第一列中。

盒影

并向其添加以下框阴影：

· 框影水平位置：-6PX

· 盒影垂直位置：2PX

· 盒影模糊强度：53 px

· 盒影扩展强度：10 px

· 阴影颜色：RGBA(0，0，0，0.3)

· 盒影位置：外阴影

克隆图像模块&放置在第二列

最后，克隆此ImageModule并将其放置在第二列中以完成此行。

结果

一旦您完成了我们添加到这个帖子中的所有步骤，您应该能够实现结果。

最后思想

你和迪维在一起的可能性是无限的。通过使用VisualBuilder，您可以使您的网站看起来与您想要的完全一样，这将实时显示您的更改。特别是这篇文章，我们向您展示了如何为个人网站创建一个美丽的英雄部分。本教程只使用Divi的内置选项。如果您有任何问题或建议，请确保在阳泉站点制作下面的评论部分留下评论！