Astra 主题如何设置 Mega Menu 菜单

小渔 on 2022-03-07

如果想设置富媒体形式的菜单,那么就需要开启Astra主题的Mega Menu菜单功能,其前提就是将主题升级到专业版本。顺便提下Mega Menu菜单是Astra主题的自带功能,不像某些主题需要安装额外插件(比如:Hero Menu超级菜单插件)才能使用这种富媒体图文形式的菜单。

一、激活Nav Menu功能

安装并激活Astra Pro版本后,在WordPress > 外观 > Astra选项,右侧激活导航菜单(nav menu)功能,这是后续所有步骤的总开关。

Nav Menu

二、添加Astra Mega Menu配置

要实现Mega Menu功能,先要给顶级菜单开启Mega Menu,在WordPress后台 > 外观 > 菜单,选择要添加mega菜单的菜单项,展开后点击Astra menu settings按钮,这样顶级菜单下的所有子菜单就都启用了Mega Menu功能。

Mega Menu

点击“Astra menu settings”按钮后会显示Mega Menu菜单的设置项。

Content

Mega Menu Width下面有5个设置选项:

  • Content:菜单宽度设置为内容宽度。
  • Menu Container Width:限制主菜单的宽度。
  • Full Width:菜单设置为屏幕宽度但将菜单内容限制为内容宽度。
  • Full Width Stretched:菜单宽度设置为全宽,且边到边。
  • Custom Width:以像素为单位设置自定义宽度值。
Background Color

接下来就需要设置背景色或者添加背景图片。

背景设置

覆盖此Mega Menu菜单的颜色,为父菜单的Mega菜单中的菜单项设置颜色,包括文本/链接颜色、文本/链接悬停颜色、列分隔线颜色。

Highlight Lables

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

Advanced

高级选项可以为菜单项设置边距与填充,设置完成后点击保存即可。

三、简单Astra Mega Menu菜单

如果想让网站有以下的菜单结构(见下图)。

Demo

第一步,在“菜单”选项上创建类似的目录结构。

Category Level

第二步,在顶级菜单“About Us”上开启”Astra Menu”,其中“Mega Menu Width”可以自由选择,自己喜欢就好。

Menu Settings

同时,你可以更改文字、鼠标悬浮、分隔符的厌恶。

Override Colors

第三步,设置二级菜单为“Column Header”,依次类推统一设置一下就可以。

Astra Menu Options

保存菜单后就能在前端页面上看到设置后的效果,如果没有生效,请清除浏览器缓存与服务器缓存。

四、Elementor片段插入 Astra Mega菜单

如果你想将产品图片等多媒体元素内嵌到网站菜单上,那么就需要使用到Mega Menu的模板功能。

Demo

第一步,先利用Elementor创建一个模板,其中模板类型选择“Section”。

Elementor Template

第二步,利用Elementor将你想展示的信息设计成你想要的样式,并将其发布出去。

第三步,在网站“菜单”设置处,先布局好基本的菜单框架。

Menu Options

第四步,在顶级菜单开启“Mega Menu”功能,并将二级菜单处的内容来源设置为模板,并选中刚刚设计的Elementor模板,点击保存即可。

Menu Options

再回前台就可以看到设计好的菜单样式,至于文本颜色、样式、边距这些,多试试就熟悉了,熟能生巧。

获取我的流量秘籍

订阅我的邮件,第一时间获取精选技巧、真实案例和独家心得!

通过提交您同意我们的隐私政策

小渔聊独立站

小渔聊独立站

独立站运营过程中的经验与教训

我是小渔,一名技术起家的营销探索者,多年深耕独立站运营、流量增长与收益最大化,分享实用策略与经验教训,助力打造可持续的被动收入体系。

© 2025 小渔聊独立站 | 版权所有