如何使用 Divi 为您的个人网站创建一个漂亮的英雄部分

创建个人网站既有趣又具有挑战性。 您希望您的网站看起来足够吸引人和个性化，以讲述您的故事。 同时，您希望拥有一个美丽而真实的网站，以表明您知道自己在做什么。

为了帮助您完成创建此类个人网站的创作过程，我们创建了一个精美的英雄部分，绝对会让您的网站脱颖而出。 在这篇文章中，我们将逐步向您展示如何仅使用 Divi 的每个步骤的内置设置来创建该结果。 在深入本教程之前，让我们先看看结果。

桌面上的结果

桌面上的结果如下所示：

手机上的结果

而在手机上访问网站的访问者将看到以下结果：

如何使用 Divi 为您的个人网站创建一个漂亮的英雄部分

订阅我们的 YouTube 频道

创建部分

首先在您的 WordPress 网站上创建一个新页面，启用 Divi Builder，切换到 Visual Builder 并向其添加一个新部分。

渐变背景

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

• 第一种颜色：#c2c6f3
• 第二种颜色：#cea5b9
• 渐变类型：径向
• 径向：中心
• 起始位置：45%
• 结束位置：45%

添加第一行

然后，继续将第一行添加到该部分。 此行将仅包含您可以在布局顶部看到的文本模块。

列结构

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

浆纱

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

• 使这一行全宽：是
• 使用自定义装订线宽度：是
• 天沟宽度：1

文本模块

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

文字设置

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

• 文字字体：Arizonia
• 文字字体粗细：常规
• 文字大小：150（桌面）、80（平板）、70（手机）
• 文字颜色：rgba(255,255,255,0.39)
• 文字方向：居中

添加第二行

完成第一行后，继续向同一部分添加第二行。

列结构

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

背景图片

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

浆纱

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

• 使用自定义宽度：是
• 自定义宽度：557px

间距

接下来，使用“0px”作为行的顶部、底部、右侧和左侧填充。

盒子阴影

最后，应用以下框阴影：

• 框阴影水平位置：0px
• 框阴影垂直位置：2px
• 框阴影模糊强度：53px
• 框阴影传播强度：10px
• 阴影颜色：rgba(0,0,0,0.3)
• 阴影位置：外阴影

文本模块

完成行设置后，继续向列添加文本模块。

背景颜色

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

文字设置

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

• 文字字体：安迪卡
• 文字字体粗细：粗体
• 文本字体样式：大写
• 文字大小：78px（桌面）、70px（平板电脑）、50px（手机）
• 文字颜色：#c2c6f3
• 文本行高：1em
• 文字方向：居中

边界

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

• 使用边框：是
• 边框颜色：#c2c6f3
• 边框宽度：8px
• 边框样式：纯色

间距

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

• 上、右、下、左边距：50px
• 顶部填充：200px
• 底部填充：200px

盒子阴影

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

• 框阴影水平位置：0px
• 框阴影垂直位置：0px
• 框阴影模糊强度：0px
• 框阴影传播强度：50px
• 阴影颜色：rgba(206,165,185,0.41)
• 框阴影位置：外阴影

添加第三行

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

列结构

为该行选择两列。

浆纱

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

间距

最后，添加“50px”的顶部和底部边距。

第一个文本模块

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

文字设置

然后，转到“设计”选项卡，使用“Andika”作为文本字体，使用“Regular”作为文本字体粗细。

克隆文本模块并将其放在第二列中

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

添加第四行

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

列结构

这个新行也有两列。

浆纱

打开 Row Settings 并将以下设置应用于 Sizing 子类别：

• 使这一行全宽：是
• 使用自定义装订线宽度：是
• 天沟宽度：1

间距

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

第一个图像模块

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

盒子阴影

并向其添加以下 Box Shadow：

• 框阴影水平位置：-6px
• 框阴影垂直位置：2px
• 框阴影模糊强度：53px
• 框阴影传播强度：10px
• 阴影颜色：rgba(0,0,0,0.3)
• 框阴影位置：外阴影

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

最后，克隆这个图像模块并将它放在第二列中以完成这一行。

结果

完成我们添加到本文的所有步骤后，您应该能够获得以下结果：

在桌面上

在移动

最后的想法

Divi 为您带来无限可能。 您可以使用可视化生成器实时显示更改，从而使您的网站看起来完全符合您的要求。 特别是对于这篇文章，我们向您展示了如何为个人网站创建一个漂亮的英雄部分。 本教程仅使用 Divi 的内置选项。 如果您有任何问题或建议； 确保您在下面的评论部分发表评论！

请务必订阅我们的电子邮件通讯和 YouTube 频道，这样您就不会错过重大公告、有用提示或 Divi 免费赠品！