您想在 Divi 中使用全屏菜单模块创建一个全局标题吗？
标题是任何最重要的元素之一 网站Web 并且位于 用户体验. 导航菜单让您的用户了解他们可以在您的网站上找到什么 网站Web 并帮助他们找到所需的信息。
此外，二级菜单栏可以是突出显示号召性用语或号召性用语的理想空间。 促进 一份邀请。 更不用说标题是您的文件中最重要的部分之一 网站Web，因为它通常出现在每个页面上。 这是展示您的品牌并创建与网站其他部分设计一致的标题的绝佳机会。
Divi 的 Theme Builder 选项允许您创建自定义全局标题并自定义整个网站的标题和菜单模块的外观。
在本教程中，我们将向您展示如何使用 Divi 的全屏菜单模块创建全局标题。
让我们开始吧！
概观
这是我们将要设计的全局标题的预览。
打开主题生成器
由于我们在此示例中构建了一个全局标题，让我们导航到“主题生成器”，您可以在 WordPress Divi 菜单中找到它。 选择添加全局标题，然后选择创建全局标题。
创建二级菜单栏
当您第一次打开全局标题布局时，它预装了一个常规部分。 我们将把它修改为我们的二级菜单栏，它将位于我们的全角菜单上方，并包含号召性用语文本和一个按钮。
首先，打开部分设置并添加背景颜色。
- 背景：#92A8A1
接下来，部分边距。
- 内边距顶点：0px
- 底部内边距：0px
现在插入一行。 对于此示例，我们将使用如下所示的布局。
在行设置中，在样式选项卡的大小调整下，协调列高。
- 协调柱高：是
接下来，设置顶部和底部边距，如下所示：
- 顶部内边距：5px
- 底部内边距：5px
由于我们希望我们的辅助标题元素垂直对齐，我们将添加一些自定义 CSS 到主行元素。
1.
align-items:center;
现在我们的生产线已配置完毕，我们可以为我们的产品插入模块 内容。 首先在左侧插入一个文本模块。
修改 内容 的文本。 这是包含号召性用语或 促进 一份邀请。
- 文本：“加入我们的邮件列表，即可享受 10% 的订单折扣！” »
访问文本模块的样式选项卡并修改参数如下：
- 字体“文本”：Poppins
- “文字”暗光：中等
- “文本”文本颜色：#FFFFFF
接下来，在右侧添加 Button 模块。
添加按钮文本。
- 文本：“获取免费报价”
在样式选项卡中，将按钮居中对齐。
- 按钮对齐方式：居中
现在让我们自定义按钮的外观。
- 为“按钮”使用自定义样式：是
- 按钮文字大小：14px
- 按钮文字颜色：#FFFFFF
- 背景按钮：#2F5349
- 按钮边框宽度：0px
- 边框半径按钮：50px
- 按钮字母间距：1px
- 按钮字体：Poppins
添加全屏菜单模块
现在二级菜单已经设计好了，我们可以进入主菜单了。 我们将使用全屏菜单模块构建菜单。 将新的全屏部分添加到全局标题。
选择并插入全屏菜单模块
接下来，我们将自定义全屏菜单设置。
- 活动链接颜色：#2F5349
- 字体菜单：Poppins
- 暗光菜单：半粗体
- 复制样式菜单：TT
- 菜单文字颜色：#000000
- 悬停菜单文本颜色：#2F5349
- 菜单文字大小：15px
- 菜单字母间距：2px
将汉堡菜单图标颜色更改为黑色。
- 汉堡菜单图标颜色：#000000
在我们将徽标添加到菜单之前，让我们更改尺寸选项。 我们将使用 Divi 的内置响应选项为 PC 和移动设备设置不同的最大高度。
- PC 上的最大徽标高度：3vw
- 移动设备上的最大徽标高度：6vw
现在将您的徽标添加到全屏菜单。
最后，当用户滚动浏览网站时，我们希望主菜单保持在屏幕顶部，因此我们将为此使用 Divi 的内置粘性设置。
- 粘性位置：粘在上面
这样，我们的全局标题设计就完成了。
创建具有预定义布局的新页面
要查看全角标题和菜单的实际效果，让我们使用 Divi 库中的预定义布局创建一个新页面。 对于这个例子，我们将使用包中的 Flooring Home Page 楼层布局.
向您的网站添加一个新页面并为其命名，然后选择使用 Divi Builder 选项。
在本示例中，我们使用 Divi 库中的预制布局，因此选择选择布局。
找到并选择“Flooring Home Page”布局。
选择“选择布局”以将布局添加到您的页面。
现在设计完成了！
最终结果
结论
正如我们上面所说，标题和导航菜单是您网站用户体验的核心。 您现在已经看到使用 Divi 的“全屏菜单”模块设计令人惊叹的整体标题是多么容易。
幸运的是，Divi 的主题构建器让您可以控制网站菜单和标题的各个方面，只需单击几下，您就可以创建完全自定义和独特的设计。
您是否使用过 Divi 的全局标题选项来自定义标题和导航菜单？ 在评论中告诉我们您的想法！
