如何使用 Elementor 在 WordPress 中构建超级菜单？

使用 Elementor? 构建 MegaMenu 需要什么

您可以使用可视拖放功能从 Element 创建一个漂亮的大型菜单。 如果要实现超级菜单的实际功能，需要使用第三方插件，名为 plus 插件。 WordPress 市场上有更多插件可以创建大型菜单。 尽管如此，Plus 插件还是为创建大型菜单带来了各种选项，可用于创建垂直大型菜单、水平菜单、基于切换的大型菜单等。它提供 -

• 它是为 Elementor 设计的 100%。
• 它可以让您构建像素完美的响应式菜单。
• 它具有跨浏览器兼容性。
• 大量满足您需求的定制选项。
• 易于构建具有拖放功能的任何界面。
• 与所有流行的 WordPress 主题兼容。

所以你需要——

• 元素
• 用于自定义标题的 Elementor Pro
• Plus 插件（它有一个免费版本，但您需要专业版的导航构建器功能。）

如何在 WordPress? 中添加超级菜单

通过 4 个基本步骤，您可以通过 Element 和 The Plus Add Ons 创建一个大型菜单。 尽管有几个子步骤，但下面将对其进行详细描述。

首先，激活 megamenu 功能并使用 Elementor 模板生成一个超级菜单。 设置本机 WordPress 导航以添加您的 megamenu（外观 > 菜单）。 然后，使用 Elementor 主题构建器构建标题，最后设置响应性。

激活超级菜单功能

首先，您必须激活 Plus Addons 上的超级菜单功能。 然后它将添加一个自定义帖子类型Plus Mega Menu以容纳您的所有超级菜单。 现在，使用 Elementor 创建一个新帖子来设计帖子类型的所有内容。

在 WordPress 仪表板中，导航到 Plus 设置、Plus 小部件，然后激活 TP 导航菜单小部件。

创建一个超级菜单模板

激活小部件后，您将立即看到新的 Plus Mega Menu 自定义帖子类型。 它将在您的仪表板侧菜单上显示为一个单独的选项。 单击Plus Mega Menu中的Add New以创建新的 Mega 菜单。

随意命名，因为如果您需要在不同的地方创建不同的超级菜单，这将非常有用。 要启动 elementor 界面，请单击使用 Elementor 编辑。 现在，您可以使用 Elementor 设计对观众可见的大型菜单布局。

这是一个基本的扩展大型菜单结构的示例。 您可以看到整个巨型菜单的一个父部分，我们添加了各种列来控制扩展菜单。 您可以使用常规 Elementor 小部件添加任何内容。 完成模板制作后，发布它。

设置导航菜单

您必须配置本机 WordPress 导航功能，因为您已经创建了一个大型菜单模板。 为此，请转到外观> 菜单。 如果您还没有创建菜单，请创建一个菜单。 现在在 Megamenu 中添加您想要的内容。 在顶部，添加基本项目，这些不会触发其他 megamenu 内容。 最简单的方法是使用自定义链接直接链接页面。 然后打开Plus Mega Menu添加菜单项侧边栏并添加您制作的超级菜单模板。

现在，您可能无法在“添加”菜单项区域中看到“Plus Mega Menu”选项。 遇到困难? 这是因为可能是 WordPress 隐藏了它。 要显示这一点，请单击右上角的屏幕选项并检查Plus 大型菜单选项。

您可以自定义巨型菜单的大小和对齐方式。 对于大小，您可以选择 - 默认（以像素为单位输入最大宽度）、容器（基于网站的容器大小）和全宽（无论任何设置，Mega 菜单都将展开其全部。）

您还可以自定义菜单对象、标签颜色和图标（如果需要）。

创建标题模板

现在您需要 Elementor 主题构建器来为您的网站创建自定义标题。 为此，转到 Templates > Theme builder 并为标题创建一个全新的模板。 由于我们已经创建了一个，我们将自定义我们现有的模板。 在主题构建器中，您可以利用 Elementor pro’s 显示条件来选择此标题在您网站上的显示位置。 它可以使其始终可见或仅对特定页面可见。 如果您已完成标题的基本轮廓，请从 plus 附加组件中添加导航菜单小部件。

您可以使用 Widgets 设置来控制菜单方向，例如水平、垂直或垂直。 然后使用选择菜单选择您在上一步中创建的菜单。 对于其他自定义，您可以在样式选项卡上执行此操作。

让它响应

最后，为大型菜单设置响应行为，以便您的访问者在任何设备上都能获得更好的体验。 您可以简单地从导航菜单中执行此操作。 从那里，转到内容选项卡中的移动菜单设置，启用响应式移动视图。