如何使用 Divi 的粘性选项创建粘性标题

我们在设置网站时使用 Divi Theme Builder 的方式加快了我们的工作流程并使一切变得更容易。 尽管我们能够从 Divi Theme Builder 出现的第一天起创建自定义标题，但一直要求做一件事，即无需使用额外代码即可创建粘性标题。 使用 Divi 的新粘性选项，创建粘性标题变得比以往任何时候都容易。 Divi 提供的粘性设置将毫不费力地帮助您将任何设计元素变为粘性并将自定义样式分配到粘性状态，从而带来无限的设计和用户体验可能性。

在本教程中，我们将向您展示如何创建包含以下内容的粘性标题：

• 我们正在创建的标题有一个顶部标题栏 + 一个菜单栏
• 当您经过它时，我们会将包含菜单栏的部分变为粘性，一旦您返回顶部，标题栏就会再次出现
• 一旦该部分变为粘性，我们将更改粘性部分（及其元素）的设计样式

让我们开始吧！

预览

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

桌面

移动的

免费下载全局标题模板

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

下载文件

免费下载

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

下载

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

1. 在新的标题模板中构建标题元素结构

创建新的全局标题模板

转到 Divi Theme Builder 并开始构建新的全局或自定义标题。

部分 #1 设置

渐变背景

进入模板编辑器后，我们将首先构建标题的元素结构。 在本教程的第二部分，我们将专注于应用不同的粘性设置来完成我们的粘性标题设计。 在模板编辑器中，您会注意到一个部分。 打开该部分并应用渐变背景。

• 颜色 1：#ffba60
• 颜色 2：#ffd6a0
• 梯度方向：90度
• 起始位置：50%
• 结束位置：50%

间距

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

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

添加新行

列结构

为了创建我们的顶部标题栏，我们将使用以下列结构向我们的部分添加一个新行：

浆纱

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

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

间距

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

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

主要元素 CSS

并且为了确保列在较小的屏幕尺寸上保持彼此相邻，我们将向高级选项卡中行的主要元素添加一行 CSS 代码。

display: flex;

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

添加选择的社交网络

是时候添加模块了，从第 1 列中的社交媒体关注模块开始。添加您选择的社交网络及其相应的链接。

删除每个社交网络的背景颜色

继续单独删除社交网络的每一种背景颜色。

图标设置

然后，返回常规模块设置并更改设计选项卡中的图标颜色。

• 图标颜色：#26333a

间距

也添加一些上边距。

• 上边距：5px

将按钮模块添加到第 2 列

添加副本

在第 2 列中，我们唯一需要的模块是按钮模块。 添加一些您选择的副本。

添加链接

接下来加个链接。

按钮对齐

然后，转到设计选项卡并更改按钮对齐方式。

• 按钮对齐：右

按钮设置

我们也在设计按钮的样式。

• 为按钮使用自定义样式：是
• 按钮文字大小：14px
• 按钮文字颜色：#26333a
• 按钮边框宽度：2px
• 按钮边框颜色：#26333a
• 按钮边框半径：0px

• 按钮字母间距：4px
• 按钮字体粗细：粗体
• 按钮字体样式：大写
• 显示按钮：是

间距

我们将通过向间距设置添加一些顶部和底部填充来完成模块设置。

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

添加第 2 节

渐变背景

在上一个正下方添加另一个常规部分。 本节将专门介绍我们的菜单，并将在本教程的第二部分变为粘性。 添加该部分后，应用渐变背景。

• 颜色 1：#ffffff
• 颜色 2：#f7f7f7
• 渐变类型：线性
• 梯度方向：90度
• 起始位置：25%
• 结束位置：25%

间距

转到该部分的设计选项卡并删除所有默认的顶部和底部填充。

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

添加新行

列结构

继续使用以下列结构向该部分添加新行：

浆纱

移至行的设计选项卡并按如下方式更改大小设置：

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

间距

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

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

将菜单模块添加到列

选择菜单

然后，将菜单模块添加到行的列并选择您选择的动态菜单。

上传标志

接下来上传徽标。

删除背景颜色

然后，删除模块的默认白色背景色。

菜单文字设置

转到设计选项卡并设置菜单文本设置的样式。

• 菜单字体粗细：粗体
• 菜单文字颜色：#002d4c
• 菜单文字大小：15px
• 菜单字母间距：4px
• 文本对齐：右

下拉菜单文本设置

然后，对下拉菜单设置进行一些更改。

• 下拉菜单背景颜色：#ffffff
• 下拉菜单行颜色：#002d4c

图标设置

随着图标设置。

• 购物车图标颜色：#002d4c
• 搜索图标颜色：#002d4c
• 汉堡菜单图标颜色：#002d4c

浆纱

并通过向尺寸设置添加徽标最大高度来完成模块设置。

• 标志最大高度：60px

2. 应用自定义粘性效果

将第 2 部分变为粘性

现在我们已经创建了标题的元素结构，是时候将我们的第二部分变成粘性并改变它的设计风格及其处于粘性状态的元素。 打开第二部分的设置并转到高级选项卡。 在那里，转到滚动效果设置并应用以下粘性选项：

• 粘滞位置：粘在顶部
• 粘性顶部偏移：0px
• 底部粘性限制：无
• 从周围的粘性元素偏移：是
• 过渡默认和粘性样式：是

在粘性状态下更改部分的渐变背景

现在我们的部分已经变成了粘性，我们的部分、行和模块设置中将出现一个附加选项； 粘性选项。 当您单击此图标时，您将能够为处于粘性状态时选择的元素创建替代样式。 我们将结合这些粘性设计设置中的几个来自定义滚动时粘性标题的外观和感觉。 首先转到第二部分的背景设置并应用以下粘性渐变背景：

• 颜色 1：#26333a
• 颜色 2：#1e272f

在粘性状态下拉伸行

接下来，我们将打开包含菜单模块的行，并在粘性状态下修改宽度。

• 宽度：95%

在粘性状态下删除行填充

我们也删除了我们行的粘性顶部和底部填充。

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

在粘性状态下更改菜单文本颜色

接下来，我们将更改处于粘性状态的菜单文本颜色。

• 菜单文字颜色：#ffbd68

在粘性状态下更改菜单图标颜色

随着图标颜色。

• 购物车图标颜色：#ffffff
• 搜索图标颜色：#ffffff
• 汉堡菜单图标颜色：#ffffff

去除粘性状态下的徽标高度

最后但并非最不重要的一点是，我们将在粘性状态下将徽标最大高度更改为零。 一旦启用了该部分的粘性设置，这将从我们的标题中完全删除徽标。 就是这样！ 完成标题设计并在您的网站上预览后​​，请确保保存所有 Divi Theme Builder 更改。

• 标志最大高度：0px

预览

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

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何使用 Divi 的主题生成器和粘性选项创建粘性标题。 一旦包含我们菜单的部分变为粘性，我们也会应用自定义样式。 新的 Divi 粘性选项使这些选项成为可能，这些选项为您提供无数的可能性来改善用户体验和您创建的设计。 您还可以免费下载全局标题模板！ 如果您有任何问题或建议，请随时在下面的评论部分发表评论。

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