使用 Divi 的主题生成器创建高级优雅主题下拉菜单

已发表: 2020-06-10

自从 Divi 的主题生成器问世以来，我们使用 Divi 设计整个网站的页眉和页脚的方式变得比以往任何时候都容易。 一切都可以自定义，您无需离开直观的 Divi 环境，即可获得您心目中的确切菜单。 现在，在某个时候，您可能会在我们的网站上遇到 Elegant Themes 下拉菜单。 这个下拉菜单是一种更高级的超级菜单，它创造性地结合了图标、文本和 CTA。 这使访问者可以直观地浏览所提供的不同产品。 它还可以在较小的屏幕尺寸上转换为漂亮的嵌套菜单。

在本教程中，我们将向您展示如何在 Divi 的主题生成器中重新创建这个高级优雅主题下拉菜单。 我们将结合两全其美； 我们将使用内置的 Divi 元素来创建下拉菜单的基础，并将其与一些将下拉菜单放置在 WordPress 菜单中的代码相结合。 您也可以免费下载 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 类

转到外观菜单

本教程的第一部分重点介绍使用适当的 CSS 类设置 WordPress 菜单项。 为此，请导航到您的 WordPress 仪表板 > 菜单 > 创建新菜单或打开现有菜单。

优雅的主题下拉菜单

启用 CSS 类选项

然后，在屏幕的右上角，您会注意到“屏幕选项”。 切换此选项并在高级菜单属性中启用“CSS 类”。 这将允许我们将 CSS 类添加到单个级别的特定菜单项。

优雅的主题下拉菜单

向需要下拉菜单的菜单项添加连续的 CSS 类

在本教程中，我们将创建三个不同的下拉菜单，并将它们中的每一个分配给一个特定的菜单项。 为了让这个过程继续下去，我们需要为我们想要包含下拉菜单的三个菜单项分配两个不同的 CSS 类。

  • 您要分配下拉列表的第一个菜单项： first-level first-level-1
  • 要分配下拉菜单的第二个菜单项： first-level first-level-2
  • 要分配下拉列表的第三个菜单项： first-level first-level-3

优雅的主题下拉菜单

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

转到 Divi 主题生成器

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

优雅的主题下拉菜单

开始构建全局标题

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

优雅的主题下拉菜单

部分设置

背景颜色

在模板内，您会注意到一个部分。 打开该部分并更改背景颜色。

  • 背景颜色：#ffffff

优雅的主题下拉菜单

间距

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

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

优雅的主题下拉菜单

盒子阴影

并包括一个微妙的框阴影。

  • 框阴影垂直位置：0px
  • 框阴影模糊强度：30px
  • 阴影颜色：rgba(103,151,255,0.17)

优雅的主题下拉菜单

添加新行

列结构

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

优雅的主题下拉菜单

浆纱

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

  • 使用自定义装订线宽度：是
  • 天沟宽度：1
  • 最大宽度：1440px

优雅的主题下拉菜单

间距

接下来更改间距设置中的顶部和底部填充值。

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

优雅的主题下拉菜单

将菜单模块添加到行

选择菜单

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

优雅的主题下拉菜单

上传标志

接下来上传徽标。

优雅的主题下拉菜单

菜单文字设置

转到设计选项卡并相应地更改菜单文本设置：

  • 菜单字体：Lato
  • 菜单字体粗细：粗体
  • 菜单字体样式：大写
  • 菜单文字颜色：rgba(32,41,47,0.62)
  • 菜单文字大小：13px
  • 菜单字母间距：3px
  • 文本对齐：右

优雅的主题下拉菜单

下拉菜单设置

接下来对下拉菜单设置进行一些更改。

  • 下拉菜单背景颜色：#ffffff
  • 下拉菜单行颜色：rgba(0,0,0,0)
  • 下拉菜单文本颜色：#000000
  • 移动菜单背景颜色：#f2f4f5
  • 移动菜单文本颜色：#000000

优雅的主题下拉菜单

图标设置

以及图标设置。

  • 购物车图标颜色：#000000
  • 搜索图标颜色：#000000
  • 汉堡菜单图标颜色：#ff4a9e

优雅的主题下拉菜单

浆纱

并通过为大小设置分配徽标最大高度来完成模块设置。

  • 标志最大高度：64px

优雅的主题下拉菜单

3. 创建下拉元素

向节添加新行

列结构（需要匹配数量的下拉菜单）

设置好默认菜单后，就可以创建下拉菜单了。 为此，我们将添加一个包含三个大小相同的列的新行。 列数与我们将创建的下拉菜单数相匹配。

优雅的主题下拉菜单

浆纱

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

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

优雅的主题下拉菜单

间距

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

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

优雅的主题下拉菜单

CSS 类

并为该行分配一个 CSS 类。

  • CSS 类：下拉菜单行

优雅的主题下拉菜单

所有列 CSS 类

完成常规行设置后，单独打开每一列并分配以下 CSS 类：

  • CSS 类：下拉菜单列

优雅的主题下拉菜单

优雅的主题下拉菜单

将 Blurb 模块 #1 添加到第 1 列

添加内容

是时候添加模块了！ 我们将首先在第一列中创建第一个下拉菜单。 为了显示所有不同的产品，我们将使用 Divi 的 Blurb 模块。 添加一些您选择的内容。

优雅的主题下拉菜单

选择图标

然后，选择匹配的图标。

优雅的主题下拉菜单

添加链接

也添加到模块的链接。

优雅的主题下拉菜单

图标设置

转到设计选项卡并按如下方式设置图标设置：

  • 图标颜色：#8f42ec
  • 图像/图标放置：左
  • 使用图标字体大小：是
  • 图标字体大小：30px

优雅的主题下拉菜单

标题文字设置

然后，设置标题文本的样式。

  • 标题字体：Lato
  • 标题字体粗细：粗体
  • 标题字体样式：大写
  • 标题文字颜色：#8f42ec
  • 标题文字大小：16px
  • 标题字母间距：2px

优雅的主题下拉菜单

正文设置

与正文一起。

  • 正文字体：Lato
  • 正文颜色：#999999

优雅的主题下拉菜单

浆纱

我们也确保内容宽度为“100%”。

  • 内容宽度：100%

优雅的主题下拉菜单

间距

然后，我们将转到间距设置并在不同的屏幕尺寸上使用一些不同的填充值。

  • 顶部填充：15px
  • 底部填充：15px
  • 左填充：6%（桌面）、2%（平板电脑）、3%（手机）
  • 右填充：6%（桌面）、2%（平板电脑）、3%（手机）

徘徊：

  • 顶部填充：15px
  • 底部填充：15px
  • 左填充：8%
  • 右填充：4%

优雅的主题下拉菜单

动画

接下来我们将在动画设置中删除默认图标动画。

  • 图像/图标动画：无动画

优雅的主题下拉菜单

CSS 类

然后，我们将转到高级选项卡并为我们的模块分配一个 CSS 类。 下拉菜单中的每个模块都需要分配给它的相同 CSS 类才能包含在下拉菜单中。

  • CSS 类：下拉菜单项

优雅的主题下拉菜单

主要元素 CSS

最后但并非最不重要的一点是，我们将通过在主元素中使用一行 CSS 代码更改光标来完成模块设置。 

cursor: pointer;

优雅的主题下拉菜单

克隆模糊模块 x3

完成第一个 Blurb 模块后，将其克隆 3 次。

优雅的主题下拉菜单

更改内容和图标

修改每个副本的所有内容和图标。

优雅的主题下拉菜单

更改链接

随着链接。

优雅的主题下拉菜单

克隆最后一个模糊模块一次

继续克隆列中的最后一个 Blurb 模块一次。

优雅的主题下拉菜单

添加背景颜色

打开重复的 Blurb 模块设置并更改背景颜色。

  • 背景颜色：#f9f9f9

优雅的主题下拉菜单

更改图标设置

也修改图标设置。

  • 图标颜色：#3b45eb
  • 图标字体大小：22px

优雅的主题下拉菜单

更改标题文本设置

随着标题文本设置。

  • 标题文字颜色：#3b45eb
  • 标题文字大小：14px

优雅的主题下拉菜单

更改内容和链接

当然，还有内容和链接。

优雅的主题下拉菜单

在平板电脑和手机上禁用

我们在此下拉列表中的第二种类型的 Blurb 模块仅在较大的屏幕尺寸上可见。 这将帮助我们确保下拉菜单在较小的屏幕尺寸上不会变得太多。 要在较小的屏幕尺寸上隐藏模块，请转到高级选项卡并在平板电脑和手机上禁用该模块。

优雅的主题下拉菜单

克隆模糊模块 x3

完成第二种类型的 Blurb 模块后，您可以将其克隆 3 次。

优雅的主题下拉菜单

更改内容和图标

确保更改每个副本的内容和图标。

优雅的主题下拉菜单

更改链接

随着链接。

优雅的主题下拉菜单

将文本模块添加到第 1 列

添加内容

我们在下拉菜单中需要的最后一个模块是文本模块。 我们使用文本模块而不是按钮模块，因为文本模块将更容易适应下拉环境。 添加一些您选择的副本。

优雅的主题下拉菜单

背景颜色

然后，更改背景颜色。

  • 背景颜色：#3776ff

优雅的主题下拉菜单

文字设置

转到设计选项卡并相应地修改文本设置：

  • 文字字体：Lato
  • 文字字体粗细：粗体
  • 文本字体样式：大写
  • 文字颜色：#ffffff
  • 文字字母间距：3px
  • 文本对齐：居中

优雅的主题下拉菜单

间距

也添加一些自定义间距值。

  • 上边距：20px
  • 下边距：20px
  • 左边距：4%
  • 右边距：4%
  • 顶部填充：15px
  • 底部填充：15px

优雅的主题下拉菜单

边界

然后，在边框设置中添加圆角。

  • 所有角落：100px

优雅的主题下拉菜单

盒子阴影

启用微妙的框阴影。

  • 框阴影垂直位置：14px
  • 阴影颜色：rgba(0,0,0,0)（默认），rgba(0,0,0,0.09)（悬停）

优雅的主题下拉菜单

转换 翻译

在悬停时，我们希望按钮稍微向上。 为了添加这种效果，我们将在悬停时使用一些自定义变换转换设置。

  • 右：-3px（悬停）

优雅的主题下拉菜单

CSS 类

与下拉列表中的所有其他模块一样，该模块需要以下 CSS 类：

  • CSS 类：下拉菜单项

优雅的主题下拉菜单

主要元素 CSS

我们将通过在主元素中使用一行 CSS 代码更改光标来完成模块设置。 

cursor: pointer;

优雅的主题下拉菜单

删除第 2 列和第 3 列

完成第一个下拉菜单列后，您可以打开行设置并删除行中的两个空列。

优雅的主题下拉菜单

克隆第一列两次

克隆第一列两次。

优雅的主题下拉菜单

优雅的主题下拉菜单

自定义项目

并根据需要自定义另外两个下拉菜单中的所有项目。

优雅的主题下拉菜单

4. 添加 CSS 和 JQuery 代码

将新代码模块添加到第 1 行列

现在我们已经准备好了所有的下拉菜单项，是时候将它们变成下拉菜单并将下拉菜单放在匹配的菜单项中了。 将代码模块添加到菜单模块正下方的第一行。

优雅的主题下拉菜单

插入 CSS 代码

并插入以下 CSS 代码： 

<style>
  
/* Enable class below once you're done editing the menu */
  
/*
.dropdown-menu-row {
display: none;
}*/
  
</style>
<style>
  
.et_pb_menu__menu [class*="dropdown-menu-container"] {
position: absolute;
top: 75px;
left: -195px;
background-color: white;
width: 464px;
-webkit-box-shadow: 1px 2px 44px 0px rgba(84,81,179,0.36);
-moz-box-shadow: 1px 2px 44px 0px rgba(84,81,179,0.36);
box-shadow: 1px 2px 44px 0px rgba(84,81,179,0.36);
border-radius: 20px;
padding-top: 20px;
padding-bottom: 5px;
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);     
}
  
.et_pb_menu__menu ul>li:hover [class*="dropdown-menu-container"] {
visibility: visible;
opacity: 1;
}
  
.et_pb_menu__menu [class*="dropdown-menu-container"]:before  {
position: absolute;
left: 195px;
top: -20px;
width: 0;
height: 0;
content: '';
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid white;
}    
.et_mobile_menu [class*="dropdown-menu-container"] {
background-color: white; 
padding-top: 25px;
padding-bottom: 5px;
}   
.et_mobile_menu li > a {
background-color: transparent;
position: relative;
}
  
.et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\4c';
color: #FF4A9E;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
  
.et_mobile_menu .first-level > .icon-switch:after{
content: '\21';
color: #c9c9c9;
}
  
.et_mobile_menu [class*="dropdown-menu-container"] {
display: none;
}
  
.et_mobile_menu [class*="dropdown-menu-container"].reveal-items {
display: block;
}
  
.et_mobile_menu {
width: 130%;
margin-left: -15% !important;
min-height: 100vh;
}
</style>

优雅的主题下拉菜单

插入 JQuery 代码

我们也在使用一些 JQuery 代码。 确保将此代码放在脚本标记之间，如下面的打印屏幕所示。 

jQuery(function($){
$(document).ready(function(){
  
$('.dropdown-menu-column').each(function(i){
  
i = i + 1;
  
var $dropdownMenuItems = $(this).find('.dropdown-menu-item');
var $mainMenuItem = $('.first-level-' + i + '>a');
$dropdownMenuItems.wrapAll('<div class="dropdown-menu-container-' + i + '" />');
var $dropdownContainer = $('.dropdown-menu-container-' + i);
$dropdownContainer.insertAfter($mainMenuItem);
  
});
var $firstLevel = $('.et_mobile_menu .first-level > a');
var $allDropdowns = $('.et_mobile_menu [class*="dropdown-menu-container"]');
$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');  
});    
    
$(".dropdown-menu-row").css('visibility','hidden');
     
$(window).load(function() {
$(".dropdown-menu-row").fadeIn(1000);
});
  
});
});

优雅的主题下拉菜单

5. 完成自定义菜单后启用 CSS 类

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

  • CSS 类：下拉菜单行

优雅的主题下拉菜单

6. 创建 3 个以上的下拉菜单

将 CSS 类添加到外观菜单项

如果您正在寻找一种向菜单添加 3 个以上下拉菜单的方法，则需要导航回菜单并将连续的 CSS 类添加到第四个菜单项。

  • 要分配下拉列表的第四个菜单项： first-level first-level-4

优雅的主题下拉菜单

在行尾克隆列

然后，返回到您的标题并克隆最后一列。

优雅的主题下拉菜单

确保列和模块 CSS 类就位

确保新下拉菜单的列和模块 CSS 类就位，您就完成了！ 始终将新列专用于新的下拉菜单并遵循行的列顺序非常重要。 这意味着第 1 列将是下拉列表 1，第 2 列将是下拉列表 2，依此类推。

  • 列 CSS 类：下拉菜单列
  • 模块 CSS 类：下拉菜单项

优雅的主题下拉菜单

优雅的主题下拉菜单

预览

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

桌面

优雅的主题下拉菜单

移动的

优雅的主题下拉菜单

最后的想法

在本教程中，我们向您展示了如何使用 Divi 的 Theme Builder 重新创建 Elegant Themes 下拉菜单。 我们结合了两全其美，并使用 Divi 的内置元素为下拉菜单中的所有项目设置样式，然后使用一些代码将所有下拉菜单放置在 WordPress 菜单内的匹配菜单项中。 您也可以免费下载 JSON 文件！ 如果您有任何问题或建议，请随时在下面的评论部分发表评论。

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