Elementor 导航菜单 – 为您的 WordPress 网站构建令人惊叹的菜单

您是否正在寻找一种方法来创建令人惊叹的菜单来帮助改善网站的 UI/UX？如果是这样，那么您来对地方了。在这里，我们整理了一份详细的指南来帮助您。

首先，我们向您展示如何为 WordPress 网站创建菜单的分步演练。一旦您掌握了窍门，我们将指导您如何使用 Elementor 导航菜单小部件来自定义和增强您的 WordPress 菜单。

目录：

• 为什么需要自定义导航菜单？
• 使用 Elementor 创建基本 WordPress 菜单
• 1. 为您的 WordPress 网站创建一个简单的菜单
• 2. 选择并自定义导航菜单项
• 3. 创建子菜单 - 父菜单项和子菜单项（可选）
• 4. 管理您的菜单位置并发布
• 如何使用 Elementor pro nav' 小部件创建导航菜单
• Elementor 导航菜单小部件主要功能
• 使用 nav-menu pro 小部件创建菜单
• 移动响应式菜单
• 总结

为什么需要自定义导航菜单？

重要的是要知道导航菜单不仅对于为您的网站带来流量很重要，而且对于更好的 SEO 排名也很重要。

事实上，导航菜单主要是为了用户参与而设计的，但这并不是唯一的目的。

第二个最重要的因素是关注“WebCrawler”或机器人的角色，这些机器人旨在抓取网站并将内容索引到相关级别，并向搜索引擎报告以将内容排名在正确的位置。

因此，如果您创建的菜单过于复杂，那么机器人将很难对您的内容进行排名，而且您也会失去访问者。

简而言之，“导航的便捷性”是增强用户体验的关键因素，对于提高网站排名和增加流量也起着至关重要的作用。

这是许多商业网站保留单个导航图标而不是复杂的菜单栏的一个很好的理由，点击菜单栏会加载到全屏菜单。

借助具有Elementor pro 小部件，您无需使用任何代码即可创建像素完美且极其灵活的菜单栏。

在本教程中，我们将向您演示如何使用Elementor 导航菜单小部件来获取自定义的高级 WordPress 菜单。

在开始使用 Elementor 导航小部件之前，我们先探讨一下如何使用 Elementor 免费版本创建简单的 WordPress 菜单。

使用 Elementor 创建基本 WordPress 菜单

现在，要创建 WordPress 菜单，您不需要安装任何特殊的plugin。默认情况下，WordPress 附带一个易于使用的菜单生成器，它将帮助您为您的网站创建简单的导航菜单。

话虽这么说，您将无权访问菜单的任何自定义选项。它将采用当前活跃的 WordPress 主题的设计。但如果这就是您想要的，那么这是为您的 WordPress 网站设置导航菜单的绝佳方法。

1. 为您的 WordPress 网站创建一个简单的菜单

首先，您需要登录 WordPress 后端仪表板。

现在，从左侧边栏转到“外观”>“菜单” 。在这里，您会发现一个两列布局，左侧为“添加菜单项”，右侧为“菜单结构”。

在菜单结构下，您将找到“菜单名称”字段。这将是我们现在要创建的菜单的名称。我们将其称为菜单 1。

注意：别担心。您的读者将无法看到菜单名称。该功能可帮助您整理所有不同的菜单。

为菜单命名后，单击“创建菜单”按钮使其可用。现在，您需要添加不同的菜单项。

2. 选择并自定义导航菜单项

现在是用菜单项填充新菜单的部分。在左侧的“添加菜单项”部分下，您将找到可以添加到菜单中的内容的有序列表。

默认情况下，这包含您的任何页面、帖子、登陆页面、自定义链接和类别。

只需使用复选框选择要添加的菜单项，然后单击“添加到菜单”按钮。这将用您选择的所有菜单项填充您的菜单。

注意“最近” 、 “查看全部”和“搜索”之间切换。如果物品很多，请记住使用这些选项。

添加完所有菜单项后，点击“保存菜单”按钮，然后继续下一步。

3. 创建子菜单 - 父菜单项和子菜单项（可选）

您是否知道默认情况下 WordPress 也允许您创建子菜单？创建子菜单结构时，您有一个父菜单项和一个子菜单项。

当用户将鼠标悬停在父菜单项上时，它将显示隐藏在其下方的所有子菜单项。

很酷吧？

现在要创建子菜单结构，您所要做的就是选择一个想要出现在父菜单上的菜单项。接下来，将所有想要作为子菜单项的菜单项拖放到其下方。现在只需将其拖到右侧即可完成！

4. 管理您的菜单位置并发布

现在您已经创建了新菜单并添加了子菜单，是时候管理其位置了。

在菜单编辑器的顶部，您应该注意到一个名为“管理位置”的选项。单击它，应该会显示类似于以下屏幕的内容：

现在，可用的菜单位置将取决于您安装的主题。在此amp中，我们有一个支持 3 个菜单的主题。

将菜单分配给每个可用菜单位置后，单击“保存更改”即可。

您现在已经了解了 WordPress 默认提供的所有基本菜单功能。但是，如果您想要更多自定义和功能，请继续阅读以了解 Elementor Pro 导航菜单小部件。

如何使用 Elementor pro nav' 小部件创建导航菜单

如果您想向 WordPress 网站添加自定义导航菜单，则需要 Elementor Pro 版本。 Elementor Pro 版本附带Elementor 导航小部件以及许多其他特殊功能，例如 300 多个模板、主题生成器、弹出小部件、WooCommerce 小部件和许多其他有趣的功能。

导航菜单小部件本身有哪些具体的关键功能？这里简单介绍一下。

Elementor 导航菜单小部件主要功能

• 导航菜单小部件让您可以自由地将菜单放置在您喜欢的任何位置。在标题或顶部或页面上的任何位置。
• 您可以在您的网站以及页面上单独或全局添加多个菜单。
• 通过使用动画、悬停效果或活动状态为您的菜单提供令人眼花缭乱的外观
• 创建网站的移动响应菜单并控制网站在移动屏幕上的外观
• 自定义菜单栏的颜色、版式和填充或其他调整
• 创建一个像素完美的菜单，具有正确的对齐、间距和填充精度。

使用 nav-menu pro 小部件创建菜单

您需要创建一个基本的 WordPress 菜单，如上所述，然后您将使用 pro-nav-menu 小部件自定义默认的 WordPress 菜单。创建主列表后，下一步是将其添加到您所需的位置，即标题部分。

现在，完成基本设置后，让我们使用导航菜单小部件自定义菜单。

在设置部分的最上角，有三个可用选项；内容、风格和高级。

布局部分：您有三个选项：水平、垂直或隐藏的下拉手风琴。

• 水平：水平布局是网站最常用的布局。它从左到右的方向遍布屏幕。
• 垂直：您还会在许多网站上找到垂直布局，特别是在提供创意服务的网站上。在垂直布局的情况下，导航栏的展开将从上到下。
• 下拉菜单：下拉菜单也很常见。下拉菜单是垂直布局，需要与用户交互才能显示。它们主要用于创建简洁的设计。

对齐部分：此部分帮助您对齐菜单文本项；中心、右侧或左侧。

动画部分：此部分将允许您在动画效果下方、上方或双线动画效果下添加动画效果。您还可以选择框架、背景和微妙的文本动画。

下划线动画如下：

• 淡入淡出：淡入淡出动画在菜单项下方提供淡入淡出动画。
• 幻灯片：幻灯片动画使菜单项下方的栏滑动。
• Grow ：生长动画从中间向外生长，给人一种生长的感觉。
• 插入：插入动画从下到上流动。
• Drop out：丢弃从上到下的动画流。

类似的还有加框动画、上划线动画、双线动画、背景动画和文本动画。他们每个人都提供了自己的一组动画，您可以亲自查看它们以了解您能得到什么。

指针部分：从下拉菜单中选择指针类型。

子菜单指示器部分：Elementor 小部件包含许多子菜单样式选项。您不仅可以控制菜单的颜色、样式，还可以控制背景。

填充和菜单间距：填充可以快速调整。您可以更改菜单和子菜单的水平填充、垂直填充、中间空间以及右对齐、左对齐和居中对齐。

Elementor 非常好地处理菜单间距和填充。他们在幕后努力工作，以确保能够将工具带给开发人员，以便他们可以轻松创建他们正在考虑的设计。

菜单间距提供了很多选项，包括：

• 菜单项之间的空间
• 菜单和子菜单元素的水平和垂直填充
• 居中、左对齐、右对齐和两端对齐。

颜色背景和版式：借助所需的配色方案和背景颜色，您可以获得定制的品牌外观。此外，您还可以选择透明或半透明菜单选项。

作为设计师，您可以尽可能多地使用这些选项，并确保根据您的喜好设计背景。

移动响应式菜单

移动设备是网络的重要组成部分，因此 Elementor 开发人员还提供工具，以便您也可以为移动设备创建导航栏。

Elementor 小部件允许您完全控制 WordPress 上的移动菜单选项。您可以使用一组单独的仅限移动屏幕的设置来控制移动屏幕视图。 Elementor 设置部分底部有一个移动屏幕设置选项，您可以在其中查看移动屏幕选项。

简而言之，Elementor 的移动菜单功能如下：

• 移动设备上的全宽：您还可以选择设置全宽或有限宽度。
• 平板电脑或移动设备断点：您可以使用断点设置来设置移动设备或平板电脑的移动菜单。
• 垂直和手风琴菜单： Elementor 还提供显示可折叠汉堡包图标的选项。
• 切换对齐：汉堡包图标可以居中、左对齐或右对齐。
• 侧边/居中对齐：选择移动菜单的对齐方式。

响应式导航：提供菜单的响应式定位。

总结

菜单是任何网站最重要的功能之一。因为它可以帮助访问者浏览您的网站，如果您巧妙地创建了一个列表，它将有助于让访问者在您的网站上停留很长时间。菜单与任何网站的整个布局、页眉和页脚部分同样重要。

因此，菜单小部件必须能够提供您独特的品牌外观和所有基本功能。 Elementor 导航小部件具有丰富的功能，允许客户自定义菜单部分以适应您的品牌声音。现在，您可以在整个网站、登陆页面、标题或您想要显示菜单的任何其他部分使用定制的时尚菜单。