WordPress divi主题

如何使用 Divi 的主题生成器创建自定义全屏全局标题

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

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

如果您正在寻找一种方法来为您的网站创建一个不占用大量空间的全局标题,那么您会喜欢本教程的。 我们将向您展示如何使用 Divi 的 Theme Builder 创建全屏全局标题。 向下滚动页面时,您会在帖子/页面上注意到的唯一两件事是 1) 左上角的可点击汉堡图标和 2) 右上角的徽标。 这两个项目将在整个导航过程中跟随您的访问者,一旦单击汉堡图标,将打开一个自定义全屏菜单并允许访问者转到您网站上的其他页面。 这种设计的结果是高度响应的,您也可以免费下载 JSON 文件!

google广告开户

让我们开始吧。

预览

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

桌面

全屏全局标题

移动的

全屏全局标题

免费下载全屏全局标题模板

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

1. 转到 Divi Theme Builder 并开始构建全局标题

转到 Divi 主题生成器

首先转到 Divi Theme Builder。

全屏全局标题

开始构建全局标题

然后,单击“添加全局标题”并继续单击“构建全局标题”。

全屏全局标题

WordPress divi主题

2. 将第 1 节专门用于全屏导航

部分设置

背景颜色

是时候开始创作了! 打开模板编辑器中您可以注意到的部分的设置,并将背景颜色更改为完全透明的颜色。

  • 背景颜色:rgba(255,255,255,0)

全屏全局标题

间距

接下来删除该部分的默认顶部和底部填充。

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

全屏全局标题

CSS 类

继续向该部分添加一个 CSS 类。 稍后在这篇文章中,我们将需要这个 CSS 类来全屏显示菜单。

  • CSS 类:section-transform

全屏全局标题

默认可见性

然后,转到可见性设置并隐藏溢出。 确保你也增加了该部分的 z 索引,这将确保该部分将保持在所有页面和发布内容的顶部。

  • 水平溢出:隐藏
  • 垂直溢出:隐藏
  • Z指数:999999

全屏全局标题

悬停可见性

添加 z 索引后,启用悬停选项并确保在那里也应用相同的 z 索引。

全屏全局标题

fiverr建站WordPress程序员

添加第 1 行

立柱结构

继续使用以下列结构向该部分添加第一行:

全屏全局标题

浆纱

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

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

全屏全局标题

间距

接下来删除所有默认的顶部和底部填充。

独立站选品工具
  • 顶部填充:0px
  • 底部填充:0px

全屏全局标题

将文本模块添加到列

添加内容

我们在这一行中唯一需要的模块是一个文本模块。 将您选择的菜单符号添加到内容框中。 在本教程中,我们使用 ‘≡’。

全屏全局标题

文字设置

转到模块的设计选项卡并更改文本设置,如下所示:

  • 文字字体:Abril Fatface
  • 文字颜色:#000000
  • 文字大小:3vw(桌面)、5vw(平板电脑)、7vw(手机)
  • 文本行高:1em

全屏全局标题

高质量外链购买

间距

接下来修改不同屏幕尺寸的间距值。

  • 顶部填充:2vw(桌面)、3.5vw(平板电脑)、5vw(手机)
  • 底部填充:2vw(桌面)、3.5vw(平板电脑)、5vw(手机)
  • 左填充:3vw(桌面)、4vw(平板电脑)、7vw(手机)
  • 右填充:3vw(桌面)、4vw(平板电脑)、7vw(手机)

全屏全局标题

CSS ID

此文本模块将用作全屏菜单的触发器。 这就是为什么我们需要为文本模块分配一个 CSS ID。 在本教程的后面,我们将在代码中使用 CSS ID。

全屏全局标题

添加第 2 行

立柱结构

继续使用以下列结构向该部分添加第二行:

JasperAI 10000字免费额度试用

全屏全局标题

浆纱

打开行设置并更改大小设置,如下所示:

  • 宽度:100%
  • 最大宽度:100%

全屏全局标题

间距

也修改间距值。

  • 上边距:2vw(台式机)、4vw(平板电脑)、6vw(手机)
  • 底部边距:2vw(桌面)、4vw(平板电脑)、6vw(手机)
  • 左填充:19vw
  • 右填充:19vw

全屏全局标题

WordPress备份工具updrafplus

将文本模块添加到列

添加内容

然后,将一个新的文本模块添加到该列。 此文本模块代表您的第一个菜单项。

全屏全局标题

添加链接

确保接下来为模块添加正确的链接。

全屏全局标题

文字设置

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

  • 文字字体:Poppins
  • 文本字体粗细:半粗体
  • 文字颜色:#000000
  • 文字大小:3vw(桌面)、7vw(平板电脑)、8vw(手机)
  • 文字字母间距:-0.1vw
  • 文本行高:1em

全屏全局标题

间距

接下来修改模块的间距设置。

  • 最高边距:1vw
  • 底部填充:2vw
  • 左填充:3vw

全屏全局标题

边界

也添加一个底部边框。

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

全屏全局标题

CSS 类

并通过添加自定义 CSS 类来完成模块的设置。 您需要将此 CSS 类添加到您放置在您的部分中的每个菜单项中。

全屏全局标题

克隆文本模块三次

完成第一个文本模块后,您可以根据需要多次克隆它(取决于要在菜单中显示的菜单项)。 但是,请确保模块不超过屏幕的高度。

全屏全局标题

更改每个副本的内容和链接

您必须更改每个副本的内容和链接。

全屏全局标题

添加社交媒体关注模块

添加选择的社交网络

我们在这一行中需要的下一个也是最后一个模块是社交媒体关注模块。 添加您要显示的所有社交网络。

全屏全局标题

重置个人社交网络样式

继续单独重置每个社交网络的样式。

全屏全局标题

图标设置

然后,进入模块的设计选项卡,修改图标设置如下:

  • 图标颜色:#000000
  • 使用自定义图标大小:是
  • 图标字体大小:1vw(桌面)、2vw(平板电脑)、3vw(手机)

全屏全局标题

间距

也添加一些左填充。

全屏全局标题

CSS 类

通过添加 CSS 类来完成模块的设置。

全屏全局标题

添加第 3 行

立柱结构

本节我们需要的最后一行包含以下列结构:

全屏全局标题

间距

通过删除所有默认的顶部和底部填充来限制该行占用的空间。

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

全屏全局标题

将代码模块添加到列

插入 JQuery & CSS 代码

然后,添加一个代码模块并插入一些 CSS 和 JQuery 代码来实现全屏菜单功能。 确保手动将 JQuery 代码放置在脚本标记之间,并将 CSS 代码放置在样式标记之间,如下面的打印屏幕所示。

jQuery(function($){
$('#menu-open').click(function() {
$('.section-transform').toggleClass('section-transform-active');
});
$('.menu-item-click').click(function() {
$('.section-transform').removeClass('section-transform-active');
});
});
.section-transform{
cursor: pointer;    
}
.section-transform-active {
height: 100% !important;
width: 100% !important;
z-index: 99999 !important;
background-color: #FFFFFF !important; 
}   
.section-transform {
-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. 将第 2 节专用于右上角的徽标

部分设置

背景颜色

进入下一节! 此部分将包含右上角的徽标。 打开部分设置并将背景颜色更改为完全透明的颜色。

  • 背景颜色:rgba(0,0,0,0)

全屏全局标题

间距

接下来删除该部分的默认顶部和底部填充。

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

全屏全局标题

默认可见性

也增加部分的 z 索引。

全屏全局标题

悬停可见性

在 z 索引上启用悬停选项,并确保相同的值也适用于悬停。

全屏全局标题

添加新行

立柱结构

继续使用以下列结构向该部分添加新行:

全屏全局标题

浆纱

打开行设置并更改大小设置,如下所示:

  • 宽度:100%
  • 最大宽度:100%

全屏全局标题

间距

也删除该行的默认顶部和底部填充。

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

全屏全局标题

将图像模块添加到列

上传PNG标志图片

我们在这一行和部分中唯一需要的模块是一个图像模块。 上传您的半透明徽标图像文件。

全屏全局标题

浆纱

转到模块的大小设置并强制全宽。

全屏全局标题

间距

通过在不同的屏幕尺寸上添加一些自定义填充来完成模块的设置。

  • 顶部填充:2.5vw(台式机)、3.5vw(平板电脑)、5vw(手机)
  • 底部填充:2.5vw(桌面)、3.5vw(平板电脑)、5vw(手机)
  • 左填充:3vw(桌面)、4vw(平板电脑)、7vw(手机)
  • 右填充:3vw(桌面)、4vw(平板电脑)、7vw(手机)

全屏全局标题

4.附加部分设置

第 1 节

浆纱

一旦你完成了这两个部分和其中的所有模块,就该改变它们的大小了。 打开第一部分并应用以下宽度和高度值:

  • 宽度:8vw(桌面)、11vw(平板电脑)、18vw(手机)
  • 高度:7vw(台式机)、11vw(平板电脑)、18vw(手机)

全屏全局标题

默认主元素

然后,转到该部分的高级选项卡并添加以下 CSS 代码行:

position: fixed;
top: 0;

全屏全局标题

悬停主要元素

确保这些相同的 CSS 代码行适用于悬停。

position: fixed;
top: 0;

全屏全局标题

第 2 节

浆纱

继续打开第二部分的设置并更改不同屏幕尺寸的宽度。

  • 宽度:13vw(台式机)、21vw(平板电脑)、30vw(手机)

全屏全局标题

默认主元素

然后,转到高级选项卡并添加以下几行 CSS 代码:

position: fixed;
right: 0;
top: 0;

全屏全局标题

悬停主要元素

确保这些相同的 CSS 代码行适用于悬停。

position: fixed;
right: 0;
top: 0;

全屏全局标题

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

完成上述所有步骤后,您可以保存全局标题模板并在您的网站上查看结果!

全屏全局标题

全屏全局标题

预览

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

桌面

全屏全局标题

移动的

全屏全局标题

最后的想法

在本教程中,我们向您展示了如何使用 Divi 的主题生成器创建全屏全局标题。 我们在设计中添加了两个固定元素; 左上角的汉堡图标和右上角的徽标。 单击时,汉堡图标会打开一个使用 Divi 内置元素制作的全屏菜单。 您可以随意使用 Divi 设计此全屏菜单! 在本教程开始时,您也可以免费下载 JSON 文件。 如果您有任何疑问,请随时在下面的评论部分发表评论。

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

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