如何使用 Divi 的主题生成器创建自定义全局标题

既然主题生成器就在这里，我们迫不及待地想深入了解新教程，这些教程将帮助您从头到尾设置您的网站。这包括使用 Divi 的内置选项创建自定义标题。 在本教程中，我们将专注于使用 Divi 的 Theme Builder 创建全局标题。 除非您为该页面或帖子分配了不同的标题，否则全局标题将显示在您网站上的任何地方。

让我们开始吧！

预览

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

桌面

移动的

免费下载自定义页眉设计

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

下载文件

免费下载

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

下载

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

订阅我们的 YouTube 频道

1. 设置您的主菜单

首先在 WordPress 网站的外观设置中创建菜单。

2. 转到主题生成器选项

然后，导航到 Divi 的主题选项中的主题生成器。 在那里，您会注意到一个空的默认网站模板。

3. 添加和构建全局标题

默认网站模板是您可以开始创建自定义全局页眉、全局正文和全局页脚的地方。 单击“添加全局标题”并继续单击“构建全局标题”以开始该过程。

部分设置

浆纱

打开您可以在页面上注意到的部分，转到设计选项卡并更改不同屏幕尺寸的宽度。

• 宽度：100%
• 最大宽度：1280 像素（桌面），100%（平板电脑和手机）

间距

接下来删除所有默认的顶部和底部填充。

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

边界

在接下来的部分的左下角和右下角添加一些边框半径。

• 左下角：50px
• 右下角：50px

盒子阴影

我们还添加了一个微妙的框阴影。

• 框阴影模糊强度：60px
• 阴影颜色：rgba(0,0,0,0.13)

能见度

然后，转到高级选项卡并隐藏溢出。 也增加 z 索引，这将有助于确保该部分保留在所有页面内容的顶部。

• 水平溢出：可见
• 垂直溢出：可见
• Z指数：99999

4. 将新行专用于标题

现在我们已经完成了常规部分的设置，我们可以开始添加行了。 我们总共需要两行； 一个专用于标题，另一个允许显示菜单项。 我们将从标题开始，使用以下列结构添加一个新行：

行设置

背景颜色

不向行添加任何模块，打开行设置并更改背景颜色。

• 背景颜色：#38383f

浆纱

接下来修改行的大小设置。

• 使用自定义装订线宽度：是
• 天沟宽度：1
• 宽度：100%
• 最大宽度：100%

展示

并通过向行的主要元素添加一行 CSS 代码来确保列在较小的屏幕尺寸上彼此相邻。

display: flex;

将图像模块添加到第 1 列

上传标志

完成行设置后，就可以开始添加模块了。 将图像模块添加到第 1 列并上传您的徽标。

结盟

转到设计选项卡并确保您使用左图像对齐。

• 图像对齐：左

浆纱

也修改模块的宽度。

• 宽度：100px

间距

并在不同的屏幕尺寸中添加一些自定义边距值。

• 上边距：5px
• 左边距：50px（桌面），20px（平板和手机）

将社交媒体关注模块添加到第 2 列

添加社交网络

进入第二列。 在那里，我们需要一个社交媒体关注模块。 添加您选择的社交网络。

社交网络背景颜色

然后，单独打开每个社交网络并将背景颜色更改为完全透明的。

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

结盟

返回模块的正常设置，然后更改整个模块对齐方式。

• 模块对齐：居中

图标

也修改图标设置。

• 图标颜色：#ffffff
• 使用自定义图标大小：是
• 图标字体大小：16px（桌面和平板电脑），12px（手机）

间距

并添加一些上边距。

• 上边距：10px

将按钮模块添加到第 3 列

添加副本

移至第三列并添加带有您选择的一些副本的按钮模块。

结盟

在设计选项卡中更改按钮对齐方式。

• 按钮对齐：右

按钮设置

相应地设置按钮设置的样式：

• 为按钮使用自定义样式：是
• 按钮文字大小：12px（桌面）、10px（平板电脑）、8px（手机）
• 按钮文字颜色：#ffffff
• 按钮背景颜色：#ffae25
• 按钮边框宽度：0px

• 按钮边框半径：0px
• 按钮字母间距：5px（桌面），3px（平板电脑和手机）
• 按钮字体：Open Sans
• 按钮字体粗细：粗体
• 按钮字体样式：大写

间距

并在不同的屏幕尺寸中添加一些自定义填充值。

• 顶部填充：20px
• 底部填充：20px
• 左填充：50px（桌面和平板电脑），15px（手机）
• 右内边距：50px（桌面和平板电脑），15px（手机）

5. 将新行专用于菜单栏

完成专用于全局标题的行后，您可以使用以下列结构在其正下方添加另一行：

行设置

浆纱

在不添加任何模块的情况下，打开行设置并在设计选项卡中更改大小设置。

• 使用自定义装订线宽度：是
• 天沟宽度：1
• 宽度：100%
• 最大宽度：100%

间距

接下来删除所有默认的顶部和底部填充。

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

将菜单模块添加到列

选择菜单

然后，将菜单模块添加到该列并选择您在本教程的第一部分中创建的菜单。

布局

转到设计选项卡并按如下方式更改布局设置：

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

链接

也修改设计选项卡中的活动链接颜色。

• 活动链接颜色：#ffae25

下拉式菜单

对下拉菜单设置中的下拉菜单行颜色执行相同操作。

• 下拉菜单行颜色：#ffae25

图标

接下来修改汉堡菜单图标颜色。

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

菜单文字

随着菜单文本设置。

• 菜单字体：Prata
• 菜单文字颜色：#000000

6. 使标题和菜单栏保持在顶部

打开部分设置

完成第二行后，唯一要做的就是将该部分粘贴到我们页面和帖子的顶部。 为此，我们将再次打开部分设置。

将自定义 CSS 添加到主元素

然后，我们将转到高级选项卡，我们将向该部分的主要元素添加几行 CSS 代码。

position: fixed;
top: 0;
left: 0;
right: 0;

7. 保存全局标题和主题生成器选项

完成整个全局标题设计后，请确保在退出模板布局之前保存设计。 一旦您在模板布局之外，保存整个主题构建器的更改，您就完成了！

预览

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

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何使用 Divi 的新主题生成器创建自定义全局标题。 本教程将展示创建漂亮的标题并将它们应用于整个网站或特定的自定义帖子类型是多么容易。 我们希望本教程能激励您立即开始使用 Theme Builder！ 如果您有任何问题或建议，请确保在下面的评论部分发表评论。

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