如何轻松创建 Elementor 一页导航菜单

对您的网站进行可靠的导航至关重要。 无论您的网站有多个页面还是只有一个页面，您都必须确保正确的网站导航。

在 Elementor 中，您可以轻松创建多页导航菜单。 但是，如果您有一个单页网站并且需要设计一个菜单怎么办。

在本博客中，我们将向您展示如何轻松创建 Elementor 一页导航菜单。

在深入了解指南之前，让我们了解一页导航菜单的基本工作流程。

一页导航菜单的实际工作原理

一页导航菜单是指主要用于单页网站的简单导航菜单。 但是，它也称为单页滚动菜单，您可以以水平和垂直两种方式显示。

使用这种类型的菜单，您可以有效地配置单页内容的导航。 这样，您的用户可以通过将一个部分移动到另一个部分而不是重定向到另一个页面来轻松地从您的网站中找到所需的信息。

您可以通过两种方式触发菜单：

1.单击：您可以单击菜单项以将内容从一个部分显示到另一部分。

2.滚动：您可以使用滚动功能来浏览您的网站内容。

如何添加 Elementor 一页导航菜单

在我们博客的以下部分中，您将学习如何向 Elementor 支持的网站添加单页导航菜单。

先决条件：

要使用令人惊叹的单页导航小部件，您需要以下内容：

• 元素（免费）
• 快乐插件（免费）
• 快乐插件专业版

如果您是 Elementor 的新手，请查看此初学者分步指南。

确保您已安装并激活您网站的 Happy Addons免费和高级版。

第 1 步：添加一页导航小部件

您需要先添加快乐插件的单页导航小部件。 您可以在左侧的 Elementor 小部件库中找到该小部件。 只需将小部件拖放到您网站页面的选定区域即可。

第 2 步：管理导航内容

添加小部件后，您应该添加和管理导航菜单内容。

内容

内容部分具有三种不同的设置，可用于添加菜单项和设置其他必要的菜单内容。 他们是。

1. 导航
2. 工具提示
3. 设置

定义导航样式

在Content->Navigation区域，您可以从九个不同的列表中选择Navigation Style并添加Navigation List Items 。 此外，设置导航的水平对齐和垂直对齐。

这是您的导航样式列表。

1. 默认
2. 贝尔塔
3. 哈戈斯
4. 美高
5. 麦克马德
6. 沙姆索
7. 优巴克斯
8. 许斯尼
9. 扎希

设置您的第一个页面导航菜单

设置单页导航菜单，需要复制Items->Section Id ，粘贴到Advanced->CSS Id区域。 由于它是最重要的设置，因此您必须确保Section Id的名称和CSS ID的名称必须相同。

注意：您也可以编写不同的名称来设置导航菜单。

第 3 步：自定义菜单

设置导航项

您可以设置导航项的图标。 并且能够编写Navigation Title和Tooltip Title 。

启用自定义样式

根据您的目的，您可以将自定义样式添加到您的个人Navigation Item 。 首先打开一个项目并激活Enable Custom Style 。

现在您可以更改单个项目的内容颜色、内容颜色悬停和内容颜色活动。 按照下图了解设置。

工具提示

您可以启用工具提示选项以在您将鼠标悬停在其上时显示单个菜单的文本。 访问Content–> Tooltip区域并启用设置。 如果你想显示它，你也可以启用工具提示箭头。 请按照下图了解其工作原理。

内容设置

您还可以使用鼠标滚动将一个部分移动到另一部分。 为此，您需要转到Content–>Settings 。 在这里，您将找到滚轮选项。 只需启用设置，现在您就可以将一个菜单移动到另一个菜单。

您还可以启用仅适用于移动设备的触控滑动选项。 使用此选项，您可以通过滚动将一个部分滑到另一个部分。

您还可以启用滚动键选项，并能够在设置选项中设置行偏移和滚动速度。

注意：您可以使用键盘上/下箭头键滚动到特定部分。

第 4 步：自定义您的菜单设计

如果您想以自己的方式设置导航菜单的样式，可以轻松使用小部件的样式选项。 在样式区域中，您将获得三个不同的选项来重新设计您的菜单。

• 导航
• 导航内容
• 工具提示

一页导航Mneu的最终预览

如果您一个接一个地执行所有步骤，那么您的一页导航菜单将如下图所示。

阅读完整的文档以深入了解所有自定义选项。

或者查看 Happy Addons 的 One Page Navigation 小部件的便捷视频教程。

当您应该在您的网站中包含一页导航菜单时

您经常看到由称为主页的单个页面组成的网站。 该网站的所有者将所有必需的内容放在这个单一页面上。 但是，这个单页网站的目的是让您的访问者专注于您网站的内容。

但是，如果您没有像普通的多页网站那样为该单页设置适当的导航菜单，您将影响您的网站您的用户体验。 因为您的用户在您的网站上迷路并花费更多时间来获取您的内容。

要解决此类问题，您必须实现一页导航菜单。 它最终会帮助您的用户在您网站内容的各个部分之间跳转。

以下是一些适合您的单页网站创意。

• 投资组合网站
• 产品登陆页面网站
• 数字服务提供商网站
• 餐厅网站
• 照片库网站

注意：上面列出的网站也可以是多页的。

您准备好探索 Elementor 一页导航菜单了吗

如果您手头有正确的工具，那么创建 Elementor 单页导航菜单并不是一项艰巨的任务。

在本指南中，我们介绍了使用 Happy Addons 为您的网站制作单页滚动菜单的最简单方法。 我们还讨论了什么是单页导航菜单以及何时应将其用于您的网站。

如果您仍然卡住并想了解更多信息，可以在评论部分给我们写信。

我们还要求您加入我们的时事通讯，以获取有关 WordPress、Elementor 和 Happy Addons 的独家教程和新闻。