如何使用 Elementor 创建超级菜单？ 使用导航菜单！

您是否使用 Elementor 并想在您的网站上添加一个大型菜单？ 你来对地方了！ 在本指南中，我们将向您展示如何使用 Elementor 使用 Nav Menu 创建大型菜单。

超级菜单现在非常流行。 这些丰富的菜单可帮助您改进网站导航，使您的用户可以轻松浏览您的内容并找到他们正在寻找的内容。 这些用户友好的菜单对于拥有许多类别和产品的在线企业和电子商务商店特别有用。

如果这是您的情况，我们建议您在您的网站上添加一个大型菜单。 由于它们有许多选项和链接，因此大型菜单似乎很难创建。 但是，使用Elementor ，您可以在几分钟内添加和管理大型菜单的所有内容。 这就是为什么在本指南中，我们将向您展示如何使用 Elementor 和 Elementor 的 Nav Menu 创建大型菜单。

为什么要使用 Elementor 创建超级菜单？

我们之前已经介绍了为您的 WordPress 网站使用大型菜单的需求以及它的许多优点，例如方便、舒适和网站导航。 但是为什么要特别使用 Elementor 来添加大型菜单呢？

Elementor是最流行的拖放页面构建器之一。 在站点自定义和元素创建方面，您使用 Elementor 的轻松程度是无与伦比的。 此外，它与 WooCommerce 的深度集成允许您为您的商店创建完美的大型菜单。 您可以轻松集成 WooCommerce 页面、商店商品、购物车页面，并且更顺畅地为您的用户提供最佳购物体验。

此外，Elementor 提供了大量选项来启用大型菜单，因此您可以选择最适合您需求的选项。 对于本指南，我们将使用导航菜单。 因此，让我们看一下使用 Elementor 创建大型菜单所需遵循的基本步骤，以及如何启用导航菜单。

如何使用 Elementor 使用 Nav Menu 创建大型菜单

要使用 Elementor 创建超级菜单，我们建议您使用导航菜单。 这是免费提供的 Elementor 的 Mega Menu 解决方案。 但在使用它之前，您需要设置一个简单的菜单设计，以便与导航菜单集成。

创建菜单

让我们从为您的网站创建正确菜单的过程开始。 首先，打开您的WordPress 管理仪表板并转到外观 > 菜单。

在菜单创建屏幕上，您可以自定义当前菜单或创建新菜单。 让我们通过按创建新菜单来创建一个新菜单。

然后，为您的超级菜单命名，然后单击“创建菜单”按钮。

可能会要求您提供菜单位置，但由于我们将使用 Elementor Mega 菜单，因此请不要设置任何菜单位置。 您还可以从“菜单位置”选项卡中的菜单位置中删除任何菜单。

现在，要将页面或帖子添加到您的超级菜单，只需选择要添加到超级菜单的页面或帖子，然后单击添加到菜单。 您还可以将您的 WooCommerce 产品以及特定的产品类别、标签，甚至 WooCommerce 端点（如帐户页面等）添加到菜单中。

现在，让我们创建一个简单的 Shop 大型菜单，其中只有 WooCommerce 产品和关键的 WooCommerce 页面。

我们已经添加了所有正确的项目，但是菜单还没有准备好，所以让我们通过拖放一些项目来自定义它。 让我们添加一个自定义 URL 菜单项，将博客菜单与最流行的博客文章链接起来。 最重要的是，让我们在 Shop 页面下添加一个包含所有 Shop 产品的下拉列表。

继续并拖入Product 项下的所有 WooCommerce 产品和Blog项下的所有博客页面，以制作一个有效的下拉菜单。 您可以通过简单的拖放来选择博客/产品的顺序。

现在我们已经设置了主菜单，让我们继续并通过单击“保存”菜单按钮来保存它。

为 Elementor 设置导航菜单

现在我们已经添加了菜单，是时候开始在 Elementor 中构建 Mega 菜单了。 为此，让我们创建一个新模板。 转到您的WordPress 管理仪表板 > 模板 > 添加新模板。 然后将模板类型选择为Header ，为其命名并单击Create Template。

然后，按下Drag Widget here 区域上的Add New Section按钮。 在这里，您需要选择您的结构。 根据您要构建的菜单，有几个选项可供选择，但现在，我们将使用 1×1 结构。

现在，使用左侧边栏并单击边栏右上角的网格图标。 这将带您进入小部件选择屏幕。 然后，使用搜索栏搜索导航菜单并将此小部件拖动到新创建的小部件区域。

现在，在布局下，您必须选择要用于 Elementor Mega 菜单的菜单。 使用菜单选项并选择您刚刚为小部件创建的菜单。 这应该设置你的菜单。 但是，您可以使用 Elementor 和导航菜单执行更多操作。

因此，让我们继续在您的 Mega 菜单中添加更多动画和功能。

使用 Elementor 自定义您的超级菜单

单击 Elementor 上的 Mega Menu 将立即将您带到左侧边栏上的自定义选项。 让我们继续并更改一些选项。

一方面，您可以选择菜单项的对齐方式以更好地适应您的网站。 您还可以在菜单项上添加自定义指针，当用户将鼠标悬停在菜单项上时将显示该指针。 此外，您可以选择多个选项，甚至为每个指针添加自定义动画，为您的 Elementor 大型菜单增添一点魅力。

您还可以为子菜单指示器选择不同的图标。

使用 Elementor 为移动设备优化您的 Mega Menu

考虑到有多少用户通过手机浏览 Internet，最好自定义其他选项以优化您的大型菜单以进行移动查看。 这包括添加一个汉堡按钮来打开您的超级菜单、更改菜单对齐方式以及汉堡按钮。

完成自定义 Elementor Mega Menu 后，单击Publish ，您必须提供Display Condition 。 此选项可让您选择要在何处显示新创建的模板及其所有设计。 由于我们希望这个大型菜单显示在我们的网站上，我们将选择在整个网站上显示它的选项。

因此，按Add Condition并选择Include下的Entire site选项。 然后，单击Save and Close ，您的模板应该会显示在您的网站上。 当然，使用 Elementor，您可以选择在特定页面上隐藏或显示大型菜单。 您需要做的就是添加条件以排除或包含页面。

例如，要添加更多选项，请单击“发布”按钮旁边的“保存选项”按钮，然后按“显示条件”。 您可以添加另一个条件以排除另一个特定页面上的菜单，模板将相应隐藏。

这只是冰山一角。 您可以使用 Elementor 做许多其他事情来改进您的大型菜单。 所以现在，继续玩你的 Mega 菜单，在你的网站上充分利用它。

最后的话

总而言之，大型菜单是改善网站导航的绝佳工具。 它们允许您以有组织的方式显示许多类别和产品，以帮助用户浏览您的内容。

要将超级菜单添加到您的网站，您可以使用插件或按照我们的指南使用 Elementor 创建超级菜单。 如果您决定自己创建它，Elementor 的内置 Nav Mega Menu 选项无疑是帮助您高效完成工作的最佳选择。 该插件很简单，不需要花费大量时间来设置和自定义，而且非常易于使用。

所以，总结一下这个过程，让我们记下你需要做的事情来设置你的 Elementor 超级菜单：

• 创建和自定义您的 WordPress 菜单
• 创建一个标题模板并将您的 Mega Menu 小部件添加到其中
• 自定义您的 Mega 菜单小部件
• 将显示条件添加到您的 Header 模板并发布它

这应该设置您的大型菜单。 导航菜单不是您的 Mega 菜单小部件的唯一选项。 还有其他菜单插件/小部件可能更适合您的需求。 虽然导航菜单简单、最小且非常易于使用，但它缺乏更高级的功能。

如果您刚开始使用大型菜单，Nav Menu 是一个绝佳的选择。 但是，如果您想要更高级的功能，我们推荐 QuadMenu。 它添加了您通过导航菜单获得的所有功能以及更多自定义选项。 从特定的移动相关选项到全彩色和背景自定义以及要添加到您网站的其他元素和图标，应有尽有。 同样，Clever Mega menu 等其他插件提供了更多选项来包含商店商品并使您的网站更具相关性。

有关更多 Elementor 工具，您可以查看我们关于 WordPress 最佳 Elementor 插件的文章。

您是否使用导航菜单创建了 Elementor Mega 菜单？ 您还使用哪些其他方法？ 在下面的评论部分让我们知道！