如何在使用 Divi 的粘性选项滚动之前隐藏标题

英雄部分是您网站的引人注目之处。 它通常为网站的其余部分定下基调，并向访问者展示他们的期望。 这就是为什么确保所有重点都放在您在英雄部分分享的少数元素上会很有帮助，例如文案和号召性用语。 但仅仅因为您想突出显示英雄部分，并不意味着您也不需要导航栏。 如果您正在寻找一种用户友好的方式来在人们开始滚动时显示您的标题，那么您会喜欢这篇文章。 今天，我们将向您展示如何使用 Divi 的内置粘性选项在滚动前隐藏标题。 我们实现的效果是完全响应的，并且在所有屏幕尺寸上看起来都很棒。 您也可以免费下载模板 JSON 文件！

让我们开始吧。

预览

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

桌面

移动的

免费下载标题模板

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

下载文件

免费下载

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

下载

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

将模板上传到 Divi Theme Builder 并输入模板时，您会注意到该部分不可见。 那是因为效果已经应用到它了。 要修改不同的元素，您可以切换到线框模式并访问那里的元素，或者暂时删除部分转换转换和主元素设置，并在完成标题设计修改后将它们放回原处。

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

创建新的全局标题模板

首先转到Divi Theme Builder。 在那里，开始构建新的全局或自定义标头。

部分设置

背景颜色

进入模板编辑器后，您会注意到一个部分。 打开部分设置并更改背景颜色。

• 背景颜色：#001b34

间距

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

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

添加新行

列结构

继续使用以下列结构添加新行：

背景颜色

尚未添加模块，打开行设置并应用您选择的背景颜色。

• 背景颜色：#001b34

浆纱

转到行的设计选项卡并相应地更改大小设置：

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

间距

继续相应地更改填充值：

• 顶部填充：0px
• 底部填充：0
• 左填充：
  • 桌面： /
  • 平板电脑和手机：5%
• 右填充：
  • 桌面： /
  • 平板电脑和手机：5%

第 1 列设置

背景颜色

完成常规行设置后，打开第 1 列设置并应用背景颜色。

• 背景颜色：#f4d5b8

将菜单模块添加到第 1 列

选择菜单

是时候添加模块了，从第 1 列中的菜单模块开始。选择您选择的菜单。

上传标志

接下来上传徽标。

背景颜色

然后，更改背景颜色。

• 背景颜色：#063765

背景图片

并上传您选择的插图背景图片。 您可以通过下载本文开头的免费赠品来找到并使用以下内容。

• 背景图片尺寸：适合
• 背景图片位置：中心

菜单文字设置

转到模块的设计选项卡并更改菜单文本大小。

• 菜单文字大小：18px

下拉菜单设置

然后，相应地更改下拉菜单设置：

• 下拉菜单行颜色：rgba(0,0,0,0)
• 移动菜单背景颜色：#ddc1a7
• 移动菜单文本颜色：#063765

图标设置

将图标设置中的图标颜色也更改为白色。

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

浆纱

然后，在大小设置中修改徽标最大宽度。

• 标志最大宽度：70px

间距

接下来应用一些自定义填充值。

• 顶部填充：1%
• 底部填充：1%
• 左填充：5%
• 右填充：5%

盒子阴影

随着一些自定义框阴影。

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

转换 翻译

并通过修改transform translate设置完成模块设置如下：

• 对：
  • 桌面：20px
  • 平板电脑和手机：0px

将按钮模块添加到第 2 列

添加副本

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

按钮对齐

移至设计选项卡并更改按钮对齐方式。

• 按钮对齐：右

按钮设置

然后，相应地设置按钮样式：

• 为按钮使用自定义样式：是
• 按钮文字大小：16px
• 按钮文字颜色：#2a2a2a
• 按钮背景颜色：#ffffff
• 按钮边框宽度：0px
• 按钮边框颜色：rgba(0,0,0,0)

• 按钮字体粗细：粗体
• 按钮字体样式：大写

间距

也使用自定义填充为您的按钮赋予一些形状。

• 顶部填充：20px
• 底部填充：20px
• 左填充：40px
• 右填充：40px

盒子阴影

接下来，应用框阴影。

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

转换 翻译

并通过相应地修改转换转换值来完成模块设置：

• 对：
  • 桌面：50px
  • 平板电脑和手机：0px

2. 应用自定义粘性效果来实现滚动前隐藏效果

使行绝对定位

现在我们已经设置了标题的基础，我们可以在滚动效果之前应用隐藏标题。 您可以将此效果应用于您构建的任何标题，只要您按照以下步骤操作即可。 第一步是打开行设置并将行转为绝对值。 这将帮助我们防止页面顶部的标题占用空间。

• 位置：绝对
• 位置：左上角

使部分具有粘性

接下来，我们将打开部分设置并允许它粘在顶部。

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

部分动画

我们也将向我们的部分添加动画。 此动画将有助于防止页面加载时显示标题。

• 动画风格：淡入淡出

部分过渡持续时间

一旦开始滚动，您可以通过修改部分高级选项卡中的过渡持续时间，自行决定标题向下滑动的速度。 持续时间越长，标题滑下的速度就越慢。

• 转换持续时间：800ms

部分转换 翻译

现在，在默认状态下，我们不希望标题可见。 实现这一目标的第一步是进入截面的变换设置并为 Y 轴使用负值。

• 右：-300px

我们将在粘性状态下将此值恢复为零。 这意味着一旦您开始滚动，标题就会再次可见。

• 粘性右侧：0px

部分可见性 CSS 属性

本教程的下一步和最后一步在理论上不需要达到效果，但隐藏不使用的元素是一个很好的做法。 这就是为什么我们将转到该部分的高级选项卡并在主元素框中添加以下 CSS 代码行：

• 主要元素：

  visibility: hidden

我们将把我们的内容改回可见的粘性状态。 就是这样！

• 粘性主要元素：

  visibility: visible;

预览

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

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何在人们进入您的页面后立即确保您的英雄部分成为您页面的焦点。 更具体地说，我们已经向您展示了如何在滚动前隐藏标题。 这允许您的访问者在获得导航能力之前先处理英雄部分信息。 您也可以免费下载 JSON 文件！ 如果您有任何问题或建议，请随时在下面的评论部分发表评论。

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