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

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

已发表: 2019-11-10

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

让我们开始吧。

预览

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

桌面

全屏全局标题

移动的

全屏全局标题

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

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

下载文件
免费下载

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

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

转到 Divi 主题生成器

首先转到Divi Theme Builder。

全屏全局标题

开始构建全局标题

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

全屏全局标题

2. 将第 #1 部分专用于全屏导航

部分设置

背景颜色

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

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

全屏全局标题

间距

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

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

全屏全局标题

CSS 类

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

  • CSS 类：部分转换

全屏全局标题

默认可见性

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

  • 水平溢出：隐藏
  • 垂直溢出：隐藏
  • Z索引：999999

全屏全局标题

悬停可见性

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

  • Z索引：999999

全屏全局标题

添加第 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。

  • CSS ID：菜单打开

全屏全局标题

添加第 2 行

列结构

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

全屏全局标题

浆纱

打开行设置并更改大小设置如下：

  • 宽度：100%
  • 最大宽度：100%

全屏全局标题

间距

也修改间距值。

  • 上边距：2vw（桌面）、4vw（平板电脑）、6vw（手机）
  • 下边距：2vw（桌面）、4vw（平板电脑）、6vw（手机）
  • 左填充：19vw
  • 右填充：19vw

全屏全局标题

将文本模块添加到列

添加内容

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

全屏全局标题

添加链接

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

  • 模块链接网址：#

全屏全局标题

文字设置

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

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

全屏全局标题

间距

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

  • 最高利润率：1vw
  • 底部填充：2vw
  • 左填充：3vw

全屏全局标题

边界

也添加一个底部边框。

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

全屏全局标题

CSS 类

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

全屏全局标题

克隆文本模块三次

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

全屏全局标题

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

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

全屏全局标题

添加社交媒体关注模块

添加选择的社交网络

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

全屏全局标题

重置个人社交网络风格

继续分别重置每个社交网络的样式。

全屏全局标题

图标设置

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

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

全屏全局标题

间距

也添加一些左填充。

  • 左填充：3vw

全屏全局标题

CSS 类

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

全屏全局标题

添加第 3 行

列结构

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

全屏全局标题

间距

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

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

全屏全局标题

将代码模块添加到列

插入 JQuery 和 CSS 代码

然后，添加一个 Code Module 并插入一些 CSS 和 JQuery 代码以实现全屏菜单功能。 确保您手动将 JQuery 代码放置在 script 标签之间，并将 CSS 代码放置在 style 标签之间，如下面的打印屏幕所示。 

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指数：99999

全屏全局标题

悬停可见性

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

  • Z指数：99999

全屏全局标题

添加新行

列结构

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

全屏全局标题

浆纱

打开行设置并更改大小设置如下：

  • 宽度：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 的 Theme Builder 创建全屏全局标题。 我们在设计中添加了两个固定元素； 左上角的汉堡包图标和右上角的徽标。 单击时，汉堡包图标会打开一个全屏菜单，该菜单使用 Divi 的内置元素制作。 您可以随意使用 Divi 来设计这个全屏菜单！ 在本教程开始时，您还可以免费下载 JSON 文件。 如果您有任何疑问，请随时在下面的评论部分发表评论。

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