Divi 插件亮点：Divi Mobile

Divi Mobile 是 Divi 的第三方插件，可以轻松为 Divi 网站创建自定义移动菜单。 所有设置都可以在主题定制器中找到，因此您可以查看移动菜单设计的实时预览。 这是一个易于使用的插件，它可以创建您可能需要的几乎任何类型的菜单。 在这个 Divi 插件亮点中，我们将逐步介绍 Divi Mobile 的功能，以帮助您决定是否在 Divi 工具箱中需要它。

默认 Divi 移动菜单

为了进行比较，这里是 Divi 的默认移动菜单。 菜单会自动更改以显示汉堡菜单。 单击菜单会显示一个包含所有链接的下拉菜单。 这不能与标准菜单分开调整。

主题定制器

一个名为 Divi Mobile 的主题定制器中添加了一个新菜单。 它是深蓝色和绿色文字，所以很突出。 所有调整都在此菜单中完成。 我正在使用财务顾问布局包。

在移动视图中，例如上面示例中的平板电脑视图，菜单会自动设置为 Divi Mobile 默认设置。 它包括一个深蓝色圆圈内的白色汉堡包菜单。 我将鼠标悬停在 Divi Mobile 菜单上，该菜单现在已交换颜色。

单击汉堡菜单会打开菜单，该菜单从侧面滑入并覆盖屏幕的整个侧面。 我已经在主题定制器中打开了菜单来显示选项卡。 其他项目将根据您选择的选项出现。 让我们看看主要的调整。

菜单样式和设置

菜单样式和设置有多个用于选择菜单的选项。 布局选项包括从屏幕外部显示的菜单（默认视图）、从形状展开和底部导航。 外部屏幕菜单样式将打开的动画和完全打开的样式添加到菜单中。 三种布局中的每一种都包括不同的选项。

上面的示例显示了与前一个示例相同的菜单，但我为菜单样式选择了全屏。 预览模式设置默认显示的模式。 我喜欢这个，因为它使背景光。

从形状扩展覆盖从右上角开始的整个屏幕。 它也可以从顶部向下伸展。 这会在背景上添加图标并将链接放置在背景之外，就像我在上面的示例中那样。 您可以在另一个名为“圆形拉伸设置”的菜单中调整其他设置中的颜色和图标。

底部导航在屏幕底部显示图标。 这在另一个名为底部导航设置的菜单中进行了调整。

通过调整断点，您可以让它在桌面上显示移动菜单。

自定义标题

自定义标题可让您完全控制标题。 第一部分是标题外观。 添加一个新的标志，调整其大小，调整背景颜色、阴影长度、模糊半径、阴影颜色等。我在这个例子中添加了一个新标志并更改了背景颜色。

下一部分是 Scroll 上的标题外观。 将菜单设置为固定，调整高度、标志大小、汉堡图标位置和背景颜色。 我对这些设置中的每一个都进行了更改。

标题元素允许您将元素添加到标题并调整它们的位置、大小和颜色。 我已将徽标移至右侧并将其设置为比正常情况略低（您可以将其设置为与标题或内容重叠的程度）。 我还添加了 WooCommerce 购物车，启用了搜索图标，将它们放在左侧，将它们更改为红色，并增加了它们的大小。

选择汉堡菜单

选择汉堡菜单为您提供了汉堡菜单图标上的许多选项。 设置向右或向左，从三个图标（三行、两行或三点）中选择，并选择动画样式，并选择动画方向。 我把它放在左边并选择了两行。

Burger Menu General 可让您调整菜单高度，设置汉堡图标与边缘和顶部的距离，并调整其悬停不透明度。 在这个例子中，我已经改变了这些调整中的每一个。

汉堡菜单图标调整让您可以为关闭和打开位置调整汉堡图标上线条或点的大小和颜色。 您还可以控制行高、边框半径和行间距。 这是关闭位置。 我已将线条的颜色设置为红色。

我已将打开图标的颜色设置为金色。

对于这一点，我将菜单图标放在右侧并选择了三行。 我已经调整了三行的颜色、行高、边框半径和位置。

您还可以添加文本。 它使您可以完全控制文本，包括水平和垂直位置、字体大小、颜色和样式。 此示例包括带有三个点的选项。

Burger Menu Background 和 Burger Menu Background Shadow 提供类似于 Divi 按钮的设置。 它们包括颜色、宽度、高度、边框半径、阴影水平和垂直长度、模糊半径和模糊颜色。 我已经调整了本示例中的大部分设置，使图标成为方形而不是圆形。

注入布局

Inject Layouts 允许您从 Divi 库中选择布局以注入到标题的不同位置。 将布局放置在菜单上方、菜单下方或移动自定义标题上方。

在本示例中，我添加了布局包中的部分，用于在菜单上方放置联系表单并在菜单下方放置联系信息。 我已将菜单设为全屏，以便更容易查看。

菜单外观

菜单外观可让您更改背景颜色、链接位置、字体大小、系列、颜色、悬停颜色、显示的屏幕一侧以及菜单区域的宽度。 我已将菜单移至左侧，更改了背景，增加了字体大小，更改了链接出现位置的顶部位置并将链接居中。

对于这个，我缩小了菜单区域，提高了链接，右对齐链接，并调整了字体悬停颜色。

在这个中，我将菜单移回右侧，使其更宽，文本左对齐，更改颜色，并在菜单下方注入了一个联系表单。

子菜单外观

有多种显示子菜单的样式。 这是折叠嵌套样式。 我保留了默认设置。 您还可以调整外观、移除边框和更改图标。

这是重叠滑入。 你可以调整字体大小、颜色、高度、悬停颜色、内容区域等。我已经在这个例子中调整了大部分设置。

这是子菜单样式并排。 它放置一个箭头图标，指向子菜单项。 您可以调整打开和关闭图标的高度、位置、颜色等。 我已经调整了打开图标的设置。

停止堆叠

注入布局的问题之一是模块会堆叠。 Divi Mobile 包含一个 Divi 模块，您可以将其添加到布局中，以防止其堆叠。 上面的示例是具有堆叠元素的布局。

只需将模块添加到行中。 不需要其他任何东西。

列不再堆叠。 根据您的布局，您可能需要调整菜单的宽度以使所有内容都适合您想要的方式。 它也适用于其他菜单布局和设计。 这是制作大型菜单的好方法。

购买地点

Divi Mobile 可从开发人员的网站获得。 有多种许可证可供选择：

年度的

• 1 个站点 12 英镑
• 2 – 5 个站点 36 英镑
• 无限£64

寿命

• 1 个站点 40 英镑
• 无限£196

它包括 1 年的支持。 只要许可证在您的网站上激活，您就会获得更新。

结束的想法

这就是我们对 Divi Mobile 插件的看法。 这是用于设计移动菜单的出色插件。 我只是触及了它可以做的事情的表面。 它易于使用，并有很多调整可供选择。 我喜欢它使用主题定制器来实时查看更改。

有几次我不得不保存并重新加载页面才能看到更改，但这可能是我的服务器。 我想看到一个默认的重置按钮，这样你就可以像使用标准的 Divi 控件一样轻松地恢复到默认设置。 不过，这可能不需要。

我对 Divi Mobile 的功能印象深刻。 如果您对创建自定义移动菜单的 Divi 插件感兴趣，Divi Mobile 值得一看。

我们希望听到您的意见。 您是否尝试过 Divi Mobile？ 请在评论中告诉我们您对此的看法。

精选图片来自 venimo/shutterstock.com