如何使用Elementor创建结构丰富且设计精美的超级菜单

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

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

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

  1. 弹性盒容器:允许更灵活的布局设计。
  2. 嵌套元素:可以在容器内嵌套多个元素。
  3. 菜单:专为构建超级菜单而设计的功能。
如何使用Elementor创建结构丰富且设计精美的超级菜单
如何使用Elementor创建结构丰富且设计精美的超级菜单
如何使用Elementor创建结构丰富且设计精美的超级菜单

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

二、创建超级菜单

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

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

首先,创建一个新页面:

如何使用Elementor创建结构丰富且设计精美的超级菜单

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

如何使用Elementor创建结构丰富且设计精美的超级菜单

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

2. 添加菜单小部件

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

如何使用Elementor创建结构丰富且设计精美的超级菜单
如何使用Elementor创建结构丰富且设计精美的超级菜单

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

3. 创建顶级菜单项

我们以 Bread Bakery 网站模板为例,菜单将包含三个顶级菜单项:Home(首页)、Our Bread(我们的面包)、Our Story(我们的故事)

步骤如下:

  • 在菜单的内容选项卡中,点击项目 #1。
如何使用Elementor创建结构丰富且设计精美的超级菜单
  • 在标题文本框中输入“Home”。
如何使用Elementor创建结构丰富且设计精美的超级菜单

4. 为菜单项添加链接

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

如何使用Elementor创建结构丰富且设计精美的超级菜单

将菜单链接到主页,步骤如下:

  • 单击标题文本框旁边的动态标签图标。
  • 选择“站点”>“内部 URL”。
如何使用Elementor创建结构丰富且设计精美的超级菜单
  • 点击“内部链接”。
如何使用Elementor创建结构丰富且设计精美的超级菜单
  • 在类型下拉菜单中,选择“内容”。
如何使用Elementor创建结构丰富且设计精美的超级菜单
  • 在“搜索和选择”框中,输入要链接的页面名称(例如“主页”),输入搜索,然后选择它。
如何使用Elementor创建结构丰富且设计精美的超级菜单

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

如何使用Elementor创建结构丰富且设计精美的超级菜单

5. 查看并调整菜单结构

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

  • Home
  • Our Bread
  • Our Story

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

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

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

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

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

如何使用Elementor创建结构丰富且设计精美的超级菜单

点击下拉内容开关。

如何使用Elementor创建结构丰富且设计精美的超级菜单

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

如何使用Elementor创建结构丰富且设计精美的超级菜单

2. 添加图像小部件

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

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

如何使用Elementor创建结构丰富且设计精美的超级菜单

步骤如下:

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

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

3. 预览和调整

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

四、总结

如何使用Elementor创建结构丰富且设计精美的超级菜单

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


联系我们
文章看不懂?联系我们为您免费解答!免费助力个人,小企站点!
电话:020-2206-9892
QQ咨询:1025174874
邮件:info@361sale.com
工作时间:周一至周五,9:30-18:30,节假日休息
发布者:光子波动,转转请注明出处:https://www.361sale.com/17294/

(0)
上一篇 2024年 8月 22日 上午10:37
下一篇 2024年 8月 22日 上午11:26

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

联系我们

020-2206-9892

QQ咨询:1025174874

邮件:info@361sale.com

工作时间:周一至周五,9:30-18:30,节假日休息

客服微信
为方便全球用户注册登录,我们已取消电话登录功能。如遇登录问题,请联系客服协助绑定邮箱。