如何在您的 Divi 标题中直观地展示博客帖子类别

已发表: 2020-07-15

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

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

让我们开始吧。

预览

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

桌面

下拉帖子类别

移动的

下拉帖子类别

免费下载全局标题

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

下载文件
免费下载

免费下载

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

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

如何上传 JSON 文件

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

下拉帖子类别

下拉帖子类别

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

下拉帖子类别

下拉帖子类别

下拉帖子类别

下拉帖子类别

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

1.为博客菜单项添加CSS类

转到外观菜单

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

下拉帖子类别

启用 CSS 类选项

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

下拉帖子类别

将 CSS 类添加到博客菜单项

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

  • CSS 类：一级一级一级

下拉帖子类别

2. 使用 Divi 的 Theme Builder 创建自定义标题

转到 Divi 主题生成器

一旦菜单项 CSS 类就位，就可以切换到 Divi。 转到 Divi Theme Builder 并选择“添加全局/自定义标题”。

下拉帖子类别

开始构建全局标题

然后，选择“构建全局标题”以重定向到模板编辑器。

下拉帖子类别

部分设置

背景颜色

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

  • 背景颜色：#FFFFFF

下拉帖子类别

间距

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

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

下拉帖子类别

添加第 1 行

列结构

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

下拉帖子类别

浆纱

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

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

下拉帖子类别

间距

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

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

下拉帖子类别

将菜单模块添加到行

选择菜单

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

下拉帖子类别

上传标志

接下来上传徽标。

下拉帖子类别

菜单文字设置

移至设计选项卡并按如下方式修改菜单文本设置：

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

下拉帖子类别

下拉菜单设置

也更改下拉菜单行颜色。

  • 下拉菜单行颜色：#FFFFFF

下拉帖子类别

图标设置

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

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

下拉帖子类别

CSS 类

并通过添加 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. 添加更多帖子类别下拉菜单

克隆博客类别行

如果您想添加更多类别下拉列表，您可以克隆您创建的整个下拉行。

下拉帖子类别

在图层面板中访问重复行

由于我们在桌面上使用绝对定位，因此行将放置在彼此的顶部。 要单独访问行，请打开 Divi Builder 中的图层面板并打开重复行的设置。

下拉帖子类别

下拉帖子类别

更改重复行 CSS 类

更改重复行中的第二个 CSS 类。 确保您使用的号码是连续的。

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

下拉帖子类别

将 CSS 类添加到外观菜单项

然后，导航回仪表板内的 WordPress 菜单，并将以下 CSS 类添加到另一个菜单项，您就完成了：

  • CSS 类：一级一级一级二级

下拉帖子类别

预览

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

桌面

下拉帖子类别

移动的

下拉帖子类别

最后的想法

在这篇文章中，我们向您展示了如何通过 Divi 标题和博客菜单项获得创意。 更具体地说，我们向您展示了如何在视觉上将博客类别包含为在所有屏幕尺寸下看起来都很棒的下拉菜单项。 这种方法将帮助您突出每个不同的博客类别，同时仍保持一目了然的最小外观和感觉。 您也可以免费下载 JSON 文件！ 如果您有任何疑问，请随时在下面的评论部分发表评论。

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