【divi教程】如何使用Divi的主题生成器创建自定义全局标题

我们开始吧！

预览

在我们开始本教程之前，让我们快速查看不同屏幕大小的结果。

PC端

手机端

1.设置主菜单

从在WordPress网站的外观设置中创建菜单开始。

2.转到主题生成器选项

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

3.添加和构建全局标头

默认的网站模板是您可以开始创建自定义全局页眉、全局正文和全局页脚的地方。单击“AddGlobalHeader”，然后单击“BuildGlobalHeader”继续进行该过程。

节设置

上浆

打开页面上可以注意到的部分，移动到“设计”选项卡，并在不同屏幕大小之间更改宽度。

• 宽度：100%
• 最大宽度：1280 px(桌面)，100%(平板和电话)

间距

删除所有默认的顶部和底部填充下一步。

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

边界

将一些边框半径添加到下一节的左下角和右角。

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

盒影

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

• 盒影模糊强度：60 px
• 阴影颜色：RGBA(0，0，0，0.13)

能见度

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

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

4.添加标头部分

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

行设置

背景色

在不向行添加任何模块的情况下，打开行设置并更改背景色。

• 背景色：#38383f

上浆

下一步修改行的大小设置。

• 使用自定义水槽宽度：是
• 排水沟宽度：1
• 宽度：100%
• 最大宽度：100%

显示

并通过在行的主元素中添加一行CSS代码，确保列在较小屏幕大小上彼此相邻。

将图像模块添加到第1列

上传标志

一旦完成了行设置，就该开始添加模块了。将图像模块添加到第1列并上载您的徽标。

对齐

继续到“设计”选项卡，确保您使用的是左图像对齐。

• 图像对齐：左

上浆

修改模块的宽度。

• 宽度：100 px

间距

并在不同屏幕大小上添加一些自定义空白值。

• 最高保证金：5%
• 左边框：50 px(桌面)，20 px(平板电脑和电话)

将社会媒体跟踪模块添加到第2栏

添加社会网络

继续到第二栏。在那里，我们需要一个社交媒体跟踪模块。添加你选择的社交网络。

社交网络背景色彩

然后，分别打开每个社交网络，并将背景颜色转换为一个完全透明的颜色。

• 背景颜色：RGBA(0，0，0，0)

对齐

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

• 模块对齐：中心

图标

也修改图标设置。

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

间距

再加上一些最上面的空白处。

• 最高保证金：10%

将按钮模块添加到第3列

添加副本

移到第三列，并添加一个按钮模块，其中包含您选择的一些副本。

对齐

更改“设计”选项卡中的按钮对齐方式。

• 按钮对齐：右

按钮设置

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

• 为按钮使用自定义样式：是
• 按钮文本大小：12 px(桌面)，10 px(平板电脑)，8 px(电话)
• 按钮文本颜色：#ffffff
• 按钮背景颜色：#ffae 25
• 按钮边框宽度：0 px

• 按钮边框半径：0px
• 按钮字母间距：5 px(桌面)，3 px(平板和电话)
• 按钮字体：打开SANS
• 按钮字体重量：粗体
• 按钮字体样式：大写

间距

并在不同屏幕大小上添加一些自定义填充值。

• 顶部填充物：20 px
• 底垫：20 px
• 左垫：50 px(桌面和平板电脑)，15 px(电话)
• 右垫：50 px(桌面和平板电脑)，15 px(电话)

5.将新行奉献给菜单栏

一旦完成了专用于全局标题的行，就可以使用以下列结构在其下面添加另一行：

行设置

上浆

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

• 使用自定义水槽宽度：是
• 排水沟宽度：1
• 宽度：100%
• 最大宽度：100%

间距

删除所有默认的顶部和底部填充下一步。

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

将菜单模块添加到列

选择菜单

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

布局

移至“设计”选项卡并按以下方式更改布局设置：

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

链接

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

• 活动链接颜色：#ffae 25

下拉菜单

对下拉菜单设置中的下拉菜单线颜色也做同样的操作。

• 下拉菜单线颜色：#ffae 25

图标

修改下面的汉堡包菜单图标颜色。

• 汉堡包菜单图标颜色：#ffae 25

菜单文本

以及菜单文本设置。

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

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

打开区段设置

一旦你完成了第二行，唯一要做的就是让这个部分粘在我们的页面和帖子的顶部。为此，我们将再次打开节设置。

将自定义CSS添加到主元素

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

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

完成整个全局标头设计后，请确保在退出模板布局之前保存设计。一旦你在模板布局之外，保存你的整个主题建设者的变化，你就完成了！

预览

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

PC端

手机端

更多DIVI主题教程，尽在看小程序网