WordPress divi主题

Divi 插件亮点:Divi Mega Pro

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

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

在 Divi 市场中找到它

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

google广告开户

在 Divi 市场购买

超级菜单是一种流行的设计元素,可以为您的网站提供优雅的提升,同时为访问者提供额外的导航层。 有几种方法可以将大型菜单添加到 Divi。 我使用过的最简单的方法之一是使用名为 Divi Mega Pro 的第三方插件。

Divi Mega Pro 使用 Divi Builder 可以轻松构建大型菜单。 可以使用 CSS 类将每个菜单添加到任何元素。 这意味着您可以将 Divi 布局添加到菜单中的任何链接,但您可以更进一步,只需添加 CSS 类即可将它们添加到任何 Divi 布局中的任何元素。 这非常适合使用商店模块、图像、滑块、投资组合、图标、简介、视频、博客等创建菜单和弹出窗口。它也适用于 Extra。

创建 Divi Mega Pro 超级菜单

Divi Mega Pro 菜单已添加到仪表板菜单中。 在这里,您可以输入您的许可证密钥,查看您创建的菜单,并创建一个新菜单。 当您单击添加新菜单时,您会看到菜单帖子类型的编辑器。 屏幕很简单,但实际上这里发生了很多事情。

编辑 – 您可以使用 Divi Builder 创建大型菜单或工具提示。

超级专业背景 – 您可以选择背景和字体颜色。

WordPress divi主题

显示位置 – 选择所有页面或命名特定页面,然后输入例外。

超级专业动画 – 选择一个动画。 从移开、前移、透视、淡入淡出或缩放中进行选择。

Mega Pro 触发器 – 添加一个 CSS 选择器触发器。 保存后,您将看到将粘贴到菜单项、模块、行或部分的 CSS 类字段中的 CSS 类。 这是为了显示菜单而单击或悬停的内容。 任何东西都可以用作触发器——不仅仅是菜单项。 这意味着您还可以使用 Divi Mega Pro 创建弹出窗口或工具提示。

Mega Pro 显示设置 – 选择显示方向(向上或向下),以像素为单位输入顶部和底部边距,选择宽度百分比,并启用箭头。 启用箭头会显示更多自定义项,您可以在其中选择箭头类型(三角形或圆形)、选择颜色、设置宽度和高度,并查看箭头的预览。

关闭按钮自定义 – 选择在桌面、移动设备上启用关闭按钮,并自定义关闭按钮。 选择启用它会显示对文本颜色、背景颜色、字体大小、边框半径、填充和显示预览的自定义。

fiverr建站WordPress程序员

Mega Pro 附加设置 – 选择触发类型(悬停或单击)、退出类型(悬停或单击),并输入退出延迟。

Divi Mega Pro 模板

开发人员为 Divi Mega Pro 提供了几个模板。 当您购买插件时,这些模板将在您的帐户中的插件布局模板选项卡中可用。 这些非常适合帮助您开始设计大型菜单。 我将在我的示例中使用其中的一些。

Divi Mega Pro 菜单

独立站选品工具

创建大型菜单后,它将出现在列表中。 在这里,您可以编辑、快速编辑或删除菜单。 您还可以搜索、按日期筛选、按状态查看等。它还提供了独特的 Mega Pro 课程,因此您可以从这里复制它们,而不是打开每个课程来获取课程。

  • 复制班级时,请确保粘贴时没有任何多余的空格。 这将导致页面上的所有大型菜单停止工作。

我确信添加起来并不容易,但是复制和编辑的功能会很方便。 您可以将 Divi 布局保存到您的库中以重复使用,但这不包括周围的设置。

添加触发器

在 Mega Pro Triggers 字段中,您会看到 Unique Mega Pro Class。 复制此内容并将其粘贴到您想成为触发器的项目的 CSS 类字段中。

高质量外链购买

要将 CSS 类字段添加到菜单项,您需要启用 CSS 类。 在菜单屏幕中,选择屏幕选项并启用 CSS 类。

将 CSS 类粘贴到菜单的字段中。 现在,此菜单项将在悬停时显示大型菜单,并在单击时将您带到页面。

您会注意到 Divi Mega Pro 也是菜单链接选项中的一个选项。 这些非常适合将菜单项添加到实际上不会去任何地方的菜单中。 像添加任何其他菜单项一样添加 CSS 类。

JasperAI 10000字免费额度试用

联系超级菜单

菜单在悬停时打开。 如果需要,我仍然可以单击“联系”链接打开联系页面。 如果我只想显示超级菜单,我可以使用 Contact Mega Menu 链接并重命名它(如上面的示例)。 在这一个中,我使用背景和显示设置而不是 Divi Builder 稍微调整了颜色。 它在菜单底部添加了一个栏。

带有菜单栏的简单号召性用语

这是添加多列的模板之一。 我正在调整背景和字体颜色。 我还添加了一个箭头并将宽度设为 75%。

WordPress备份工具updrafplus

背景和字体颜色选项为其添加了更多内容,因此它脱颖而出。 我将对齐方式保留为默认值,这会将菜单放在屏幕的右侧。 您可以在设置中调整位置。

标签

选项卡模板包含一个带有 jQ​​uery 的代码模块,用于创建悬停效果。

我已将内容添加到选项卡并设置样式以匹配站点。 左侧的每个链接都在菜单的较大部分显示不同的选项卡。

工具提示

对于这个,我将 CSS 类添加到一个简介中,以便它在悬停时打开一个小弹出窗口。 弹出窗口只是一个带有边框阴影的图像。 在上图中,我的鼠标悬停在 LIVE WEBSITE 字样上。 我还没有调整定位,但是很容易让它出现在你想要的位置。

对于这个,我创建了一个弹出窗口来显示带有文本的图像。 我将显示方向设置为向下,为了让它出现在我想要添加的图像旁边,我添加了 -300 的边距。

当我将鼠标悬停在它上面时,弹出窗口现在出现在图像的左侧和顶部。 我添加了透明背景颜色、边框颜色、填充和圆角边框。

许可证和文件

有四种许可证可供选择:

  • 单一站点 – 每年 15 美元
  • 三个站点 – 每年 29 美元
  • 无限的网站 – 每年 59 美元
  • 无限期 – 129 美元一次

文档由视频演示提供,网站上的一篇文章将引导您了解功能并逐步说明如何使用该插件。

您可以从开发者的网站购买 Divi Mega Pro。

结束的想法

使用插件很容易。 我发现所有设置都很直观。 我喜欢它包含模板。 该网站确实显示即将推出更多模板。 我希望这将包括演示页面中使用的所有大型菜单和弹出窗口,因为演示中有很多精心设计的布局。 设计一个很棒的大型菜单是困难的部分,这些可以帮助你开始一个可靠的设计。

该演示非常适合展示如何添加 CSS 类。 这对于那些不熟悉 CSS 的人来说尤其有用。 判断你是否熟悉 CSS 类并不难,而且添加 CSS 不需要太多步骤,因此使用插件不会增加太多难度。 无论如何,这是Divi用户应该学习的一项通用技能。

您可以向任何页面添加任意数量的大型菜单和工具提示。 我喜欢你可以将它们限制在特定页面。 这意味着您可以在页面级别创建自定义菜单。 这对于登陆页面或销售页面非常有用。

我只触及了您可以使用 Divi Mega Pro 创建的大型菜单和弹出工具提示类型的表面。 这是一个简单的插件,推荐给任何想要使用 Divi Builder 构建大型菜单或工具提示的 Divi 或 Extra 用户。

我们希望收到你的来信。 您是否尝试过 Divi Mega Pro? 在评论中让我们知道您对此的看法。

特色图片来自 pulsar011 / shutterstock.com