如何使用 Divi 创建令人惊叹的英雄部分

英雄部分； 它们用于各种目的。 它们是访问者访问您网站时首先看到的东西，它们会立即显示您网站的风格，并影响访问者在您网站上的感受和行为方式。 我们已经习惯了那里的各种英雄部分，但其中大多数都包括英雄形象、标语和号召性用语。 不过，还有其他可能性。 在这篇文章中，我们将向您展示关于英雄部分的另一种方法，我们将跟进一个您可以使用 Divi 重新创建的示例。

例子

我们将向您展示如何使用 Divi 重新创建的示例在桌面上如下所示：

在手机上是这样的：

如何让你的英雄部分脱颖而出

在我们向您展示如何重新创建示例之前，让我们先看一下区分此英雄部分与其他部分的一些因素。

1. 大型、描述性和集中的标志

我们在示例中使用的第一件事是帮助使我们的英雄部分脱颖而出，是居中的标题格式而不是默认格式。 除此之外，我们还使用了一个透明菜单，这将有助于将菜单项与英雄部分设计重叠。 使用透明背景时，徽标、菜单和网站之间的链接会更加清晰，因为英雄部分内的分隔较少。

2. 集中书面内容

您可以做的另一件事使您的英雄部分脱颖而出，那就是集中您拥有的书面内容。 这样，您就会将访问者的注意力吸引到屏幕上的某个位置，从而增加他们阅读的机会。 另一方面，如果您在整个英雄部分中划分书面内容，则更改更有可能错过您试图带来的部分信息。

3.突出独特的销售主张

通常，英雄部分包含共享产品或公司标语的普通文本模块。 但是，您也可以在英雄部分中使用 Blurb 模块。 如果您想立即分享您的产品或服务的独特销售主张，这些 Blurb 模块是完美的。 最重要的是，您还可以选择是否要立即在其中包含号召性用语。 在我们的示例中，这些对操作的调用内置于模糊模块本身中。

4. 清洁产品图片

最重要的是，为了平衡您提供的书面内容，我们建议使用干净的产品图片作为您的英雄部分背景图片。 您希望您的英雄形象尽可能具有定性和不言自明，而无需接管整个英雄部分。

如何使用 Divi 创建令人惊叹的英雄部分

订阅我们的 YouTube 频道

使用 Divi 重新创建示例

现在我们已经讨论了理论方面，是时候开始重新创建它了。

标题格式

您需要做的第一件事是通过转到WordPress 仪表板 > 自定义 > 标题和导航 > 标题格式 > 并选择“居中”作为标题样式，选择“居中”作为标题样式。

主菜单栏设置

然后，返回Header & Navigation > Primary Menu Bard > 并进行以下调整：

• 菜单高度：211px
• 标志最大高度：100px
• 文字大小：16
• 字母间距：2
• 字体: Lato Light
• 字体样式：大写
• 文字颜色：#FFFFFF
• 活动链接颜色：#FFFFFF
• 背景颜色：rgba(255,255,255,0)
• 下拉菜单背景颜色：rgba(255,255,255,0)

添加新部分

完成后，添加一个新页面，启用 Divi Builder，启用 Visual Builder 并添加一个新的标准部分。

渐变背景

本节使用以下渐变背景：

• 第一种颜色：#e2e2e2
• 第二种颜色：rgba(255,255,255,0)
• 渐变类型：线性
• 梯度方向：180度
• 起始位置：40%
• 结束位置：40%

背景图片

接下来，上传背景图像并选择“乘法”作为背景图像混合。

添加两列行

背景颜色

将两列行添加到您刚刚创建的部分并使用“#b7afa1”作为背景颜色。

第 1 列渐变背景

向下滚动并为第一列使用以下渐变背景：

• 第一种颜色：rgba(255,255,255,0.43)
• 第二种颜色：rgba(255,255,255,0)
• 第 1 列渐变类型：径向
• 第 1 列渐变方向：左上角
• 第 1 列起始位置：49%
• 第 1 列结束位置：49%

第 2 列渐变背景

并为第二列使用以下渐变背景：

• 第一种颜色：rgba(255,255,255,0.43)
• 第二种颜色：rgba(255,255,255,0)
• 第 2 列渐变类型：径向
• 第 2 列径向：右下角
• 第 2 列起始位置：49%
• 第 2 列结束位置：49%

浆纱

转到“设计”选项卡，启用“使用自定义装订线宽度”选项并使用“1”作为装订线宽度。

间距

打开间距子类别并使用以下填充和边距：

• 顶部填充：0px（桌面），20px（平板电脑和手机）
• 右填充：25px
• 底部填充：20px
• 左填充：25px
• 下边距：200px

第一个模糊模块

启用图标

将 Blurb 模块添加到行的第一列，启用“使用图标”选项并选择一个图标。

图标设置

然后，转到设计设置并对图像和图标子类别进行以下更改：

• 图标颜色：#FFFFFF
• 图像/图标放置：左
• 使用图标字体大小：是
• 图标字体大小：40px

标题文本设置

然后，将以下设置应用于标题文本子类别：

• 标题字体：Roboto Light
• 字体样式：粗体
• 标题字体大小：25px
• 标题文本颜色：#FFFFFF
• 标题行高度：1.5em

正文设置

Body Text 子类别需要进行以下更改：

• 正文字体：Lato Light
• 正文字体大小：13px
• 正文颜色：#FFFFFF

浆纱

接下来，使用“300px”作为内容宽度。

间距

最后，为 Blurb 模块使用以下边距和填充：

• 上边距：-50px（桌面），0px（平板和手机）
• 顶部填充：100px
• 右填充：10px
• 底部填充：30px
• 左填充：10px

克隆 Blurb 模块并放置在第二列中

继续克隆之前制作的 Blurb 模块并将其也放置在另一列中。

更改背景颜色

在此克隆的 Blurb 模块中，您必须更改的第一件事是背景颜色。 将其更改为'rgba(89,60,31,0.5)'。

更改图标

您需要更改的下一件也是最后一件事情是内容选项卡中的图标。

额外：将 Divi 的新框阴影选项添加到 Row

通过最近的更新，您现在还可以向行、模块和部分添加框阴影。 在本例中，我们将向该行添加一些框阴影。 这将有助于在我们的英雄部分创建一些深度并强调书面内容。

• 框阴影水平位置：-3px
• 框阴影垂直位置：31px
• 框阴影模糊强度：79px
• 框阴影扩散强度：-4px
• 阴影颜色：#424242
• 框阴影位置：外阴影

结果

让我们快速获取另一个结果，看看您应该能够在遵循这篇文章后在桌面上实现的结果：

在手机上：

最后的想法

在这篇文章中，我们向您展示了英雄部分的不同方法。 我们为您提供了一些提示，并通过向您展示如何重新创建我们预先使用 Divi 制作的示例来详细说明这些提示。 如果您有任何问题或建议； 确保您在下面的评论部分发表评论！

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

特色图片由 Ellagrin/shutterstock.com 提供