标准下拉显示一个薄薄的链接列表。一个巨型菜单会打开一个宽面板,同时呈现您网站的整个部分:分组的链接列、图像、图标,甚至是号召性用语。 巨型菜单 扩展于 Elementor 的主插件 wordpress菜单项上附加这些面板之一,并且您在普通的elementor编辑器中设计面板本身,因此您可以在页面上构建的任何内容都可以住在您的导航中,有关快速概述和演示,请参阅 免费 Elementor 巨型菜单构建器 页。
这是演示的最终结果:悬停产品打开一个带有分组链接和特色图像的三列面板。
Mega 菜单扩展程序的作用 #
启用后,WordPress 菜单中的每个项目都会在 Mega Menu 配置弹出窗口中 外观→菜单.打开它对于一个项目,该项目的下拉变为 Elementor 模板扩展名处理:
- 每个项目面板: 仅在需要的项目上启用巨型面板;其余的保持普通链接。
- 视觉面板设计: 下拉内容是使用 Elementor 编辑器构建的,使用您喜欢的任何小部件。
- 超级菜单宽度: 具有精确像素值的默认宽度、全宽度或自定义宽度。
- 触发效应: 在悬停或单击时打开面板。
- 过渡: 选择面板的动画方式,在演示中淡出。
- 移动菜单: 决定手机有哪些,包括在切换菜单中显示构建器内容。
- 徽章和图标: (免费)在菜单项标签上附加高亮徽章, 或带有自己颜色的图标(Pro)。
在开始之前 #
- 文字出版社 与 元素 已安装并处于活动状态;免费版就足够了。
- Elementor 的主插件 已安装并处于活动状态。插件新增?关注 安装指南 首先。
- WordPress 菜单已在下面创建 外观→菜单的, 甚至是粗糙的;以后可以提炼。
注: Page style选项中可以控制你的mega菜单的背景,一定要把背景颜色、图像或者你喜欢的任何东西放到page style选项中,默认会设置为白色背景,但是你可以从这个设置中对你的背景进行自定义,看看吧
步骤 1:启用 Mega 菜单扩展 #
从您的 WordPress 仪表板,转到 主插件 并打开 扩展 选项卡。巨型菜单位于 显示小部件 group。点击它的切换,这样它就变成紫色,然后点击 保存更改 等待保存的绿色“设置成功”通知。主插件默认情况下会关闭所有内容,因此您的网站仅加载您实际使用的内容。如果新选项没有立即出现在管理员中,则硬刷新页面(cmd/ctrl + Shift + R);缓存插件往往会保留旧管理员菜单一分钟。
第 2 步:打开菜单的巨型菜单 #
打开 外观→菜单. 一个新的 主插件巨型菜单 box 出现在菜单项列表上方。切换 启用巨型菜单 on并等待绿色的“兆菜单保存”确认, 菜单结构中的每一项现在都带有紫色 巨型大师 badge,这意味着它可以托管一个面板。
步骤 3:启用菜单项上的面板 #
Hover一个顶级项目,通常是像产品或服务这样广泛的东西,并打开它的Mega菜单设置。在弹出的 内容 选项卡,翻转 启用 Megamenu 到 是的. X = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 编辑 Megamenu 内容 button出现;它打开了这个项目面板的元素编辑器。点击 保存 完成后在弹出窗口中。
仅启用真正需要空间的项目的面板。单个联系人链接上的巨型菜单使访问者更努力地为一个目的地工作。
第 4 步:在 Elementor 中设计面板 #
单击 编辑 Megamenu 内容 and熟悉的elementor编辑器以面板作为画布打开,演示构建了三列:记录和分析标题下的两组链接,加上图像列,因此面板不是文本墙,当布局准备好时发布模板;草稿模板不会在实时菜单上渲染,这比其他任何东西都更能吸引人们。
Group链接,按客户的思维方式而不是您的org图表,并将每列封顶为五到七个链接;过去,扫描崩溃。给一列超出链接的工作,例如特色产品或一个 呼吁采取行动。并保持图像压缩,因为面板加载到网站的每个页面上,而不仅仅是一个。
5步:设置宽度、触发和过渡 #
回到项目弹出窗口, 设置 tab 控制面板的行为方式:
- 超级菜单宽度: 默认匹配菜单,全宽从边到边延伸,自定义宽度采用精确的像素值,例如 800px。
- 移动菜单: 手机接收什么;构建器内容在移动切换菜单中显示相同设计的面板。
- 触发效应: 悬停打开鼠标悬停上的面板;如果您喜欢故意打开,请切换为单击。
- 过渡: 入口动画,演示中的淡入淡出。
- 显示菜单标签/显示说明 (Pro): 项目上的可选标签和描述文本。
的 徽章 同一弹出窗口中的选项卡附有一个突出显示徽章,对于标记新条目或销售条目很有用。 图标 tab,对于图标和图标颜色,需要 Master Addons Pro。
6步:将菜单放入头部 #
如果您的主题已经渲染了 WordPress 菜单,则巨型菜单立即起作用。为了完全控制标头,请使用免费构建一个 主插件主题生成器:创建一个头模板,放入 导航菜单小部件(mega panels) 的菜单, 并选择承载您的巨型面板的菜单, 该小部件的常规部分涵盖了布局、对齐方式以及菜单崩溃的断点。
检查移动视图 #
Elementor编辑器切换到移动预览后再发布,菜单在汉堡包切换后崩溃,链接垂直堆叠,在这里检查面板的真实高度;一个看起来锐利的1440px的四列面板可以变成手机上无尽的滚动,如果它运行时间长,用Elementor的响应式可见性控件隐藏装饰图像,并保留链接,然后在实际手机上进行测试,因为预览近似触摸行为,但不会重现。
页面上的结果 #
Full Width 选择后, 发布的面板将整个视口边缘到边缘跨越; 此页面顶部的盒装版本显示默认宽度以供比较。无论哪种方式, 悬停项目都会打开设计好的模板, 过渡到您选择的过渡。
超级菜单效果良好 #
- 商店。 Shop 下一个面板中的产品类别、畅销产品和促销图片。
- 机构和服务企业。 服务按结果和特色案例研究进行分组。
- 出版商和博客。 主题中心与最新帖子拉入面板。
- SaaS 网站。 功能、解决方案和资源并排组织,而不是嵌套下拉。
- 大学和组织。 部门和快速链接本来可以深埋三层。
故障排除 #
- 超级菜单不会出现。 确认扩展切换已打开,菜单项已将启用 Megamenu 设置为 YES,并且面板模板已发布而不是保存为草稿。然后清除您的缓存。
- 面板出现,但没有风格。 通常是一个缓存的样式表。清除页面缓存和任何 CDN,然后硬重加载。
- 面板被切断或隐藏。 1个父容器隐藏溢出或者低z指数,抬高头部的z指数,检查头部容器的溢出设置。
- 工作在桌面上,在移动设备上损坏。 Toggle 区域几乎总是。验证 Nav 菜单小部件的移动设置, 确认没有什么覆盖轻点目标。
常见问题 #
如何在没有 Pro 的 Elementor 中添加巨型菜单?
在"主插件扩展选项卡中启用"Mega 菜单扩展,在"外观 → 菜单下打开"启用 Mega 菜单,在您想要的项目上将"启用 Megamenu 设置为"是",并使用"编辑 Megamenu 内容"设计面板。 Elementor Pro 不需要。
Mega 菜单扩展名免费吗?
是的。 Mega Menu 在扩展选项卡的显示小部件组中附带了 Elementor 的 Master Addons 免费版本。 定价页面 涵盖 Pro 计划添加的内容。
面板可以全宽吗?
是。item弹出的设置选项卡提供默认,全宽和自定义宽度。自定义宽度采用精确的像素值,例如800px,当您希望面板比页面窄。
我可以在下拉面板内放什么?
Elementor 可以构建的任何东西:标题小部件、图标列表、图像、按钮、表单。面板是一个常规的 Elementor 模板,因此页面上可用的每个小部件都可以在菜单中找到。
移动设备上的巨型菜单表现如何?
Menu 折叠在汉堡包切换后,链接垂直堆叠,移动菜单设置控制手机是否在切换内获取设计的构建器内容,Elementor 的响应式控制可让您在小屏幕上隐藏重面板元素。
包裹起来 #
的 超级菜单扩展 wordpress 菜单变成设计导航,三招:打开扩展切换,在项目上启用面板,在 Elementor 中构建下拉。宽度、触发器、过渡、徽章和(带 Pro)图标均从项目弹出窗口设置,并与免费配对 主题构建器 並 导航菜单小部件 为您提供一个完整的自定义标头,无需 Elementor Pro。全套 主插件小部件和扩展 距离一页之遥。
