如何使用 Divi 的 Theme Builder 创建全局透明浮动菜单栏

正在寻找一种方法将全局标题放在页面的英雄部分之上？ 在今天的 Divi 教程中，我们将向您展示如何做到这一点。 我们将从头开始（使用 Divi 的 Theme Builder）重新创建一个令人惊叹的全局标题，并将浮动效果应用于菜单栏。 您也可以免费下载 JSON 文件！

让我们开始吧。

预览

在我们深入学习教程之前，让我们快速浏览一下不同屏幕尺寸的结果。

桌面

移动的

免费下载浮动菜单栏全局标题模板

要将您的手放在浮动菜单栏全局标题模板上，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

订阅我们的 YouTube 频道

1.转到Divi Theme Builder并添加新模板

转到 Divi 主题生成器

首先转到Divi Theme Builder。

开始构建全局标题

然后，单击“添加全局标题”并选择“构建全局标题”继续。

2. 开始构建全局标题

部分设置

背景颜色

进入模板编辑器后，您会注意到页面上的一个部分。 打开该部分并将背景颜色更改为完全透明的颜色。 这将允许显示该部分下方的所有内容。

• 背景颜色：rgba(0,0,0,0)

浆纱

接下来转到该部分的设计选项卡并更改宽度。

• 宽度：100%

间距

也删除所有默认的顶部和底部填充。

• 顶部填充：0px
• 底部填充：0px

Z索引

并且为了确保该部分保持在所有英雄部分内容的顶部，我们需要在可见性设置中增加该部分的 z 索引。

• Z指数：99999

添加新行

列结构

完成部分设置后，您可以使用以下列结构添加新行：

浆纱

在不添加任何模块的情况下，打开行设置并按如下方式更改大小设置：

• 均衡柱高：是
• 宽度：100%
• 最大宽度：100%

间距

接下来添加一些自定义的顶部和底部填充。

• 顶部填充：2vw
• 底部填充：0vw

主要元素

然后，转到高级选项卡，通过向行的主要元素添加一行 CSS 代码，确保列在较小的屏幕尺寸上保持彼此相邻。

display: flex;

第 2 栏

背景颜色

继续打开第 2 列设置并将背景颜色更改为半透明颜色。

• 背景颜色：rgba(255,255,255,0.71)

边界

也向列添加底部边框。

• 底部边框宽度：2px
• 底部边框颜色：#f4583f

盒子阴影

并通过添加微妙的框阴影来创建浮动效果。

• 框阴影垂直位置：20px
• 框阴影模糊强度：50px
• 框阴影传播强度：-20px
• 阴影颜色：rgba(0,0,0,0.23)

将图像模块添加到第 1 列

上传标志

完成行和列设置后，就可以添加模块了，从第 1 列中的图像模块开始。上传具有透明背景的徽标。

结盟

移至模块的设计选项卡并更改对齐方式。

• 图像对齐：居中

浆纱

也在大小设置中更改模块的宽度。

• 宽度：8vw（桌面）、14vw（平板电脑）、21vw（手机）

将菜单模块添加到第 2 列

选择菜单

进入下一栏。 在那里，我们唯一需要的模块是菜单模块。 选择您选择的菜单。

删除背景颜色

然后，转到背景设置并删除背景颜色。

布局

转到模块的设计选项卡并更改布局。

• 风格：居中
• 下拉菜单方向：向下

菜单文字

也可以设置菜单文本设置的样式。

• 菜单字体：Muli
• 菜单文字颜色：#6f6666
• 菜单文字大小：1vw（桌面）、2vw（平板电脑）、3vw（手机）

下拉式菜单

接下来更改下拉菜单设置。

• 下拉菜单行颜色：#f4583f

图标

在图标设置中为汉堡菜单图标颜色使用相同的颜色。

• 汉堡菜单图标颜色：#f4583f

间距

通过在间距设置中添加一些顶部和底部填充来完成模块的设置。

• 顶部填充：1.5vw
• 底部填充：1.5vw

将按钮模块添加到第 3 列

添加副本

转到下一列和最后一列。 添加带有您选择的一些副本的按钮模块。

结盟

接下来更改模块的对齐方式。

• 按钮对齐：居中

按钮设置

继续相应地设置按钮样式：

• 为按钮使用自定义样式：是
• 按钮文字大小：0.9vw（桌面）、1.5vw（平板电脑）、2.5vw（手机）
• 按钮文字颜色：#ffffff
• 按钮背景颜色：#f4583f
• 按钮边框宽度：0px
• 按钮边框颜色：#f4583f
• 按钮边框半径：0px

• 按钮字体：Muli
• 按钮字体粗细：粗体

间距

并通过在不同的屏幕尺寸上添加一些自定义填充来完成模块的设置。

• 顶部填充：1vw（桌面）、2vw（平板电脑）、3vw（手机）
• 底部填充：1vw（桌面）、2vw（平板电脑）、3vw（手机）
• 左填充：2vw（桌面）、3vw（平板电脑）、4vw（手机）
• 右填充：2vw（桌面）、3vw（平板电脑）、4vw（手机）

附加部分设置

默认主元素

完成整体设计后，还有一件事要做； 将该部分放在页面内容的顶部。 为此，我们需要向该部分的主要元素添加两行 CSS 代码。

position: absolute;
top: 0;

悬停主元素

确保将这些相同的 CSS 代码行添加到主元素的悬停选项中。 一旦您将其悬停，这将防止该部分闪烁。

position: absolute;
top: 0;

3. 保存构建器更改并查看结果

完成该部分后，您可以保存全局标题并在您的网站上查看结果！

预览

现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何使用 Divi 的 Theme Builder 创建浮动菜单栏。 这是混合标题和英雄部分的好方法。 标题位于页面或帖子第一部分的顶部。 您也可以免费下载 JSON 文件！ 如果您有任何问题或建议，请随时在下面的评论部分发表评论！

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品，请确保订阅我们的电子邮件时事通讯和 YouTube 频道，这样您将永远是第一批了解此免费内容并从中受益的人之一。