WordPress divi主题

如何使用 Divi 的全角菜单模块创建下拉菜单按钮

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

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

在设计网站时,下拉菜单按钮真的可以派上用场。 除了主菜单外,网站上的某些区域可能需要子项目的下拉菜单。 我们看到它们被用于博客文章类别、列表和表单输入等内容。 但它们甚至可以用于主要的号召性用语。

google广告开户

在本教程中,我们将向您展示如何使用 Divi 的全角菜单模块创建下拉菜单按钮。 为此,我们将首先在 WordPress 中创建一个菜单。 然后,我们将使用 Divi 的全角菜单模块使用 Divi 构建器和一些自定义 CSS 来显示具有自定义样式的菜单。 结果是一个既实用又优雅的下拉菜单按钮。

让我们开始吧。

抢先看

这是我们将在本教程中构建的下拉菜单按钮的快速浏览。

桌面(悬停时下拉菜单)

divi 下拉菜单按钮

平板电脑和手机(点击时下拉菜单)

divi 下拉菜单按钮

免费下载布局

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

订阅我们的 Youtube 频道

要将布局导入您的页面,只需提取 zip 文件并将 json 文件拖到 Divi Builder 中。 自定义 CSS 已添加到布局底部单独部分的代码模块中。

WordPress divi主题

让我们来看看教程好吗?

你需要什么开始

要开始,如果您还没有,请安装并激活已安装的 Divi 主题(如果不使用 Divi 主题,则安装并激活 Divi Builder 插件)。 我们将使用前端的 Divi 构建器来设计下拉菜单按钮。

就是这样!

在 WordPress 中创建菜单

在我们开始使用 Divi Builder 构建下拉菜单之前,我们必须首先创建一个我们想用于全角菜单模块的 WordPress 菜单。 为此,请转到 WordPress 仪表板并导航到外观 > 菜单。 然后通过单击创建新菜单链接、输入菜单名称并单击“创建菜单”按钮来创建新菜单。

divi 下拉菜单按钮

现在,您可以使用“#”作为 url 占位符以及链接文本创建一些自定义链接。

构建菜单项,使顶层菜单项具有链接文本“了解更多”,其下有三个子菜单项。

divi 下拉菜单按钮

之后确保保存菜单。

如何使用 Divi 的全角菜单模块创建下拉菜单按钮

创建菜单后,我们可以开始使用 Divi 设计下拉菜单按钮。 要开始工作,请在 WordPress 中创建一个新页面并使用 Divi Builder 在前端(可视化构建器)编辑页面。

fiverr建站WordPress程序员

之后,您将有一个空白画布开始在 Divi 中进行设计。

创建模拟内容

首先,将一列行添加到默认常规部分。

添加文本模块

然后将文本模块添加到具有以下内容的行:

<h1>Dropdown Menu Button</h1>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

之后,更新设计设置如下:

部分填充

接下来,使用以下内容更新部分设置:

独立站选品工具

divi 下拉菜单按钮

行间距和边框

部分填充更新后,打开行设置并给行一些填充和轻微的边框。

  • 填充:顶部 10vw,底部 10vw,左侧 5vw,右侧 5vw
  • 边框宽度:1px

divi 下拉菜单按钮

创建下拉菜单按钮

为了创建下拉菜单按钮,我们将使用全角菜单模块。 这将允许我们添加我们之前创建的菜单。

添加全角菜单

要创建全角菜单模块,请在当前常规部分下添加一个新的全角部分。

高质量外链购买

divi 下拉菜单按钮

然后将全角菜单模块添加到该行。

divi 下拉菜单按钮

在全角菜单设置弹出窗口中(在内容下),使用下拉菜单选择要显示的菜单。 这应该与我们之前创建的名为“下拉按钮菜单”的菜单相同。

然后取出菜单的默认白色背景颜色。

JasperAI 10000字免费额度试用

divi 下拉菜单按钮

将菜单添加到全角菜单模块后,保存设置。 我们稍后会回到这个模块来完成设计。 但是现在,我们将为全角部分添加背景。

更新全宽截面设计

打开全角部分设置并更新以下内容:

  • 背景渐变左颜色:#0047d6
  • 背景渐变正确颜色:#45b2ff

divi 下拉菜单按钮

  • 最大宽度:240px
  • 截面对齐:居中

我将部分的最大宽度设置为 240px,因为这将匹配 Divi 中默认下拉菜单宽度的宽度。 对于桌面和移动设备上的按钮来说,它也是一个不错的尺寸。

WordPress备份工具updrafplus

divi 下拉菜单按钮

divi 下拉菜单按钮

在高级选项卡下,添加以下 CSS 类、溢出和 Z 索引。

  • CSS 类:下拉按钮
  • 水平溢出:可见
  • 垂直溢出:可见
  • Z指数:14

CSS 类是必需的,以便我们稍后才能将外部 CSS 定位到本节。 溢出需要设置为可见,以便我们可以看到下拉菜单。 Z 索引将有助于使下拉列表保持在页面上任何其他内容的顶部。

divi 下拉菜单按钮

设计全宽菜单

现在我们准备设计全宽菜单模块。 打开全角菜单模块设置并更新以下内容:

  • 使菜单链接全角:是
  • 下拉菜单文本颜色:#ffffff
  • 移动菜单文本颜色:#ffffff
  • 文本对齐:居中
  • 下拉菜单背景颜色:#45b2ff
  • 下拉菜单行颜色:#ffffff
  • 移动菜单背景颜色:#45b2ff

divi 下拉菜单按钮

  • 菜单字体:Encode Sans Semi Condensed
  • 菜单字体粗细:半粗体
  • 菜单文字颜色:#ffffff
  • 菜单文字大小:16px
  • 菜单字母间距:2px
  • 下拉菜单动画:展开

divi 下拉菜单按钮

定位下拉按钮

为了让按钮与底部边框重叠,我们需要添加一个正好是按钮高度一半的负上边距。

divi 下拉菜单按钮

差不多好了

这是迄今为止的结果……

divi 下拉菜单按钮

如您所见,悬停空间尚未占据整个按钮区域,下拉菜单仍在右侧。 为了解决这个问题,我们可以添加一些自定义 CSS。

添加自定义 CSS

在添加自定义 CSS 之前,请确保您已将 CSS ID“下拉按钮”添加到全角部分(而不是模块)。

如果没有 CSS ID,下面的 CSS 将无法工作。

要添加自定义 CSS,请打开页面设置并将以下代码粘贴到自定义 CSS 输入区域。


.dropdown-button .et_pb_fullwidth_menu .fullwidth-menu-nav > ul {
  padding-top: 0px !important;
}

.dropdown-button .fullwidth-menu li > a {
  padding-bottom: 0px;
  line-height: 81px;
}

.dropdown-button .fullwidth-menu li li a {
  padding: 6px 0px;
  line-height: 1.6em;
}

.dropdown-button .et_mobile_menu li a:hover, .nav ul li a:hover, .dropdown-button .fullwidth-menu a:hover {
  opacity: 1;
}

.dropdown-button .et_pb_fullwidth_menu_fullwidth .et_pb_row {
  padding: 0 0 !important;
}

.dropdown-button .fullwidth-menu li {
  display: block;
}

.dropdown-button .fullwidth-menu .menu-item-has-children &gt; a:first-child:after {  
  right: 20px;
}


divi 下拉菜单按钮

这是最终结果

divi 下拉菜单按钮

在移动设备上自定义菜单

现在,菜单将使用可点击的汉堡图标来切换移动菜单打开和关闭的移动版本。 这是它的样子。

divi 下拉菜单按钮

要修复菜单使其与桌面版本匹配,我们需要添加一些自定义 CSS。 打开页面设置并在我们当前添加的 css 下添加以下自定义 CSS。

@media (max-width: 981px){
  .dropdown-button .et_pb_fullwidth_menu .et_pb_row {
    width: 100%;
    }
  .dropdown-button .mobile_menu_bar {
    height: 81px;
  }
  .dropdown-button .mobile_menu_bar:before {
    font-family: inherit !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: #ffffff!important;
    letter-spacing: 2px !important;
    content: "Learn More";
    line-height: 81px;
    top: 0px;
}
  .dropdown-button .mobile_menu_bar:after{
    position: absolute;
    line-height: 81px;
    font-family: ETmodules;
    font-size: 20px;
    font-weight: 800;
    content: "3";
    padding-left: 20px;
    color: #ffffff;
}   
  .dropdown-button .et_first_mobile_item > a {
    display: none;
  }

}

上面的 CSS 使可点击区域跨越了部分/按钮的全宽和高度。 它还将汉堡包图标替换为与桌面版本匹配的一些文本和箭头图标。 这是使用 :before 和 :after 伪元素完成的。 这样我们就可以保留移动菜单的默认功能。

现在,移动下拉按钮的文本内容为“了解更多”。 但是我们可以通过更新移动菜单栏的 :before 伪元素下的以下 CSS 行来改变这一点:

content: "Learn More";

例如,如果您希望它读取“菜单”,您可以将 CSS 行更改为以下内容:

content: "Menu";

divi 下拉菜单按钮

最后结果

这是最终结果。

桌面(悬停时下拉菜单)

divi 下拉菜单按钮

平板电脑和手机(点击时下拉菜单)

divi 下拉菜单按钮

附加子项目

您甚至还可以添加子菜单项! 只需更新菜单编辑器页面上的菜单即可。

divi 下拉菜单按钮

最后的想法

使用 Divi 的全角菜单模块创建下拉菜单按钮涉及几个关键步骤。 首先,我们在 WordPress 中创建要拉入模块的菜单。 然后我们使用 Divi 构建器来设置我们喜欢的全角菜单模块的样式。 然后我们添加一些自定义 CSS 来完善桌面和移动设备上的设计。 结果是一个漂亮(且有用)的下拉菜单,它部署在桌面悬停和点击移动设备上。 希望您会发现这是对您的设计工具箱的有用补充。

我期待在评论中收到您的来信。

干杯!

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