Astra主题如何添加设置 Mega Menu 菜单？

Astra主题添加Mega Menu 菜单是自带功能，无需额外的 Mega menu插件就能实现。很多主题要部署 mega menu插件才能实现同样的功能。魏艾斯笔记在本文中分享Astra主题如何添加设置 Mega Menu 菜单。

1、Astra主题设置Mega Menu的前提条件

要想在 Astra主题设置Mega Menu，前提条件是同时安装部署 Astra主题（免费）和 Astra Pro（付费）。

点击立即购买 Astra主题，下载上传到网站插件目录，去 WordPress后台启用即可。

定位到 WordPress > 外观 > Astra选项，右侧激活（Active）导航菜单（nav menu）。

2、Astra Mega Menu添加设置

想创建 mega menu菜单，先给顶级菜单开启 mega menu功能。

如果想把子菜单项变成 mega菜单，请按照以下步骤操作：

在 WordPress 后台 > 外观 > 菜单，选择要添加mega菜单的菜单项，展开并点击 Astra menu settings”按钮。

如下图所示，勾选启用 mega菜单，为其所属的所有子菜单都启用 mega菜单。

Mega menu width：mega菜单宽度设置为内容（content）、菜单容器（menu container width）、完整（full width）、全屏拉伸、自定义宽度（custom width）。

• 内容：菜单宽度设置为内容宽度
• 菜单容器宽度：限制主菜单的宽度
• 全宽：mega菜单设置为屏幕宽度，但将菜单内容限制为内容宽度
• 全宽拉伸：mega菜单宽度设置为全宽，边到边
• 自定义宽度：以像素为单位设置自定义宽度值

背景颜色（Background Color / Image）：设置 mega菜单的背景颜色、背景图片、背景重复、背景尺寸和背景位置等。

覆盖此mega菜单的颜色（Override Colors for this Mega Menu）：为父菜单的mega菜单中的菜单项设置颜色。包括文本/链接颜色、文本/链接悬停颜色、列分隔线颜色。

高亮标签（Highlight Labels）：出现在菜单项旁边的提示文本，突出显示。内容可以是：免费、促销、新品、精选等。还能设置标签文本和颜色。

高级（Advanced）：为菜单项设置边距和填充。

点击 save保存，再点击保存菜单，才能生效。

3、如何设置 Mega 菜单

老魏添加了一些页面来说明如何使用 mega菜单。

如果网站有以下的菜单结构

• 1
  • 第一标题
    • 2
    • 3
    • 4

• 5
  • 第二标题
    • 6
    • 7
    • 8

• 9
  • 第三标题
    • 10
    • 11
    • 12

菜单结构如下图所示：

这三个标题要以自定义链接的形式添加进去，因为只用作标题，没有具体页面。

此时在菜单1中点击 astra menu settings，勾选启用enable mega menu。

点击 save 保存。

再去第一标题的 astra menu settings，勾选启用 make this menu as column heading。

在 Menu Label 中根据个人喜好选择是否勾选 Hide Menu Label/Description和 Disable Link。

点击 save 保存。

最后点击“保存菜单”，这一步很重要，很多人就是因为这一步没保存，所以效果没生效。

下面看看带有标题的 mega菜单效果：

4、Elementor片段插入 Astra Mega菜单

我们还可以在 Elementor中导入库中现成的片段，或者自己制作一个 section 插入到 Astra Mega菜单中。

启用 Elementor插件和 Elementor Pro插件（只用 Elementor插件也行）。

在 WordPress后台> 模板 > 添加新模板。

选择模板类型：section（片段），再起个名字，保存模板。

回到菜单中。

1 这个页面还是要勾选启用Enable Mega Menu。

再去“第一标题”这个自定义链接菜单点击 astra menu settings，

• 可以不勾选启用make this menu as column heading。
• hide menu label/description：隐藏标题会更好看
• Disable link：去掉超链接，如果隐藏标题也就没有这一项了。
• 在 Content Source中选择 Template，在下面的 template中搜索并添加刚才建立的片段名。

下面是Astra Mega菜单效果：

老魏这里是简单说明使用方法，你可以精心设计一个漂亮的mega菜单。

5、Elementor Pro插件的好处

如果前面你使用了 Elementor Pro，一是生成的section片段额外提供短代码，可以放到网站任何文章/页面。二是可以使用 Elementor官方的模板库，制作精美、功能强大的页面、片段等一键导入。

上图中的 Mega菜单如果隐藏标题，那么链接可以在 Elementor 的片段中添加。

6、添加Astra Mega Menu 高亮标签

想让哪个标签后面出现高亮文字，就点击那个菜单的 Astra menu settings，设置如下：

• Highlight Labels中的 Menu Highlight Label输入高亮的文字
• Highlight Label Color：文字颜色
• Highlight Label Background Color：背景色

展示效果如下图所示：

添加到哪个菜单哪里就有高亮标签，可用于折扣、促销、出新品、划重点等用途。