菜单可以为您网站的访问者提供清晰的导航，这对于创建最佳用户体验 (UX) 至关重要。 但是，WordPress 的默认菜单设置有其局限性。 幸运的是，Beaver Builder 页面构建器有一个菜单模块，使您能够创建更高级的菜单，这些菜单既时尚又易于使用。

在这篇文章中，我们将讨论菜单在网站用户体验 (UX) 中的重要作用。 然后，我们将向您介绍如何添加、使用和自定义 Beaver Builder 菜单模块。 让我们开始工作吧！

为什么导航菜单是积极用户体验 (UX) 的关键

网站上的菜单是通常作为一组链接或图标一起呈现的类别或功能的列表。 它具有清晰的设计，使其与网页的其余部分不同：

您可以选择不同类型的菜单。 这些包括：

• 下拉菜单。 当您单击或将鼠标悬停在列表中的某个项目上时，此样式会显示子菜单列表。 这是最常见的方法之一。
• 弹出菜单。 也称为画布外菜单。 它类似于下拉菜单，但子菜单从侧面“飞出”，而不是从每个菜单项的底部。
• 超级菜单。 这种菜单是下拉式的，通常包含许多列。 它甚至可以在菜单本身内包含视频或图像。

菜单可以位于您网站上的任何位置，但它们通常位于页面顶部的导航栏中。 这可以帮助用户轻松浏览您网站的页面，而无需麻烦：

在构建 WordPress 网站时，您可能需要更强大的导航系统来显示您的内容。 这时候菜单就可以派上用场了。

以有组织的方式显示您的网站内容，通过以可访问的方式向访问者展示他们正在寻找的信息，从而改善了访问者的用户体验。 这反过来可以帮助减轻困惑或沮丧，并鼓励他们在您的网站上停留更长时间。

因此，改进的用户体验可以帮助提高您的转化率。 它甚至可以使您的 Core Web Vitals 受益，并增加您的网站出现在热门搜索结果中的机会。

如何添加和使用 Beaver Builder 菜单模块（分 5 步）

现在您已经了解了使用菜单的一些优点，是时候学习如何在您的网站上实施菜单了。 对于本教程，您需要在 WordPress 网站上安装 Beaver Builder 页面构建器。 让我们潜入水中！

第 1 步：创建菜单

在开始之前，您需要确保您的模块有可用的菜单。 您可以通过转到 WordPress 仪表板中的外观 > 菜单来执行此操作：

根据您想要的菜单中的内容，您可以从可用页面中进行选择。 您可以在添加菜单项下的页面框中找到它们：

从这里，您可以选择要在菜单上显示的任何页面。 做出选择后，点击页面右下角的保存菜单：

现在您已准备好向页面添加菜单。

第 2 步：将菜单模块添加到您的页面

从您的 WordPress 仪表板中，转到PAGES ，然后选择要添加菜单的页面。 单击Launch Beaver Builder按钮打开编辑器：

在编辑器框中，您会看到大量的模块选择。 您将能够在“操作”选项卡下找到“菜单”模块：

找到它后，只需将此模块拖放到您的页面上即可。 你可以把它放在任何你想要的地方； 然而，在这个例子中，我们将把它放在页面的顶部：

这样，您的网站访问者将能够轻松访问它。

第 3 步：配置您的菜单设置

此时，您已准备好配置菜单设置。 在General下的编辑器框中，您要做的第一件事是选择要显示的菜单。 然后您可以更改布局、子菜单图标和菜单名称。

默认布局是水平的。 但是，如果您更喜欢这种外观，可以将其设为垂直：

您还可以选择子菜单中显示的图标类型。 您可以选择Arrow s、 Plus sign或None ：

请注意，仅当您的主菜单项下方有嵌套的子菜单时，此功能才会显示在您网站的前端。

此外，在“常规”选项卡中，您甚至可以将徽标添加到菜单中以与您的视觉品牌保持一致。 为此，请向下滚动到徽标图像部分，然后单击选择照片以从媒体库中选择您的徽标：

无论您拥有哪种类型的网站，您都希望让您的菜单适合移动设备使用。 为此，请向下滚动到菜单模块编辑器框的底部。

在这里，您会找到“响应式”选项卡：

R esponsive Toggle默认为您可能熟悉的Hamburger Icon 。

它是相互堆叠的三条水平线，用于在移动设备上显示菜单。 当用户使用智能手机或平板电脑时，此图标将为搜索引擎优化您的菜单。

在这里，您可以从以下选项中进行选择： Hamburger Icon 、 Hamburger Icon + Label 、 Menu Button或None ：

您还可以在此选项卡中修改响应式样式和断点。 完成选择后，单击保存。

第 4 步：自定义您的菜单

现在是时候自定义您的菜单了。 要开始，请单击菜单模块编辑器框中的样式选项卡。

此选项卡允许您根据自己的喜好编辑菜单。 您可以从设置菜单对齐开始。 您可以在此处选择左对齐、居中对齐或右对齐：

接下来，如果您愿意，您可以为菜单选择背景颜色。

在此部分下方，单击链接以编辑链接颜色、链接悬停颜色和链接悬停背景颜色：

请注意，您只能在网站前端看到悬停颜色。 链接填充更改菜单项之间的间距。 向下滚动，您还可以在“字体”部分修改字体系列、大小、样式和间距。

如果您想进一步编辑样式，可以在Style & Spacing下进行。 例如，您可以在Transform下将字体切换为全部大写或小写：

此外，您可以使用装饰和样式添加下划线或斜体文本。

您还可以编辑菜单的其他方面。 例如，下拉部分允许您设置子菜单项的样式，包括颜色、链接悬停颜色、背景颜色和填充。

此外，如果您有 WooCommerce 商店并想在菜单上显示购物车项目，请转到WooCommerce选项卡：

在这里，您可以从Menu Cart下拉菜单中选择Show或Hide 。 在此示例中，我们选择了显示此功能。 您可以修改菜单购物车的元素，包括购物车图标和显示类型：

根据自己的喜好编辑菜单后，只需单击编辑框底部的保存。 有关添加 Beaver Builder 菜单模块的更详细说明，您可以查看我们关于该主题的文档。

第 5 步：发布页面并测试您的菜单

最后，如果您对菜单感到满意，您可以继续点击页面右上角的完成并发布：

您可以单击某些导航菜单项以确保它们转到正确的页面。 测试您的购物车链接可能也是一个好主意。

如果您正在寻找增强的自定义选项，您可以考虑使用带有 Beaver Themer 的菜单模块。 结合这两个强大的工具，您可以更好地控制您的菜单设计。

例如，您可以将 Menu 模块添加到 Beaver Themer Header 模板。 这使您可以轻松选择要在哪些页面上显示菜单。

而已！ 您现在应该有一个功能齐全的菜单。 这项新功能将帮助您网站的访问者更轻松地找到他们正在寻找的内容。

结论

当您向 WordPress 网站添加菜单时，您可以轻松地以有组织和专业的方式向访问者展示内容。 Beaver Builder 菜单模块使您能够创建用户友好且可访问的网页。 这可以带来更好的 SEO 性能和更流畅的用户体验。

回顾一下，这里是如何通过五个步骤添加和使用 Beaver Builder 菜单模块：

1. 创建一个菜单。
2. 将菜单模块添加到您的页面。
3. 配置您的菜单设置。
4. 自定义菜单的外观。
5. 发布页面并测试您的菜单。

相关问题

Beaver Builder 中的模块是什么？

模块是您在 Beaver Builder 页面构建器中用于创建页面的基本构建块。 我们的高级插件具有大量模块可供选择，几乎适合任何布局，从基本文本和照片到高级滑块和号召性用语 (CTA) 元素。

Beaver Builder Page Builder 和 Beaver Themer 有什么区别？

Beaver Builder Page Builder 插件可帮助您在 WordPress 中创建页面。 Beaver Themer 是一个 Beaver Builder 插件，可让您创建主题模板、主题部分等。 这意味着，您可以完全控制和自定义网站设计的外观。