Elementorで豊かな構造と美しいデザインのメガメニューを作成する方法

超级菜单是一种让你可以灵活创建时尚、功能强大的菜单的工具，非常适合为你的网站增加更多的导航选项和视觉元素。如果你希望为网站的导航系统增添创意和个性，超级菜单是一个绝佳的选择。在这篇文章中，我们将详细介绍如何使用elementor超级菜单创建一个结构丰富且设计精美的大型菜单。我们将使Bread Bakery网站模板作为示例，演示如何在网站的页眉中创建一个超级菜单。

一、激活超级菜单所需的实验性功能

在开始创建超级菜单之前，需要确保以下实验性功能已激活：

1. 弹性盒容器：允许更灵活的布局设计。
2. 嵌套元素：可以在容器内嵌套多个元素。
3. メニュー：专为构建超级菜单而设计的功能。

銘記：激活这些功能后，原有的导航菜单小部件将被替换为新的 WordPress 菜单小部件和菜单小部件。新小部件的功能更为强大，支持更多的自定义选项。

二、创建超级菜单

超级菜单通常放置在网站的页眉或页脚中，但也可以根据需要放置在其他位置。在本教程中，我们将以页眉为例，详细讲解如何创建超级菜单。

1. 使用主题构建器创建页眉

首先，创建一个新页面：

使用主题构建器创建一个新的页眉标题。

主题构建器提供了丰富的自定义选项，可以帮助你轻松设计符合网站风格的页眉。

2. 添加菜单小部件

在页眉中创建好容器后，将菜单小部件拖放到该容器中。

也可以根据需要添加一个新的容器，专门用于放置菜单。这样可以确保菜单在页眉中有足够的空间展示，并且不会与其他元素冲突。

3. 创建顶级菜单项

我们以 Bread Bakery 网站模板为例，菜单将包含三个顶级菜单项：Home（首页）、Our Bread（我们的面包）、Our Story（我们的故事）.

手順は以下の通り：

• 在菜单的内容选项卡中，点击项目 #1。

• 在标题文本框中输入“Home”。

4. 为菜单项添加链接

每个菜单项都需要链接到相应的页面。在为“Home”添加链接时，可以手动输入主页的 URL，但更推荐使用动态链接，这样当你更改页面 URL 时，菜单链接也会自動更新.

将菜单链接到主页，手順は以下の通り：

• 单击标题文本框旁边的动态标签图标。
• 选择“站点”>“内部 URL”。

• 点击“内部链接”。

• 在类型下拉菜单中，选择“内容”。

• 在“搜索和选择”框中，输入要链接的页面名称（例如“主页”），输入搜索，然后选择它。

对“我们的面包”和“我们的故事”页面重复上述步骤。这样，菜单项就会分别链接到相应的页面。

5. 查看并调整菜单结构

在完成菜单项的创建后，的页眉结构应该类似如下：

• Home
• Our Bread
• Our Story

此时，可以预览菜单的外观，并根据需要调整菜单项的位置和顺序，以确保菜单在页面上显示得整齐有序。

三、为超级菜单添加设计元素

超级菜单不仅仅是一个简单的导航工具，它还允许你添加多种设计元素，使菜单更加生动和互动。在本部分，我们将介绍如何为菜单项添加设计元素，例如图像或图标，从而提升菜单的视觉效果。

1. 为菜单项添加下拉内容

在“内容”选项卡中选择一个菜单项，例如“Home”。

点击下拉内容开关。

这个开关将菜单项转换为超级菜单，使你可以向菜单项中添加丰富的内容，例如图像、文字、按钮等。

2. 添加图像小部件

当下拉内容区域打开后，可以将图像小部件拖入其中。

当用户将鼠标悬停在该菜单项上时，你设置的图像就会显示出来。

手順は以下の通り：

• 在内容区域中拖入图像小部件。
• 选择当用户将鼠标悬停在菜单项上时出现的图像。
• 关闭内容区域，保存设置。

可以对菜单中的其他项重复此操作，为每个菜单项添加不同的图像或其他设计元素。这将使你的超级菜单不仅功能强大，而且在视觉上也非常吸引人。

3. 预览和调整

在编辑模式下，可能看不到这些图像的实际效果，因此需要预览页面来查看超级菜单的实际展示效果。通过预览，可以确保每个菜单项的设计都符合预期，并且所有的下拉内容都能正常显示。

概要

超级菜单是为网站增加创意和个性化导航的绝佳工具。通过详细的步骤和设计建议，可以轻松使用Elementor创建结构丰富、视觉吸引力强的大型菜单，为访客提供更好的浏览体验。为了更好地实现这些效果并解锁更多高级功能，建议使用エレメンタル・プロ，它提供了更多的自定义选项和强大的工具，助你打造专业级的超级菜单。