如何使用 Divi 使透明标题在滚动时具有粘性
已发表: 2020-09-23在为您的网站设置全局标题时，有很多方法可以实现。 一种更微妙的方法是透明标题。 透明的标题放置在页面的主要部分的顶部，这可以产生专注于最小但清晰方法的漂亮设计。 如果您决定使用透明标题但需要滚动时使用粘性标题，那么您会喜欢本教程。 使用 Divi 的内置粘性选项，我们将向您展示如何在滚动时从透明标题变为不同样式的粘性标题。 透明和粘性之间的过渡毫不费力！ 您也可以免费下载 JSON 文件。
让我们开始吧。
预览
在我们深入学习教程之前，让我们快速浏览一下不同屏幕尺寸的结果。
桌面
移动的
免费下载全局标题模板
要使用免费的全局标题模板，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
免费下载
加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。
您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！
1. 在新的标题模板中构建标题元素结构
创建新的全局标题模板
首先转到Divi Theme Builder。 在那里，开始构建新的全局或自定义标头。
部分 #1 设置
背景颜色
进入模板编辑器后，您会注意到一个部分。 本节将专门介绍您可以在这篇文章的预览中注意到的顶部标题栏。 打开该部分的设置并添加黑色背景色。
- 背景颜色：#000000
间距
转到该部分的设计选项卡并删除所有默认的顶部和底部填充。
- 顶部填充：0px
- 底部填充：0px
添加新行
列结构
继续使用以下列结构添加新行：
将文本模块添加到列
添加内容
将文本模块添加到行的列并输入您选择的一些副本。
文字设置
转到模块的设计选项卡并相应地更改文本设置：
- 文字字体：Oswald
- 文本字体样式：大写
- 文字颜色：#ffffff
- 字体大小：
- 桌面：19px
- 平板电脑：18px
- 电话：16px
- 文本对齐：居中
添加第 2 节
间距
在第一部分的正下方，添加另一个常规部分。 本节将专门介绍我们将在滚动时变为粘性的透明菜单。 打开部分设置并删除设计选项卡中的所有默认顶部和底部填充。
- 顶部填充：0px
- 底部填充：0px
添加新行
列结构
继续使用以下列结构添加新行：
透明背景色
打开行设置并对行应用完全透明的背景色。
- 背景颜色：rgba(255,255,255,0)
浆纱
移至行的设计选项卡并修改大小设置。
- 使用自定义装订线宽度：是
- 天沟宽度：1
- 宽度：100%
- 最大宽度：100%
间距
接下来添加一些自定义的左右填充。
- 左填充：10%
- 右填充：10%
盒子阴影
然后，应用透明框阴影。 在本教程的后面，我们将在具有不同阴影颜色的粘性状态下使用此框阴影。
- 框阴影模糊强度：50px
- 阴影颜色：rgba(0,0,0,0)
位置
为了确保该行出现在页面内容的顶部，并具有透明背景，我们将在高级选项卡中为我们的行使用绝对位置。
- 位置：绝对
- 位置：左上角
第 2 列可见性
我们还在平板电脑和手机上隐藏了我们行的第二列，以便在较小的屏幕尺寸上有一个不太复杂的标题设计。
将菜单模块添加到第 1 列
选择菜单
现在我们的行设置已经到位，是时候添加模块了，从第 1 列中的菜单模块开始。选择您选择的菜单。
上传标志
接下来上传徽标。
删除背景颜色
也删除模块的背景颜色。
菜单文字设置
转到模块的设计选项卡并相应地更改菜单文本设置：
- 菜单字体：Oswald
- 菜单字体粗细：粗体
- 菜单字体样式：大写
- 菜单文字颜色：#efefef
- 菜单文字大小：18px
- 文本对齐：右
下拉菜单设置
也更改下拉菜单设置。
- 下拉菜单行颜色：rgba(0,0,0,0)
- 移动菜单背景颜色：rgba(0,0,0,0.95)
图标设置
然后，在图标设置中更改图标颜色。
- 购物车图标颜色：#ffffff
- 搜索图标颜色：#ffffff
- 汉堡菜单图标颜色：#ffffff
标志设置
我们也通过更改图像反转过滤器来更改徽标设置中徽标的颜色。
- 图像反转：90%
浆纱
然后，我们将为徽标分配最大高度。
- 标志最大高度：40px
间距
接下来，我们将在较小的屏幕尺寸上添加一些顶部和底部填充。
- 顶部填充：
- 平板电脑和手机：10px
- 底部填充：
- 平板电脑和手机：10px
将按钮模块添加到第 2 列
添加副本
在第 2 列中，我们唯一需要的模块是按钮模块。 添加一些您选择的副本。
按钮对齐
转到模块的设计选项卡并更改按钮对齐方式。
- 按钮对齐：右
按钮设置
接下来设置按钮样式。
- 为按钮使用自定义样式：是
- 按钮文字大小：16px
- 按钮文字颜色：#ffffff
- 按钮背景颜色：#ed4441
- 按钮边框颜色：#ed4441
- 按钮边框半径：0px
- 按钮字母间距：4px
- 按钮字体：Oswald
- 按钮字体粗细：粗体
- 按钮字体样式：大写
- 显示按钮图标：是
- 按钮图标颜色：#1a1a1a
间距
并通过添加一些自定义间距值来完成模块设置。
- 上边距：-70px
- 顶部填充：25px
- 底部填充：25px
2. 应用自定义粘性效果
将第 2 部分变为粘性
现在我们已经设置了标题的基础，是时候应用粘性效果了！ 为此，首先打开第二部分的设置并将以下粘性设置应用到高级选项卡：
- 粘滞位置：粘在顶部
- 粘性顶部偏移：0px
- 底部粘性限制：无
- 从周围的粘性元素偏移：是
- 过渡默认和粘性样式：是
粘性行背景颜色
现在启用了粘性选项，我们可以对部分内的所有元素进行粘性设计更改。 我们将首先打开包含菜单的行并应用白色粘性背景色。
- 背景颜色：#FFFFFF
粘性行间距
接下来，我们将修改行的粘性间距值。
- 顶部填充：0px
- 底部填充：0px
粘性行框阴影
我们也在粘性状态下更改框阴影颜色。
- 阴影颜色：rgba(0,0,0,0.08)
粘性行定位
然后，我们将在粘性状态下将行定位恢复为相对。
- 职位：相对
- 偏移原点：左上角
粘性菜单文本设置
接下来，我们将更改粘性菜单文本颜色。
- 菜单文字颜色：#000000
粘性菜单下拉设置
随着菜单下拉设置中的移动菜单背景颜色。
- 移动菜单背景颜色：#ffffff
粘性菜单图标颜色
更改粘性状态下的图标颜色。
- 购物车图标颜色：#000000
- 搜索图标颜色：#000000
- 汉堡菜单图标颜色：#000000
粘性徽标过滤器
然后，移除处于粘性状态的徽标图像反转过滤器。
- 图像反转：0%
粘滞按钮间距
并通过在粘性时移除按钮的负上边距来完成教程。
- 上边距：0px
预览
现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。
桌面
移动的
最后的想法
在这篇文章中，我们向您展示了如何将 Divi 的 Theme Builder 与新的粘性选项结合起来。 更具体地说，我们向您展示了如何在滚动时从透明标题变为不同样式的粘性标题。 这种方法允许您将页面设计与菜单合并，同时在滚动时仍保持漂亮的粘性标题。 您也可以免费下载 JSON 文件！ 如果您有任何问题或建议，请随时在下面的评论部分发表评论。
如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品，请确保订阅我们的电子邮件时事通讯和 YouTube 频道，这样您将永远是第一批了解此免费内容并从中受益的人之一。