Divi：如何使用 Fullwidth Header 模块创建 Hero 部分

您想使用 Fullwidth Header 模块创建一个 Hero Divi 部分还是自己设计一个？

建立一个英雄部分 网站Web 从头开始或使用 Divi Fullwidth Header 模块是为您创建引人注目的设计的两种方法 现场网络. 

在本文中，我们将探讨使用全角标题模块与使用 Divi 创建您自己的英雄部分的优缺点。

走吧！

网站英雄版块的重要性

英雄部分是您的第一个部分 游客 看看他们什么时候到达你的 网站Web。 这通常是全角横幅，也可以称为英雄标题。 它是您网站上的一个显着位置，因为它有能力留下持久的第一印象。

另请参阅： Divi：如何全屏显示Fullwidth Header模块

因此，重要的是它的设计方式必须易于阅读，同时仍然引人注目和引人注目。 网站英雄部分很重要，因为它们可以吸引潜在客户的注意力，快速描述页面，并带来额外的参与和潜在的销售线索。 英雄部分应该有品牌，包括 H1 标题和 CTA。

从头开始创建英雄部分

从头开始设计英雄部分可以让您完全控制设计和 内容。 根据您的情况和需求，这可能是您网站的绝佳解决方案。 

让我们来看看这种方法的优缺点。

这种方法的好处

首先，让我们看看使用 Divi 从头开始​​构建网站英雄部分的好处。

• 全面的设计控制
• 使用任何 Divi 模块

这种方法的缺点

现在让我们看看从头开始创建英雄部分的缺点。

• 你必须从头开始构建
• 需要多个模组

使用 Divi Fullwidth Header 模块创建一个 Hero 部分

使用 Divi Fullwidth Header 模块创建英雄部分可以在几分钟内轻松创建引人注目的移动响应设计。 

让我们来看看这种方法的优缺点。

这种方法的好处

让我们来看看使用 Divi Fullwidth Header 模块构建 Hero 部分的好处。

• 所有你的 内容 位于单个模块中
• 设计已经优化

这种方法的缺点

现在让我们评估一下使用 Divi Fullwidth Header 模块设计 Hero 部分的缺点。

• 设计灵活性较低

Divi 全宽标头模块附带以下选项： 内容 预定义的，而如果您想要添加模块中不可用的内容，则许多内容可能会受到限制。 这意味着整体设计的灵活性会降低。

分步搭建两个英雄版块

现在您了解了这两种方法的优缺点，让我们构建每个英雄部分，以便您可以准确了解每种方法的工作原理。

使用 Divi Builder 创建新页面

要开始，您需要执行以下操作：

1. 安装 Divi  在你的WordPress网站上。
2. 添加一个页面并给它一个标题。
3. 启用可视化构建器

从头开始创建您的英雄部分

现在我们的页面已经设置好了，让我们从头开始创建一个英雄部分。

立即下载DIVI！！！

激活“Divi Builder”

为了使用 Divi 的拖放构建器，我们需要通过单击按钮来激活 Visual Builder “使用 DiviBuilder”. 这将使用 Divi Visual Builder 重新加载页面。

选择：从头开始构建

现在您的页面已经重新加载并启用了可视化构建器，请单击选项“ 从头开始构建 这样我们在设计时就有了一个空白页面。

添加行和配置列

创建具有以下列结构的行。

添加模组

现在让我们添加我们需要的内容模块。

• 2个文本模块，分隔符，左栏中的一个按钮
• 1 中间列的图像模块
• 右栏中的 1 个图像模块

样式部分

现在让我们配置部分设置。

添加一个部分，然后配置以下设置：

• 背景：#1d1d25

标题文本样式

自定义标题文本：

• 标题 1：
  • 字体粗细：半粗体
  • 文字颜色：#ffffff
  • 文字大小：90px
  • 线高：1,1 em

分离器

配置分隔线设置：

• 线条颜色：rgba(255,255,255,0.3)
• 分隔线重量：10px
• 最大宽度：260 像素

主体

自定义正文：

• 文字颜色：rgba(255,255,255,0.7)
• 文字大小：13px
• 线高：1,8 em

按键

现在让我们自定义按钮。

在按钮选项卡中：

• 为按钮使用自定义样式：是
• 按钮文字大小：14px
• 文字颜色：#ffffff
• 按钮背景：
• 边框宽度：0 像素
• 边框半径：0 像素

在间距选项卡中：

• 顶部和底部：40px
• 左右：20px

添加图像

将图像添加到图像模块。

调整线路设置

在线参数：

• 边距（左）：15vw

调整第二列

在第二列中，配置以下设置：

自定义CSS

将以下代码粘贴到主元素的代码部分：

argin-right: -15vw!important;
z-index: 100!important;

间距

添加 100 像素的顶部填充。

所以 ！ 您现在有一个完全设计的自定义英雄部分。

立即下载DIVI！！！

使用 Divi 的 Fullwidth Header 模块创建您的英雄部分

现在让我们看看如何使用 Divi 的 Fullwidth Header 模块重新创建这个 Hero 部分。

立即下载DIVI！！！

添加页面并选择从头开始构建

添加一个新页面，给它一个标题，然后单击“使用 Divi Builder”，然后选择“从头开始构建”。

插入全角部分和全角标题

插入部分 全宽，然后选择 全角标题 在模块库中。

包装内容

将文本内容添加到“文本”选项卡中的模块。

图片

在图像选项卡中添加图像。

更改背景颜色

在后台选项卡中，配置以下设置：

• 背景：#1D1D25

标题文本

配置标题文本设置：

• 标题字体粗细：粗体
• 文字大小：90px

主体

配置正文设置：

• 正文文本颜色：rgba(255,255,255,0.55)

字幕文字

配置字幕文本设置：

• 字幕字体粗细：粗体
• 文字颜色：#4C594C
• 字母间距：3px

按钮

现在让我们自定义这两个按钮。

按钮一

在 Button One 选项卡上，配置以下设置：

• 为按钮一使用自定义样式：是
• 一键式
  • 背景：#4c594c
  • 边框宽度：0 像素
  • 边框半径：0px
  • 显示图标：是
  • 仅在悬停时显示图标：否
  • 填充：25 像素（顶部和底部）； 25px（左），50px（右）

按钮二

在按钮二选项卡上，配置以下设置：

• 为按钮二使用自定义样式：是
• 按钮两个边框宽度：0 像素
• 边框半径：0px
• 内边距：25px（上、下、左、右）
• 按钮框阴影：选择第 4 个
• 盒子阴影水平位置：0px
• 盒子阴影垂直位置：2px
• 阴影颜色：#ffffff

所以 ！ 您现在拥有一个使用 Divi Fullwidth Header 模块的完全设计的 Hero 部分。

也可以看看： Divi：如何在元素之间创建背景过渡

立即下载DIVI！！！

结论

使用 Divi 构建英雄部分很容易，无论您是从头开始构建还是使用 Fullwidth Header 模块。 这两个选项都允许您创建令人惊叹的标题设计，以吸引您的兴趣 游客. 

根据您的独特需求，在为您的英雄部分设置样式时，任一选项都是一个不错的选择。 

阅读了两者的优缺点后，您将如何设计您的英雄部分？

我们希望本教程能激发您的下一个 Divi 项目。 如果您有任何疑虑或建议，请联系我们 评论部分 讨论一下。

您也可以咨询 我们的资源，如果您需要更多元素来执行创建Internet网站的项目。

不要犹豫，也请咨询我们的指南 WordPress博客创建 或者那个 Divi：有史以来最好的WordPress主题.

但与此同时， 在您不同的社交网络上分享此文章.

...