创建全局标头时，需要考虑许多事项。您放置在标题中的元素需要帮助访问者轻松导航。为了减少人们花在导航上的时间，许多Web设计师选择固定的顶部标题，以允许访问者立即转到其他页面或帖子。这确实很方便，但是在创建固定的标头时，会占用访问者视口高度的很大一部分，从而允许一次显示较少的内容。如果您不愿意做出这种牺牲，请知道您不必这样做。通过允许全局标头显示访问者何时向上滚动并在访客向下滚动时隐藏全局标题，您可以享受固定标头的好处。今天，我们将指导您使用Divi的主题生成器隐藏和显示全局标题。

让我们开始吧。

预习

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

桌面

移动

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

转到Divi Theme Builder

首先转到Divi Theme Builder。

开始建立全球标题

在那里，单击“添加全局标题”，然后选择“构建全局标题”。

2.开始构建全局头

区域设置

背景颜色

在模板编辑器中，您会注意到一个部分。打开该部分并更改其背景颜色。

背景颜色：#ffffff

浆纱

转到设计选项卡，然后为您的部分分配100％的宽度。

宽度：100％

间距

也添加一些自定义的顶部和底部填充。

最高填充：2vw

底部填充：2vw

框影

我们还将对我们的部分应用微妙的阴影。

方块阴影模糊强度：50像素

阴影颜色：rgba(0,0,0,0.08)

CSS ID

在本教程的后面，我们将需要一些自定义代码来实现滚动效果。为此，我们在该部分添加了CSS ID。

CSS ID：global-header-section

主要元素

通过将两行CSS代码添加到该部分的主元素，我们还将该部分变成固定的头部。

Z指数

现在，为确保我们的部分出现在所有页面或帖子内容的顶部，我们还将在可见性设置中增加z索引。

Z索引：99999

添加新行

列结构

完成所有部分的设置后，请使用以下列结构在该部分中添加新行：

浆纱

尚未添加任何模块，请打开行设置，并允许该行占用屏幕的整个宽度。

使用自定义装订线宽度：是

装订线宽度：1

均衡柱高：是

宽度：100％

最大宽度：100％

间距

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

最高填充：0px

底部填充：0px

主要元素

通过在行的主要元素中添加两行CSS代码，使列内容居中，并允许列在较小的屏幕尺寸上彼此相邻。

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

添加社交网络

是时候添加模块了，从第1列的“社交媒体关注模块”开始。添加要显示的社交网络。

重置个人社交网络样式

通过在单个级别上重置每个社交网络的样式来继续。

添加个人社交网络间距

您还需要分别打开每个社交网络的设置，并在间距设置中添加底部填充。

底部填充：0.5vw

对准

将底部填充单独添加到每个社交网络后，请返回常规模块设置。转到设计选项卡，然后更改模块对齐方式。

模块对齐：居中

默认图标设置

也可以在图标设置中更改图标颜色。

图标颜色：＃000000

悬停图标设置

并在悬停时修改图标颜色。

图标颜色：＃c2ab92

边境

通过在边框设置中添加底部边框来完成模块的设置。

底边框宽度：1px

底部边框颜色：＃000000

将菜单模块添加到第2列

选择菜单

进入下一篇专栏！添加菜单模块，然后选择所需的菜单。

上传徽标

接下来将徽标上传到模块。

移除背景色

并删除背景色。

布局

然后，转到设计选项卡，并确保以下设置适用于布局：

风格：居中

下拉菜单方向：向下

默认菜单文字

继续更改菜单文本设置，如下所示：

活动链接颜色：＃c2ab92

菜单字体：Cor

文字颜色：＃000000

菜单文字大小：1vw(台式机)，2vw(平板电脑)，3vw(电话)

悬停菜单文本

修改悬停菜单文本。

菜单文字颜色：＃c2ab92

下拉式菜单

接下来，在下拉菜单设置中更改下拉菜单的行颜色。

下拉菜单行颜色：＃000000

图示

我们也在图标设置中更改了汉堡菜单图标的颜色。

汉堡菜单图标颜色：＃000000

浆纱

在大小调整设置中，跨不同屏幕尺寸更改徽标最大宽度，以继续。

徽标最大宽度：5vw(台式机)，10vw(平板电脑)，13vw(电话)

菜单链接CSS

并通过在高级选项卡中的模块菜单链接中添加两行CSS代码来完成模块的设置。

将文本模块添加到第3列

添加副本

进入最后一个模块！在那里，我们唯一需要的模块是文本模块。

添加链接

该模块将用作CTA。添加您选择的链接。

模块链接URL：＃

默认文字设置

转到模块的设计选项卡，并相应地更改文本设置：

文字字体：Cor Garamond

文字颜色：＃000000

文字大小：1vw(台式机)，2vw(平板电脑)，3vw(电话)

悬停文字设定

悬停时更改文本颜色。

文字颜色：＃c2ab92

浆纱

通过在不同屏幕尺寸上更改模块的大小设置来继续。

宽度：12vw(台式机)，18vw(平板电脑)，22vw(电话)

模块对齐：居中

间距

并在间距设置中添加一些底部填充。

底部填充：0.5vw

边境

通过添加底部边框完成模块的设置。

底边框宽度：1px

底部边框颜色：＃000000

将代码模块添加到第2列

插入JQuery和CSS代码

在为行中的所有模块设置样式之后，就该使显示/隐藏效果发生了。为此，我们需要向代码模块中添加一些自定义代码，并将其放置在第2列中。无论您如何设计标题或使用什么模块，此代码都可以在您添加的任何部分上使用。确保已将CSS ID添加到您的部分。如下图所示，将JQuery代码放在脚本标签之间，将CSS代码放在样式标签之间。

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

完成全局标题后，保存所有更改并在您的网站上查看结果！

预习

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

桌面

移动