如何使用Elementor Pro和WordPress优化网站导航菜单

如果你想给网站设计一个漂亮的菜单，你可以选择几种不同的方法。一种是使用WordPress的默认菜单编辑器，这种方法简单实用。另一种是利用Elementor的导航菜单小部件，这样可以高度定制你的菜单，让它更符合你的需求。

在 WordPress 中创建导航菜单

在WordPress中创建一个导航菜单很简单，首先，登录到WordPress仪表板，然后点击侧栏上的“外观 > 菜单”。找到 并点击create a new menu，在页面你会看到一个输入框，用于输入你想要的新菜单的名称。输入名称后，点击蓝色的“创建菜单”按钮，就可以开始添加你的菜单项了。

2. 添加和自定义导航菜单

在页面一侧，应该看到包含页面、帖子、自定义链接和类别的下拉菜单可供选择。

在WordPress中向导航菜单添加页面非常直接。首先，确保你在“菜单”页面上点击了“查看全部”选项卡来浏览所有可用的页面。如果页面较多，可以使用“搜索”功能快速找到所需页面。选中你想要添加的页面旁的复选框，然后点击“添加到菜单”。

添加了几个页面到菜单后，你可以进一步自定义每个菜单项。点击菜单结构中每个项目旁边的箭头，你将看到以下选项：

• 导航标签：这是菜单中显示的链接名称，如“商店”、“图库”和“关于”。
• 标题属性：这是鼠标悬停在菜单项上时显示的提示文本，可以提供更多信息或说明。
• 在新窗口中打开链接：通常，除非链接到外部网站，否则不建议勾选此项。
• CSS类：这里可以添加CSS类来自定义样式，比如增加填充或加粗文本。
• 链接关系：如果链接指向相关联的第三方网站，这里可以说明关系，比如是合作伙伴、家庭成员网站或自己的另一个网站。
• 描述：如果你的主题支持显示描述，这里可以填写菜单项的简短描述。

3.更改导航菜单结构

当你添加完所有的菜单项后，你还可以进一步优化你的菜单，比如设置子菜单。WordPress允许你创建层级菜单，这意味着你可以设立父菜单项和它们下面的子菜单项。这样，当访问者将鼠标悬停在父菜单项上时，就会显示出其下的子页面。

要调整菜单项的顺序或创建子菜单，你可以通过拖放来操作。具体做法是：如果你想要设置某个菜单项为子菜单，只需将它拖到其对应的父菜单项下方，并稍向右拖动，这样就设置好了子菜单项。这样操作后，你的网站导航会更有层次感，也更易于浏览。

4. 发布你的菜单

在菜单编辑器界面中，点击“管理位置”选项卡。然后，选择你想要设置为新菜单的位置。可选的位置取决于你的网站主题，但一般来说，你可能会看到像“主菜单”或“顶部菜单”这样的选项。勾选对应的框，就可以将你的新菜单设置在这些位置了。这一步骤能帮助你确保菜单出现在网站的合适位置。

你也可以在主菜单页面的底部找到类似的设置选项，它们以复选框的形式呈现。

如果这种方法不适用，你可以尝试另一种方式：前往“外观”>“小部件”区域，然后把新的自定义菜单或导航菜单小部件拖到你希望的位置。这样就可以按照你的需求安排网站的菜单布局了。

Elementor Pro 的导航菜单小部件

为了使用导航菜单小部件，需要安装任意版本的Elementor Pro。如果使用免费版本，则必须坚持使用默认的 WordPress 菜单或使用第三方。

使用 Pro，还可以访问 300 多个模板、主题构建器、WooCommerce 网站和营销弹出窗口、更多网站动画以及专为 WooCommerce 用户提供的额外小部件。

如何在 Elementor 中制作导航菜单

导航菜单小部件非常灵活，功能丰富，可以让你自由地在网站上放置菜单，不仅限于页面顶部或标题区域。你可以将它放置在任何你喜欢的位置，甚至包括在文章中。以下是它的一些主要特点：

• 你可以在网站上任意位置添加多个菜单。
• 轻松添加吸引人的悬停动画效果。
• 支持移动设备响应设计，可以自定义在电脑、平板和手机上的显示方式。
• 可调整的版式、颜色和其他设计元素，让你可以精确控制菜单的外观。
• 提供详尽的填充、间距和对齐选项，确保菜单的每一个细节都完美无瑕。

首先，创建一个默认的 WordPress 菜单。务必遵循上述提示来了解具体操作方法。

如果你的 WordPress 菜单已完成，则可以使用导航菜单小部件将其添加到你的网站。为此，创建或编辑你希望菜单出现的模板（例如header）。在这里，查找导航菜单小部件并将其添加到您想要的位置。

完成后，你的 WordPress 菜单现在可以在 Elementor 中编辑 – 进行自定义了！

1. 布局和动画

在左侧边栏上，应该看到三个选项卡：内容、样式和高级。第一件事（如果尚未完成）是转到“内容”并将“菜单”更改为你要显示的菜单。这可以在预览屏幕中看到它。

在设置菜单的布局时，你可以选择水平布局、垂直布局，或者是隐藏的下拉折叠式菜单。尝试不同的布局选项，你会立刻看到菜单在各种风格下的变化。此外，你还可以调整菜单项的对齐方式，以满足你的设计需求。

在动画方面，你有多种选择来增加菜单的吸引力。这些动画包括下划线、上划线、双划线动画，以及边框动画、背景动画和文本动画。只需点击“指针”下拉菜单选择你喜欢的动画类型，然后点击“动画”查看和选择具体选项。这里你可以看到一些具体的动画效果示例。

子菜单指示器可以帮你修改子菜单箭头图标的显示样式。如果你想进一步自定义子菜单的外观，可以转到“样式”选项卡并点击“下拉菜单”部分进行展开。这里，你可以调整子菜单在正常显示和鼠标悬停状态下的行为，改变文字排版，添加边框、阴影或分隔线，并调整内边距以适应你的设计需求。这样的设置将使你的菜单更具个性和功能性。

2. 颜色和间距

你按照自己喜欢的方式设置了菜单布局，就可以通过颜色和填充调整对其进行更多自定义。转到“样式”选项卡并展开“主菜单”。

在版式设置中，你可以编辑文本的大小、字体和粗细，并可以选择将文本设置为全部大写或小写。此外，你还可以针对不同类型的设备进行单独的样式调整。例如，你可以设置在移动设备上增大文本大小，在桌面设备上改变文本颜色，或者根据你的喜好进行其他任何调整。这些选项让你能够为每种设备提供最佳的浏览体验。

你可以使用“文本颜色”和“指针”选项来定制菜单链接在正常浏览、悬停以及被激活时的颜色。针对这些不同状态，你可以分别调整悬停和活动状态下的样式。

调整间距也很简单且精确，你可以设置文本的填充、字母间距、行高等：

• 行高：调整行的高度，类似于垂直填充，影响文本上方和下方的空间。
• 字母间距：设置字母之间的距离，间距越大，字母之间的空隙越宽。
• 指针宽度：设置悬停或活动状态下线条的粗细。
• 水平填充：这是菜单项之间的空间，或在垂直布局中，菜单项与列边缘之间的空间。
• 垂直填充：在垂直布局中，这是菜单项之间的空间，或列顶部和底部之间的空间。
• Space Between：这个选项可以增加菜单项之间的空间。
• 边框半径：如果你使用背景色，这个设置可以添加圆角效果。

如果你设置了移动设备的断点，你可以为桌面和平板电脑模式设置不同的间距。如果没有，你需要单独编辑移动选项。

最后，在“高级”选项卡中，你可以设置CSS类、调整边距和填充、添加背景图片、更改响应式设置等。编辑这些选项时需要小心，以避免影响网站在移动设备上的表现。

3. 配置移动菜单

导航菜单小部件在“布局”选项卡中提供了一些专门为小尺寸设备优化的设置选项。下面是这些选项的简单说明：

• 断点：设置在何时改变菜单的布局，以便在平板电脑或手机等小屏幕设备上更好地显示。
• 全宽：启用此选项后，移动设备上的菜单会扩展到整个屏幕宽度，而不仅限于原有的导航栏宽度。
• 对齐：可以选择将移动菜单中的链接居中显示，或者让它们靠左或靠右显示。
• 切换：可以选择保留汉堡菜单（三条横线的图标）或在移动设备上完全隐藏它。
• 切换对齐：设置汉堡菜单图标的位置，可选居中、左对齐或右对齐。

在“样式”选项卡中，你还可以找到调整移动菜单切换按钮外观的选项，包括自定义颜色、背景、大小和添加边框等。这些设置帮助你进一步美化和优化移动端的菜单显示。

Elementor 侧边栏底部有一个响应模式选项。它可以让你预览移动菜单在平板电脑和移动设备屏幕上的外观。

总结：

在WordPress中创建自定义导航菜单有多种方式。虽然平台的默认菜单设置简单易用，能够满足基本需求，但如果你发现这些菜单不够灵活或缺少某些功能，那么Elementor的导航菜单小部件可能是更好的选择。使用Elementor，创建和自定义菜单变得非常简单且灵活，拥有广泛的定制可能性。