Divi 插件亮点：Divi MadMenu

Divi Madmenu 是 Divi 的第三方插件，它为 Divi Theme Builder 添加了新的菜单功能。 添加按钮、Woocommerce 购物车、搜索选项并调整每个元素的位置。 为桌面、平板和手机设计独立的菜单，并设置断点。 将标题设置为固定并添加动画。 每个元素都是可定制的。 在本文中，我们将看看 Divi Madmenu，看看它能做什么。

带有 Divi Theme Builder 的 Divi Madmenu

Divi Madmenu 专为与 Divi Theme Builder 配合使用而设计。 安装插件后，转到 Divi Theme Builder，单击Add Global Header ，然后选择Build Global Header以创建自定义标题。

您将看到一个名为 MadMenu 的新模块添加到 Divi Builder。 这是您需要使用的唯一模块，但如果您想添加更多功能，也可以使用其他模块。

内容

该模块显示一个菜单并提供许多自定义选项。 Elements允许您启用桌面和移动菜单、徽标、搜索、购物车和两个按钮等功能。 它们可以以不同的方式排列并独立设计。

桌面菜单允许您选择要显示的菜单，设置断点以确定何时更改为移动菜单，并设置子菜单动画和持续时间。

移动菜单允许您为移动设备选择不同的菜单，并添加选项以折叠子菜单、使父链接可点击以及选择手风琴模式。 它包括与桌面菜单相同的动画选项。

移动菜单切换包括图标和标签选项，包括切换格式、关闭和打开的标签以及标签位置。

如果启用徽标，您将看到一个选项，用于选择徽标、提供链接 URL 并决定它是否会在同一窗口中打开。

如果启用了搜索，您可以选择图标或图像。

对于Cart ，您可以显示图标、内容或图标和内容、选择图像或显示徽标、选择可见性选项、实时更新等。

按钮 1和按钮 2是独立调整的，但它们具有相同的选项。 添加文本、图标，选择图标位置、可见性、链接，然后选择它的打开方式。 在上面的示例中，我向两个按钮添加了文本，并在第一个按钮上添加了一个图标。

设计

“设计”选项卡为文本、菜单项、桌面和移动菜单、桌面和移动子菜单、徽标、搜索、购物车、按钮等添加了选项。 下面来看看其中的一些。

Layout General允许您选择对齐方式。 将其设置为右侧、左侧、中心、周围空间、中间空间和均匀空间。 选择下拉方向并为桌面和移动设置菜单顺序。 在这个例子中，我将对齐设置为右并将子菜单的下拉菜单直接设置为向上。

布局元素可让您控制菜单、徽标、搜索、购物车、按钮 1 和按钮 2 的对齐方式、宽度等。

每个元素都有一个文本设计选项，其中包括普通菜单和固定菜单的设置。 调整活动链接颜色、常规链接颜色、字体、字体粗细、大小、间距等。上面的例子是文本：桌面菜单。 我改变了颜色、字体大小和间距。

文本

这是文本：桌面子菜单。 我改变了颜色、字体大小，并使文本大写。

这是文本：移动菜单切换。 它为打开和关闭文本提供文本自定义。 我改变了字体颜色并增加了大小和字母间距。

这是文本：移动菜单。 我改变了字体颜色并使文本大写。

文本：移动子菜单控制下拉菜单的字体。 我改变了颜色，为每个单词选择了一个更大的第一个字母的大写文本，增加了字体大小，并使文本居中。

文本：按钮 1 和文本：按钮 2具有相同的选项并独立控制它们的按钮。 我增加了两个按钮的字体大小并使按钮 1 更大。 我也改变了它们的颜色。 对于按钮 2，我选择了不同的字体。

文本：购物车控制购物车内容文本的字体。 我更改了字体颜色，增加了大小，将字体设为斜体，使用波浪样式为字体加下划线，并更改了下划线颜色。

菜单

桌面菜单项可让您控制背景、边距、填充、角、边框、框阴影等。我更改了背景颜色、添加了边距和填充以在菜单项之间添加空间、添加角、边框和框阴影。

桌面子菜单项为您提供与菜单项相同的控制。 我改变了背景颜色，在每个项目的顶部添加了一个边框，并添加了一个框阴影。

我喜欢每个项目都可以单独设计。 我已经在主菜单、菜单项和搜索中添加了框阴影，并且我已经圆了它们的角。 我还更改了字体和背景的颜色。

这是我为我的测试站点创建的一个。 我添加了带有框阴影、主菜单、搜索、购物车和两个按钮的徽标。 按钮的样式为白色背景和黑色边框。 我还使用布局中的颜色添加了底部边框。

通过深入研究演示，我们可以更好地了解菜单可以做什么。

Divi Madmenu 演示

该插件附带 10 个 Madmenu 演示，您可以将其上传到 Divi 库。 一些演示在其文件夹中包含图像。 您需要将它们上传到媒体库。

要在 Theme Builder 中使用演示，请单击以构建全局标题。 单击以插入一个部分，然后选择从库中添加。 现在您可以选择任何要使用的演示。

使用演示作为起点来创建设计或只是添加您的徽标和菜单。 他们充分利用了背景颜色、徽标选项、搜索选项和 CTA 按钮。 让我们看看我的测试站点的一些演示。 它们包括针对台式机、平板电脑和手机接头的不同设计。

演示 1

演示 1 使用站点标题、菜单和按钮 1。菜单使用居中对齐。 子菜单包括带有框阴影和边框的样式以分隔链接。 我将鼠标悬停在第二个链接上。

Mobile 增加了字体的大小，并为主菜单和子菜单使用了相同的样式。 它还使用带有打开和关闭按钮图标的文本，并用徽标替换站点的标题。

演示 2

演示 2 添加了一个标志、一个带有边框的圆形图标搜索、居中的菜单、购物车和按钮。 两个按钮都显示社交媒体徽标。 子菜单项的样式与背景无关。

移动菜单将所有图标居中，将菜单文本替换为打开的图标，并为菜单添加淡蓝色。

演示 3

演示 3 使用了有趣的按钮。 按钮 1 包含用于登录或注册的文本，它具有悬停效果，可在悬停时移除背景。 按钮 2 使用画线的心形图像。

对于移动设备，打开/关闭按钮包括图标和图标下方的文本。 按钮的图标使用 space-between 等距分布在标题上。 该站点的标题被替换为向右移动的徽标。

演示 5

演示 5 使用 space-between 布局并将按钮显示为 CTA。 两个按钮都使用不同颜色的背景来突出显示。

移动菜单将按钮放在最右侧和最左侧，并添加图标。 带有文本和图标的徽标和打开/关闭按钮位于中心。

演示 7

演示 7 将按钮放在标题的两侧，菜单位于中心。 徽标位于站点名称上方。 菜单包括带有文本的打开和关闭图标。 下拉菜单中的项目彼此分开，因此部分背景可以显示出来。

移动版本将按钮保留在原位，并用图标替换文本。 该网站的标题也被删除。

演示 8

演示 8 包括粗体黄色，左侧有下拉菜单和标题，右侧有按钮菜单。 每个按钮都包含图形。

移动菜单将按钮放在左侧，将徽标和菜单图标放在右侧。

演示 10

演示 10 使用渐变作为背景，并在每个图标后面放置一个较暗的背景。 按钮包括文本和图标。 下拉菜单中的每个链接彼此分开，活动链接更暗。 徽标位于左侧。

移动菜单会删除除搜索图标之外的所有图标。 菜单由打开/关闭图标代替，徽标位于中央。 下拉菜单看起来相同。

购买 Divi Madmenu

Divi Madmenu 可以在 Divi Marketplace 中以每年 39 美元的价格购买，无限制使用以及一年的更新和支持。

结束的想法

Divi Theme Builder 的 Divi Madmenu 具有许多功能和自定义功能，可以轻松设计您可能需要的几乎任何类型的标题。 设计选项卡中的大量调整起初可能会令人困惑，但它们使用起来很简单，很快就会掌握控制什么的窍门。 使用这两个按钮以及向搜索和购物车按钮添加图像和图标打开了许多设计可能性。 如果您对使用单个模块创建有趣的菜单感兴趣，Divi Madmenu 值得一看。

我们希望听到您的意见。 你试过 Divi Madmenu 吗？ 请在下面的评论中告诉我们您对此的看法。

精选图片来自 venimo/shutterstock.com