WordPress divi主题

如何在向上滚动时显示全局标题并在使用 Divi 向下滚动时隐藏

by | May 8, 2022 | Divi主题使用教程 | 0 comments

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

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

google广告开户

让我们开始吧。

预览

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

桌面

显示全局标题

移动的

显示全局标题

免费下载全局标题模板

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

1. 前往 Divi Theme Builder 并添加新模板

转到 Divi 主题生成器

首先转到 Divi Theme Builder。

显示全局标题

开始构建全局标题

在那里,单击“添加全局标题”并选择“构建全局标题”。

显示全局标题

WordPress divi主题

2.开始构建全局标题

部分设置

背景颜色

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

  • 背景颜色:#ffffff

显示全局标题

浆纱

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

显示全局标题

间距

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

  • 顶部填充:2vw
  • 底部填充:2vw

显示全局标题

盒子阴影

我们还将对我们的部分应用一个微妙的盒子阴影。

  • 盒子阴影模糊强度:50px
  • 阴影颜色:rgba(0,0,0,0.08)

显示全局标题

CSS ID

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

  • CSS ID:全局标题部分

显示全局标题

fiverr建站WordPress程序员

主要元素

我们还将通过在该部分的主要元素中添加两行 CSS 代码来将该部分变成一个固定的头部。

position: fixed;
top: 0;

显示全局标题

Z 指数

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

显示全局标题

添加新行

立柱结构

完成所有部分设置后,继续使用以下列结构向该部分添加新行:

独立站选品工具

显示全局标题

浆纱

在不添加任何模块的情况下,打开行设置并让行占据屏幕的整个宽度。

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

显示全局标题

间距

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

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

显示全局标题

高质量外链购买

主要元素

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

display: flex;
align-items: center;

显示全局标题

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

添加社交网络

是时候添加模块了,从第 1 列中的社交媒体关注模块开始。添加您想要显示的社交网络。

显示全局标题

重置个人社交网络样式

继续在个人层面上重置每个社交网络的样式。

JasperAI 10000字免费额度试用

显示全局标题

添加个人社交网络间距

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

显示全局标题

结盟

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

显示全局标题

WordPress备份工具updrafplus

默认图标设置

更改图标设置中的图标颜色。

显示全局标题

悬停图标设置

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

显示全局标题

边界

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

  • 底部边框宽度:1px
  • 底部边框颜色:#000000

显示全局标题

将菜单模块添加到第 2 列

选择菜单

进入下一栏! 添加菜单模块并选择您选择的菜单。

显示全局标题

上传徽标

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

显示全局标题

删除背景颜色

并去除背景颜色。

显示全局标题

布局

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

  • 风格:居中
  • 下拉菜单方向:向下

显示全局标题

默认菜单文本

继续更改菜单文本设置,如下所示:

  • 活动链接颜色:#c2ab92
  • 菜单字体:Cormorant Garamond
  • 文字颜色:#000000
  • 菜单文字大小:1vw(桌面)、2vw(平板电脑)、3vw(手机)

显示全局标题

悬停菜单文本

修改悬停时的菜单文本。

显示全局标题

下拉式菜单

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

  • 下拉菜单行颜色:#000000

显示全局标题

图标

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

  • 汉堡菜单图标颜色:#000000

显示全局标题

浆纱

继续在尺寸设置中更改不同屏幕尺寸的徽标最大宽度。

  • 徽标最大宽度:5vw(桌面)、10vw(平板电脑)、13vw(手机)

显示全局标题

菜单链接 CSS

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

padding-bottom: 1vw;
border-bottom: 1px solid #000;

显示全局标题

将文本模块添加到第 3 列

添加副本

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

显示全局标题

添加链接

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

显示全局标题

默认文本设置

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

  • 文字字体:Cormorant Garamond
  • 文字颜色:#000000
  • 文字大小:1vw(桌面)、2vw(平板电脑)、3vw(手机)

显示全局标题

悬停文本设置

更改悬停时的文本颜色。

显示全局标题

浆纱

继续在不同的屏幕尺寸上更改模块的尺寸设置。

  • 宽度:12vw(桌面)、18vw(平板电脑)、22vw(手机)
  • 模块对齐:中心

显示全局标题

间距

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

显示全局标题

边界

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

  • 底部边框宽度:1px
  • 底部边框颜色:#000000

显示全局标题

将代码模块添加到第 2 列

插入 JQuery & CSS 代码

为行中的所有模块设置样式后,就可以实现显示/隐藏效果了。 为此,我们需要将一些自定义代码添加到我们将放置在第 2 列中的代码模块中。此代码将适用于您添加的任何部分,无论您如何设计标题或使用什么模块,只要确保您已将 CSS ID 添加到您的部分。 将 JQuery 代码放在脚本标签之间,将 CSS 代码放在样式标签之间,如下面的打印屏幕所示。

jQuery(function($){
  
var topPosition = 0;


$(window).scroll(function() {

    var scrollMovement = $(window).scrollTop();
  
    if (topPosition < 200 ){
    }
    else{
    if(scrollMovement > topPosition) {
          $('#global-header-section').removeClass('show-header');
          $('#global-header-section').addClass('hide-header');
    } else {
          $('#global-header-section').removeClass('hide-header');
          $('#global-header-section').addClass('show-header');
    }
    }
    topPosition = scrollMovement;
});  
  
});
#main-content{
margin-top: 7vw;
}

.hide-header {
opacity: 0;
margin-top: -200px !important;
}

.show-header {
opacity: 1;
margin-top: 0px !important;
}

#global-header-section {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}

显示全局标题

3.保存生成器更改并查看结果

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

显示全局标题

显示全局标题

预览

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

桌面

显示全局标题

移动的

显示全局标题

最后的想法

在这篇文章中,我们向您展示了如何让您的全局标题在向上滚动时显示,在向下滚动时隐藏。 这是一种流行且有效的方法,可以帮助您的访问者轻松导航,而不会占用他们视口高度的一部分。 您还可以免费下载 JSON 文件! 如果您有任何问题或建议,请随时在下面的评论部分发表评论。

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

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