WordPress divi主题

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

by | Apr 30, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

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

google广告开户

让我们开始吧。

预览

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

桌面

滚动前隐藏标题

移动的

滚动前隐藏标题

免费下载标题模板

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

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

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

创建新的全局标题模板

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

滚动前隐藏标题

滚动前隐藏标题

WordPress divi主题

部分设置

背景颜色

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

  • 背景颜色:#001b34

滚动前隐藏标题

间距

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

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

滚动前隐藏标题

添加新行

立柱结构

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

滚动前隐藏标题

背景颜色

在不添加模块的情况下,打开行设置并应用您选择的背景颜色。

  • 背景颜色:#001b34

滚动前隐藏标题

浆纱

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

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

滚动前隐藏标题

fiverr建站WordPress程序员

间距

继续相应地更改填充值:

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

滚动前隐藏标题

第 1 列设置

背景颜色

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

  • 背景颜色:#f4d5b8

滚动前隐藏标题

将菜单模块添加到第 1 列

选择菜单

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

独立站选品工具

滚动前隐藏标题

上传徽标

接下来上传徽标。

滚动前隐藏标题

背景颜色

然后,更改背景颜色。

  • 背景颜色:#063765

滚动前隐藏标题

高质量外链购买

背景图片

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

  • 背景图像大小:适合
  • 背景图像位置:中心

滚动前隐藏标题

菜单文字设置

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

滚动前隐藏标题

下拉菜单设置

然后,相应地更改下拉菜单设置:

JasperAI 10000字免费额度试用
  • 下拉菜单行颜色:rgba(0,0,0,0)
  • 移动菜单背景颜色:#ddc1a7
  • 移动菜单文本颜色:#063765

滚动前隐藏标题

图标设置

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

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

滚动前隐藏标题

浆纱

然后,在尺寸设置中修改徽标最大宽度。

滚动前隐藏标题

WordPress备份工具updrafplus

间距

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

  • 顶部填充: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 轴使用负值。

滚动前隐藏标题

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

滚动前隐藏标题

部分可见性 CSS 属性

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

  • 主要元素:
    visibility: hidden

滚动前隐藏标题

我们会将我们的内容改回粘性状态。 就是这样!

  • 粘性主要元素:
    visibility: visible;

滚动前隐藏标题

预览

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

桌面

滚动前隐藏标题

移动的

滚动前隐藏标题

最后的想法

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

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

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题