未命名_自定义px_2019.08.gif

【Divi主题教程】divi主题如何设置顶部菜单栏滚动是进行隐藏

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

让我们开始吧。

预习

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

桌面

1e5e8f452d8277

移动

显示全局标题

1.转到Divi Theme Builder并添加新模板

转到Divi Theme Builder

首先转到Divi Theme Builder。

18ec25f2e451dc

开始建立全球标题

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

1fe25a0e524fef

2.开始构建全局头

区域设置

背景颜色

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

  • 背景颜色:#ffffff

1155d25efe232a

浆纱

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

  • 宽度:100%

1ee0e26d5f535a

间距

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

  • 最高填充:2vw
  • 底部填充:2vw

19537efe5ab525

框影

我们还将对我们的部分应用微妙的阴影。

  • 方块阴影模糊强度:50像素
  • 阴影颜色:rgba(0,0,0,0.08)

1c6d55ef2e0035

CSS ID

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

  • CSS ID:global-header-section

1c92defa955e25

主要元素

通过将两行CSS代码添加到该部分的主元素,我们还将该部分变成固定的头部。

01
02
position: fixed;
top: 0;

15fd005e5e5b42

Z指数

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

  • Z索引:99999

1de514ed5f1a52

添加新行

列结构

完成所有部分的设置后,请使用以下列结构在该部分中添加新行:

1518e5f5ea8e23

浆纱

尚未添加任何模块,请打开行设置,并允许该行占用屏幕的整个宽度。

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

1ee2f3435a06d5

间距

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

  • 最高填充:0px
  • 底部填充:0px

1f357265e6e19e

主要元素

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

01
02
display: flex;
align-items: center;

1258ac8ee5b6f3

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

添加社交网络

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

1fc618ed6529e5

重置个人社交网络样式

通过在单个级别上重置每个社交网络的样式来继续。

1865fee3519256

添加个人社交网络间距

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

  • 底部填充:0.5vw

15e5e216e9fe2b

对准

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

  • 模块对齐:居中

1de52b5589eef6

默认图标设置

也可以在图标设置中更改图标颜色。

  • 图标颜色:#000000

1ee6f5bc425367

悬停图标设置

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

  • 图标颜色:#c2ab92

11ffe5e25689e2

边境

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

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

15e5eef12f8e6c

将菜单模块添加到第2列

选择菜单

进入下一篇专栏!添加菜单模块,然后选择所需的菜单。

1e7e972ef4505f

上传徽标

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

1e2e3127355f52

移除背景色

并删除背景色。

1fe5ce2e741f75

布局

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

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

15b6075efce82b

默认菜单文字

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

  • 活动链接颜色:#c2ab92
  • 菜单字体:Cor
  • 文字颜色:#000000
  • 菜单文字大小:1vw(台式机),2vw(平板电脑),3vw(电话)

1a85f77e5e15c2

悬停菜单文本

修改悬停菜单文本。

  • 菜单文字颜色:#c2ab92

115b568e92e72f

下拉式菜单

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

  • 下拉菜单行颜色:#000000

1e5e7af2be85bb

图示

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

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

158ad5e9075ef2

浆纱

在大小调整设置中,跨不同屏幕尺寸更改徽标最大宽度,以继续。

  • 徽标最大宽度:5vw(台式机),10vw(平板电脑),13vw(电话)

1d305e8e8628f5

菜单链接CSS

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

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

125e8be8bef525

将文本模块添加到第3列

添加副本

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

1a84ef57e8852c

添加链接

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

  • 模块链接URL:#

12aee8e5f5e161

默认文字设置

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

  • 文字字体:Cor Garamond
  • 文字颜色:#000000
  • 文字大小:1vw(台式机),2vw(平板电脑),3vw(电话)

1545d4e9f2e896

悬停文字设定

悬停时更改文本颜色。

  • 文字颜色:#c2ab92

18525ce55f6aed

浆纱

通过在不同屏幕尺寸上更改模块的大小设置来继续。

  • 宽度:12vw(台式机),18vw(平板电脑),22vw(电话)
  • 模块对齐:居中

12584ceebc59ef

间距

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

  • 底部填充:0.5vw

1ee1ffdea525e8

边境

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

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

15b805efd5fe28

将代码模块添加到第2列

插入JQuery和CSS代码

在为行中的所有模块设置样式之后,就该使显示/隐藏效果发生了。为此,我们需要向代码模块中添加一些自定义代码,并将其放置在第2列中。无论您如何设计标题或使用什么模块,此代码都可以在您添加的任何部分上使用。确保已将CSS ID添加到您的部分。如下图所示,将JQuery代码放在脚本标签之间,将CSS代码放在样式标签之间。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
jQuery(function($){
  
var topPosition = $(window).scrollTop();
$(window).scroll(function() {
    var scrollMovement = $(window).scrollTop();
    if(scrollMovement > topPosition) {
          $('#global-header-section').slideUp();
    } else {
         $('#global-header-section').slideDown();
    }
    topPosition = scrollMovement;
});   
});
01
02
03
#main-content{
    margin-top: 7vw;
}

1155f922d18e4e

3.保存构建器更改并查看结果

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

194028355fe5ed

1e7f42e59a52c9

预习

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

桌面

1e5e8f452d8277

移动

显示全局标题

Divi主题教程WordPress教程精品教程

【Divi主题教程】使用Divi创建固定图标侧边导航栏

2019-12-23 20:20:30

Divi主题教程WordPress教程精品教程

【Divi主题教程】divi主题如何设置手机端固定底部菜单栏?

2019-12-23 22:41:32

未命名_自定义px_2019.08.gif

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索