如何使您的 Divi 全宽标题模块全屏

无论访问者的屏幕大小如何，全屏标题占据整个屏幕。 这对于吸引用户的注意力非常有用。 这也非常适合将他们引导到您的号召性用语。 幸运的是，使用 Divi 的全宽标题模块很容易制作全屏标题。 在这篇文章中，我们将向您展示如何构建全角标题、将其变为全屏并设置样式。 您可以使用这种方法为您的页面构建任何全屏英雄部分！

让我们开始吧。

预览全屏标题

让我们预览一下我们将在本教程中构建的内容。

桌面

药片

电话

为什么要使用 Divi 的全宽标题模块制作全屏标题？

在我们讨论如何制作全屏标题之前，让我们先谈谈为什么 Divi 用户可能想要一个。

全屏标题显示包含部分中的特定元素。 本节以简洁的布局呈现这些元素，吸引注意力并执行多项任务。

首先，这可以用来显示一个号召性用语，可以引导访问者进入您的销售渠道。 这是提及特定产品或服务的好地方。

其次，它可以向用户展示一个有趣的设计，让他们留在网站上。 网站只有几秒钟的时间来吸引访问者的注意力。

创建全屏标题时要记住以下几点：

• 遵循颜色和字体的常见设计实践。 确保它们清晰易读并符合您网站的主题。
• 保持设计简洁干净。 不要使用太多的图像、链接或按钮。 专注于几件事。 少即是多。
• 确保全屏标题是响应式的。 全屏标题必须看起来很棒并且在所有屏幕尺寸上都能正常工作。

如何使您的 Divi 全角标题成为全屏标题

首先向您正在处理的页面添加全角部分。 然后，将Fullwidth Header Module添加到 fullwidth 部分。

模块的设置将打开。 选择设计选项卡。 启用名为Make Fullscreen的选项。

我们现在有一个全屏标题。 就是这么简单。

启用全屏页眉向下滚动图标

我们还可以添加一个按钮，指示用户向下滚动。 但是，我们必须启用它。 此按钮始终在全屏选项中显示。 全屏标题选项始终与访问者的屏幕高度匹配。

在模块的设置中，我们将在 Layout 选项下看到一个名为 Scroll Down Icon 的部分。 单击按钮以启用显示向下滚动按钮。

Divi 全角标题全屏标题示例

既然我们已经讨论了为什么要使 Fullwidth Header 全屏显示并了解如何完成任务，让我们看一个示例。 我将使用 Divi 布局的 hero 部分创建一个全角标题。

对于此示例，我使用 Divi 中提供的免费摄影工作室布局包主页中的英雄部分。 我将使用布局中的字体和颜色自定义此英雄部分，以创建一个独特的全角标题。

全屏标题模块设置

以下是全屏标题模块中每个设置部分的步骤。

文本

首先，添加将在全角标题中可见的文本。 这包括标题、副标题、内容（我将为此使用 Divi 的内置虚拟文本）和按钮文本。

• 名称：Divi摄影工作室
• 副标题：摄影
• 按钮 1：项目简介
• 按钮 2：项目规划
• 正文：内容

图片

接下来，添加图像。 这显示在全角标题的右侧，将文本向左移动。

• 标题图片：您的选择

背景

向下滚动到背景并将颜色设置为#f6f5ee。

• 颜色：#f6f5ee

布局

接下来，转到“设计”选项卡。 启用制作全屏。

• 制作全屏：是

向下滚动图标

接下来，启用Scroll Down Icon 。 将台式机和平板电脑的颜色更改为黑色，将手机的颜色更改为白色。 使用我选择的图像，图标将出现在手机底部的图像上，这使得它可以与图像的颜色一起显示。 将图标大小更改为台式机的 70 像素、平板电脑的 60 像素和手机的 50 像素。

• 显示向下滚动按钮：是
• 图标颜色：#000000 台式机和平板电脑，#ffffff 电话
• 尺寸：70px 桌面，60px 平板，50px 手机

标题文字

接下来，我们将调整Title Text 。 将文本设置为 H1 并选择 Inter 作为字体。 将粗体设置为粗体，将对齐设置为居中，将颜色设置为黑色。

• 标题：H1
• 字体：国米
• 重量：粗体
• 对齐方式：中心
• 颜色：#000000

我们将使用三种字体大小：台式机 75px、平板电脑 40ps 和手机 24px。 将行高更改为 1.2em。

• 尺寸：75px 桌面，40px 平板，24px 手机
• 行高：1.2em

主体

接下来，向下滚动到Body Text 。 为字体选择 Open Sans。 将对齐设置为向左，颜色设置为黑色。

• 字体：Open Sans
• 对齐方式：左
• 颜色：#000000

将桌面的字体大小设置为 16 像素，平板电脑设置为 15 像素，手机设置为 14 像素。 将行高更改为 1.8em。

• 尺寸：16px 桌面，15px 平板，14px 手机
• 行高：1.8em

字幕文字

接下来，向下滚动到Subtitle Text 。 将字体更改为 Inter。 将粗体设置为粗体，将样式设置为 TT，将对齐设置为居中，并将颜色设置为#ff5a17。

• 字体：国米
• 重量：粗体
• 款式：TT
• 对齐方式：中心
• 颜色：#ff5a17

将所有三种屏幕尺寸的尺寸更改为 14 像素。 将字母间距更改为 1px，将行高更改为 1.4em。

• 尺寸：14 像素
• 字母间距 1px
• 行高：1.8em

按钮一

接下来，向下滚动到Button One并选择Use Custom Styles for Button 。 将文本颜色更改为黑色。

• 为按钮使用自定义样式：是
• 尺寸：20px 桌面，18px 平板，16px 手机
• 文字颜色：#000000

将背景颜色更改为白色，并将边框宽度和半径设置为 0px。

• 背景颜色：#ffffff
• 按钮一边框宽度：0px
• 按钮一边框半径：0px

将字体更改为 Inter 并将粗体更改为粗体。

• 字体：国米
• 重量：粗体

接下来，选择您喜欢的图标，将颜色更改为黑色，将按钮位置设置在左侧，并禁用仅在悬停时显示按钮一的图标。

• 图标：您的选择
• 图标颜色：#000000
• 按钮一图标位置：左
• 仅在按钮一的悬停时显示图标：否

最后，向下滚动到 Button One 的填充选项。 我们将为每个屏幕尺寸使用不同的填充。 对于桌面，顶部和底部使用 20 像素，左右使用 40 像素。 对于平板电脑，将顶部和底部填充更改为 16 像素。 在手机上，将顶部和底部填充更改为 12 像素。 为所有三个保留左侧和右侧填充相同。

• 桌面内边距：上下 20px，左右 40px
• 平板电脑内边距：上下 16 像素，左右 40 像素
• 手机内边距：上下 12px，左右 40px

按钮二

最后，向下滚动到Button Two 。 为 Button 选择使用自定义样式。 将台式机的字体大小设置为 20 像素，平板电脑设置为 19 像素，手机设置为 16 像素。 将文本颜色更改为白色。

• 为按钮使用自定义样式：是
• 尺寸：20px 桌面，18px 平板，16px 手机
• 文字颜色：#ffffff

将背景颜色更改为#ff5a17。 将边框宽度和半径设置为 0px。

• 背景颜色：#ff5a17
• 按钮二边框宽度：0px
• 按钮二边框半径：0px

接下来，将字体更改为 Inter，将粗体更改为粗体。

• 字体：国米
• 重量：粗体

选择您喜欢的图标。 将颜色更改为黑色，将按钮位置设置在左侧，并禁用“仅在悬停时显示按钮二的图标”。

• 图标：您的选择
• 图标颜色：#000000
• 按钮二图标位置：左
• 仅在按钮二的悬停上显示图标：否

最后，向下滚动到 Button Two 的Padding选项。 对于桌面，顶部和底部使用 20 像素，左右使用 40 像素。 在平板电脑上，将顶部和底部填充更改为 16 像素。 对于手机，将顶部和底部填充更改为 12 像素。 关闭模块并保存您的工作。

• 桌面内边距：上下 20px，左右 40px
• 平板电脑内边距：上下 16 像素，左右 40 像素
• 手机内边距：上下 12px，左右 40px

全屏标题结果

这是我们的全角标题在台式机、平板电脑和手机上的外观。

桌面

药片

电话

结束使用 Divi 的全宽页眉模块创建全屏页眉的想法

这就是我们如何使用 Divi 全宽页眉模块制作全屏页眉的看法。 这个过程很简单，在任何设备上看起来都很棒。 添加向下滚动按钮是一种出色的视觉效果，向用户表明他们可以滚动。 设计全屏标题类似于设计英雄部分。 遵循一些简单的指南可以帮助您使用 Divi 的全屏标题模块创建令人惊叹的全屏标题。

我们希望收到你的来信。 您是否已将 Divi Fullwidth Header 全屏显示？ 在评论中让我们知道。