Elementor 导航菜单 - 为您的 WordPress 网站构建一个惊人的菜单

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

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

表中的内容：

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

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

至关重要的是要知道，导航菜单不仅对于将流量吸引到您的站点很重要，而且对于提高SEO排名也很重要。

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

第二个最重要的因素是保持“ WebCrawler”或Bot的作用，它们旨在对网站进行爬网并将内容编入相关级别并将其报告给搜索引擎，以将内容排名在正确的位置。

因此，如果您创建的菜单太复杂，则僵尸程序很难对您的内容进行排名，而且还会失去访问者。

简而言之，“易于导航”是增强更好用户体验的关键因素，并且在提高我们的网站排名和增加流量方面起着至关重要的作用。

这是许多企业网站保留一个导航图标而不是一个复杂的菜单栏的极好原因，该菜单栏在单击时会加载到全屏菜单。

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

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

在使用Elementor Navigation小部件之前，让我们探索如何使用Elementor免费版创建一个简单的WordPress菜单。

使用Elementor创建基本的WordPress菜单

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

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

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

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

现在，从左侧边栏中转到Appearance > Menus 。 在这里，您将找到一个两列布局，左侧是“添加菜单项”，右侧是“菜单结构”。

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

注意：别担心。 您的读者将无法看到菜单名称。 这是一项帮助您保持所有不同菜单井井有条的功能。

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

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

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

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

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

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

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

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

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

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

酷吧？

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

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

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

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

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

为每个可用的菜单位置分配一个菜单后，单击“保存更改”，就是这样。

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

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

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

导航菜单小部件本身的主要关键功能是什么？ 这是一个简短的介绍。

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

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

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

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

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

在设置部分的最上角，有三个可用选项： 内容，样式和高级。

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

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

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

动画部分：此部分将允许您在以下，上方或双行动画效果中添加动画效果。 您还可以使用框架，背景和微妙的文本动画。

下划线动画如下：

• 淡入淡出：淡入淡出动画在菜单项下方提供了淡入淡出动画。
• 幻灯片：幻灯片动画使菜单项下方的栏滑动。
• 增长：增长动画从中间到外部逐渐增长，并给人以增长的感觉。
• 插入：从下到上的动画流。
• 退出：退出动画从上到下流动。

同样，也有边框，上划线，双线，背景和文本动画。 他们每个人都提供了自己的动画集，您可以自己检查一下动画，以了解使用它们带来的好处。

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

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

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

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

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

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

彩色背景和版式：您可以在所需的配色方案和背景色的帮助下获得量身定制的品牌外观。 另外，您也可以选择透明或半透明菜单选项。

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

移动响应菜单

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

Elementor小部件可让您完全控制WordPress上的移动菜单选项。 Elementor设置部分的底部有一个用于移动屏幕设置的选项，您可以在其中查看您的移动屏幕选项。

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

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

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

包起来

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

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