spot_img
HomeDivi主题使用教程Divi 插件亮点:Divi Mobile

Divi 插件亮点:Divi Mobile

spot_img

在 Divi 市场中找到它

Divi Mobile 可在 Divi Marketplace 购买! 这意味着它已通过我们的审查,并符合我们的质量标准。 您可以访问市场中的 Divi Engine 以查看其所有可用产品。 从 Divi Marketplace 购买的产品具有无限的网站使用和 30 天退款保证(就像 Divi)。

在 Divi 市场购买

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

默认 Divi 移动菜单

默认 Divi 移动菜单

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

WordPress divi主题

主题定制器

主题定制器

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

主题定制器

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

主题定制器

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

菜单样式和设置

菜单样式和设置

高质量外链购买

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

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

菜单样式和设置

WordPress建站服务

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

菜单样式和设置

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

菜单样式和设置

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

wordpress建站公司

自定义标题

自定义标题

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

自定义标题

下一部分是 Scroll 上的 Header Appearance。 将菜单设置为固定,调整高度、标志大小、汉堡图标位置和背景颜色。 我已经对这些设置进行了更改。

自定义标题

标题元素让您可以将元素添加到标题并调整它们的位置、大小和颜色。 我已将徽标移至右侧并将其设置为略低于正常水平(您可以将其设置为与标题或内容重叠的最低值)。 我还添加了 WooCommerce 购物车,启用搜索图标,将它们放在左侧,将它们更改为红色,并增加它们的大小。

选择汉堡菜单

选择汉堡菜单

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

选择汉堡菜单

Burger Menu General 允许您调整菜单高度,设置汉堡图标与边缘和顶部的距离,并调整其悬停不透明度。 在此示例中,我已更改了这些调整中的每一个。

选择汉堡菜单

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

选择汉堡菜单

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

选择汉堡菜单

writesonic

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

选择汉堡菜单

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

选择汉堡菜单

汉堡菜单背景和汉堡菜单背景阴影提供类似于 Divi 按钮的设置。 它们包括颜色、宽度、高度、边框半径、阴影水平和垂直长度、模糊半径和模糊颜色。 我已经调整了本示例中的大部分设置,使图标变为正方形而不是圆形。

注入布局

注入布局

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

注入布局

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

菜单外观

菜单外观

WordPress花园粉丝福利

想做跨境电商独立站但是没什么钱?可以免费试用Shopline智能建站工具,一个月都不要一顿火锅的钱!(这里就可以在线申请!) 或者扫描下方二维码
shopline

菜单外观允许您更改背景颜色、链接位置、字体大小、系列、颜色、悬停颜色、它出现的屏幕一侧以及菜单区域的宽度。 我将菜单移到了左边,改变了背景,增加了字体大小,改变了链接出现的顶部的位置,并使链接居中。

菜单外观

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

菜单外观

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

子菜单外观

子菜单外观

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

子菜单外观

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

子菜单外观

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

停止堆叠

停止堆叠

注入布局的问题之一是模块会堆叠。 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? 在评论中让我们知道您对此的看法。

tiktok siteground

特色图片来自 venimo / shutterstock.com

siteground guangda
WordPress花园官方账号
WordPress花园隶致力于为广大跨境电商和独立站爱好者提供优质的WordPress教程、Woocommerce教程、Facebook、Twitter、tiktok、Instagram教程和谷歌SEO教程等资料和对应的建站推广服务。关注‘哟派出海’公众号了解最新资讯。粉丝福利:Shopline免费独立站建设14天优惠 商务合作: [email protected]
RELATED ARTICLES

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据