如何在 Divi 标题中直观地展示博客文章类别

在创建全局标题时，您很可能会包含一个博客菜单项。 如果您的网站上没有很多博客文章类别，那么选择一个博客菜单项可能就足够了。 但是，如果您有一组不同的类别并且想要突出显示其中的每一个，则可能需要尝试不同的方法，例如在下拉菜单中直观地展示每个博客类别。

在本教程中，我们将向您展示如何使用 Divi 的主题生成器来做到这一点。 我们将使用 Divi 的内置元素和选项构建下拉菜单，并将它与一些代码结合起来，使我们能够将下拉菜单放置在博客菜单项中。 您还可以免费下载 JSON 文件！

让我们开始吧。

预览

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

桌面

移动的

免费下载全局标题

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

如何上传 JSON 文件

解压缩您可以在上面下载的压缩文件夹。 然后，导航到您的 WordPress 网站 > Divi > Divi 库并上传 JSON。

一旦您的布局保存在 Divi 库中，您可以导航到 Divi 主题生成器并通过单击“添加全局标题”或“添加自定义标题”并选择“构建全局/自定义标题”来导入保存的布局。 转到 Divi 库中的“您保存的布局”选项卡，选择您在上一步中上传的布局并保存所有 Divi Theme Builder 更改。

要立即拥有一个功能菜单，您需要完成下面本教程的第一部分； 将 CSS 类添加到单个级别的菜单项。 您还需要启用代码模块中的 CSS 类之一，如本教程的第 5 部分所示。

1. 将 CSS 类添加到博客菜单项

转到外观菜单

在本教程的第一部分，我们将向 WordPress 菜单内的博客页面菜单项添加两个自定义 CSS 类。 为此，请导航到 WordPress 仪表板内的菜单。

启用 CSS 类选项

在页面顶部，确保在屏幕选项中启用 CSS 类选项。

将 CSS 类添加到博客菜单项

然后，找到您的博客菜单项并向其添加两个 CSS 类。 确保在 CSS 类之间留一个空格。

• CSS 类：第一级 first-level-1

2. 使用 Divi 的主题生成器创建自定义标题

转到 Divi 主题生成器

一旦菜单项 CSS 类就位，就该切换到 Divi。 转到 Divi 主题生成器并选择“添加全局/自定义标题”。

开始构建全局标题

然后，选择“Build Global Header”以重定向到模板编辑器。

部分设置

背景颜色

在模板编辑器中，您会注意到一个部分。 打开该部分并应用白色背景颜色。

• 背景颜色：#FFFFFF

间距

转到设计选项卡并删除所有默认的顶部和底部填充。

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

添加第 1 行

立柱结构

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

浆纱

在不添加任何模块的情况下，打开行设置并相应地修改大小设置：

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

间距

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

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

将菜单模块添加到行

选择菜单

然后，添加一个菜单模块并选择您在本教程第一部分中修改的菜单。

上传徽标

接下来上传徽标。

菜单文字设置

转到设计选项卡并修改菜单文本设置，如下所示：

• 菜单字体：Roboto Mono
• 菜单字体样式：大写
• 菜单文字颜色：#000000
• 菜单文字大小：18px
• 菜单字母间距：-1px

下拉菜单设置

也更改下拉菜单行颜色。

• 下拉菜单行颜色：#FFFFFF

图标设置

接下来，在图标设置中更改汉堡菜单图标颜色。

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

CSS 类

并通过添加一个 CSS 类来完成模块设置。

3.创建博客下拉设计

添加第 2 行

立柱结构

一旦包含菜单模块的行就位，就该构建包含可视博客类别的下拉菜单了。 为此，请添加一个包含两个大小相同的列的新行。 整行将是我们的博客菜单项的下拉菜单。

背景颜色

打开行设置并使用白色背景色。

• 背景颜色：#FFFFFF

浆纱

转到设计选项卡并更改尺寸设置，如下所示：

• 使用自定义装订线宽度：是
• 天沟宽度：1
• 均衡柱高：是
• 宽度：80vw（桌面）、100%（平板电脑和手机）
• 最大宽度：50vw（桌面），100%（平板电脑和手机）

间距

接下来修改填充值。

• 上边距：10px
• 底部填充：10px
• 左填充：10px
• 底部填充：10px

盒子阴影

我们也使用了一个微妙的盒子阴影。

• 盒子阴影模糊强度：30px
• 阴影颜色：rgba(0,0,0,0.13)（桌面），rgba(0,0,0,0)（平板电脑和手机）

CSS 类

然后，我们将添加两个 CSS 类到我们的行中。 这些 CSS 类（结合稍后的一些代码）将帮助我们将整个行容器作为下拉菜单放置在博客菜单项中。

• CSS 类：下拉菜单 dropdown-menu-1

位置

转到高级选项卡并重新定位该行。

• 位置：绝对（桌面）、相对（平板电脑和手机）
• 位置：右上角
• 垂直偏移：100px（桌面），0px（平板电脑和手机）
• Z指数：11

两列主要元素

最后但同样重要的是，通过在每一列的主元素中添加一行 CSS 代码来完成行设置。 这将帮助我们在较小的屏幕尺寸上保持列结构。

width: 50% !important;

将文本模块添加到第 1 列

添加类别名称

是时候直观地展示我们的博客类别了！ 将第一个文本模块添加到第 1 列，并将类别标题添加到内容框。

添加分类链接

接下来添加指向您的类别的链接。

渐变背景

然后，应用以下渐变背景：

• 颜色1：rgba(0,0,0,0.08)
• 颜色 2：#0a0a0a
• 起始位置：60%
• 结束位置：60%
• 在背景图像上方放置渐变：是

背景图片

上传您选择的背景图片。 如果您想要与本教程完全相同的结果，请上传您可以在本文开头下载的文件夹中找到的插图之一。

• 背景图像尺寸：实际尺寸
• 背景图像重复：重复 X（水平）

文字设置

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

• 文字字体：Roboto Mono
• 文字字体粗细：粗体
• 文字颜色：#ffffff
• 文字大小：1.9vw（桌面）、3vw（平板电脑）、3.5vw（手机）
• 文字字母间距：-0.1vw
• 文本行高：1em

浆纱

接下来更改大小设置。

• 宽度：99%
• 模块对齐：左

间距

也修改间距设置。

• 下边距：10px
• 右边距：1%（平板电脑和手机）
• 顶部填充：60%（台式机）、40%（平板电脑和手机）
• 底部填充：4%
• 左填充：2%

主要元素 CSS

并通过在模块的主元素中添加一行CSS代码来完成模块设置。

cursor: pointer;

克隆文本模块并在第 2 列中放置重复项

完成第一个文本模块后，克隆该模块并将副本放在第 2 列中。

修改第 2 列中的文本模块

更改类别名称和链接

修改复制模块中的分类标题和链接。

更改背景图像

也改变背景图像。 您可以在下载文件夹中找到插图。

• 背景图像重复：无重复

更改尺寸

接下来在尺寸设置中更改模块对齐方式。

克隆两个模块一次

完成两个模块（每列一个）后，您可以将它们都克隆一次。

更改类别名称和链接

更改重复模块内的类别名称和链接。

更改背景图像

连同背景图像。 您可以在本文开头下载的文件夹中找到新插图。

• 背景图像大小：适合
• 背景图像重复：无重复

• 背景图像大小：适合
• 背景图片位置：右下角

4. 添加 CSS & JQuery 代码

在第 1 行的菜单模块下方添加代码模块

完成包含下拉菜单类别名称的行后，将代码模块添加到您部分的第一行，就在菜单模块的正下方。

添加 CSS 代码

将以下几行 CSS 代码添加到代码模块：

<style>
/* Enable class below once you're done editing the menu */  
  
/*  
.dropdown-menu {
visibility: hidden;
}*/
  
.category-menu .et_pb_menu__menu .dropdown-menu {
visibility: hidden;
opacity: 0;

-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1);  
}
  
.category-menu .et_pb_menu__menu li.first-level:hover .dropdown-menu {
visibility: visible;
opacity: 1;
}
  
.category-menu  .et_pb_menu__menu li {
margin-top: 0px !important;
}  

.category-menu .et_pb_menu__menu li>a {
margin-top: 0px !important;
padding: 30px 20px !important;    
}

.category-menu .et_pb_menu__menu li.first-level>a:hover {
background-color: #00C995; 
}  
  
.category-menu .et_mobile_menu .dropdown-menu {
background-color: white; 
padding-top: 25px;
padding-bottom: 5px;
}   

.category-menu .et_mobile_menu li > a {
background-color: transparent;
position: relative;
}
  
.category-menu .et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\37';
color: black;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
  
.category-menu .et_mobile_menu .first-level > .icon-switch:after{
content: '\36';
color: #c9c9c9;
}
  
.category-menu .et_mobile_menu .dropdown-menu {
display: none;
visibility: visible;
}
  
.category-menu .et_mobile_menu .dropdown-menu.reveal-items {
display: block;
}
  
</style>

添加 jQuery 代码

连同一些有助于将包含类别的行放置在您的博客菜单项中的 JQuery coe。 确保将 JQuery 代码放在脚本标记之间，如下面的打印屏幕所示。

jQuery(function($){
$(document).ready(function(){
  

$('.dropdown-menu').each(function(i){
  
i = i + 1;
  
var $dropdown = $('.dropdown-menu-' + i);
var $mainMenuItem = $('.first-level-' + i + '>a');
$dropdown.insertAfter($mainMenuItem);
  
});  
  
var $firstLevel = $('.et_mobile_menu .first-level > a');
var $allDropdowns = $('.et_mobile_menu .dropdown-menu');

$firstLevel.off('click').click(function() {

$(this).attr('href', '#');  
var $thisDropdown = $(this).siblings(); 

$thisDropdown.slideToggle();
$(this).toggleClass('icon-switch');

var dropdownSiblings = $allDropdowns.not($thisDropdown);   
dropdownSiblings.slideUp();

var $thisFirstLevel = $(this);
var $firstLevelSiblings = $firstLevel.not($thisFirstLevel);
$firstLevelSiblings.removeClass('icon-switch');  

});      
  
});
});

5. 自定义博客下拉项后启用 CSS 类

完成对所有下拉菜单项的自定义后，您还有一件事要做：隐藏包含下拉菜单项的整行。 这与我们代码中的加载功能相结合，将防止下拉菜单在加载页面时出现。 启用此 CSS 类后，您将不会再看到 Visual Builder 中的第二行，但您将能够在线框模式下访问它和/或在更改下拉菜单时暂时禁用 CSS 类。 要启用该类，请删除 CSS 类开头和结尾的“/* */”括号。

6.添加更多帖子类别下拉菜单

克隆博客类别行

如果您希望添加更多类别下拉列表，您可以克隆…