目录
Elementor中构建一个完整的mega菜单,而无需购买Elementor Pro。mega菜单是一个宽阔的多列下拉,它可以同时显示您网站的整个部分:链接,图像,图标,甚至是联系表单,而不是薄的垂直列表。Elementor的免费版本没有mega菜单小部件,但免费 主插件巨型菜单 添加一个,然后使用普通的 Elementor 编辑器设计每个面板。
本指南涵盖了整个构建:启用扩展、将巨型菜单附加到菜单项、设计下拉面板以及在移动设备上正确操作,这是大多数教程跳过的步骤。
您需要 Elementor Pro 来购买大型菜单吗?
号元素者中有一个巨型菜单有三条路线,其中只有一条需要花钱:
| 路线 | 成本 | 权衡 |
|---|---|---|
| Elementor Pro Mega 菜单小部件 | 付费年度许可证 | 您构建的每个站点都需要专业版 |
| 自定义 CSS/手绘编码菜单 | 免费的 | 脆弱,以后很难编辑,没有视觉编辑 |
| 主插件巨型菜单 | 免费的 | 添加一个插件; Elementor 中可视化构建的面板 |
Mega菜单是你即将升级的唯一原因,那么免费路线也做同样的工作,Master Addons也与Elementor Pro并行运行,没有冲突,因此现有的Pro许可证不会浪费Elementor 在此处记录自己的 Pro mega 菜单工作流程 如果您想并排比较这两种方法;它需要打开几个实验功能才能开始。
开始之前您需要什么
- Elementor(免费版本很好)已安装并处于活动状态
- Elementor 的主插件 已安装并处于活动状态
- WordPress 菜单已在下面创建 外观→菜单 (即使是粗糙的, 稍后可以编辑)
第 1 步:启用巨型菜单扩展
去 主插件 → 插件和扩展 在您的 WordPress 仪表板中,找到 巨型菜单 在扩展名列表中,然后打开。保存。
Master Addons 默认情况下所有内容都关闭,所以您只加载您使用的内容,这就是为什么此步骤根本存在。如果您没有立即看到该选项,请硬刷新管理页面(Cmd/Ctrl + Shift + R);缓存插件会保留旧管理菜单一分钟。
第 2 步:将菜单项转换为大型菜单
打开 外观→菜单 并扩展您希望大型面板从中掉落的顶级项目,通常是诸如"“产品”、"“服务”或"“商店”之类的广泛项目。
- 勾选 启用巨型菜单 该菜单项上的选项。
- 选择面板宽度。全宽从边到边延伸,容器宽度与您的内容对齐。
- 保存菜单。
仅在真正需要空间的项目上启用它。单个 “Contact” 链接上的巨型菜单比普通链接更糟糕:它使人们为一个目的地更加努力。
第 3 步:设计 Elementor 中的下拉面板
面板内容是一个 Elementor 模板,这使得这种方法变得灵活:您可以在页面上构建的任何内容,都可以放入菜单中。
- 单击 编辑巨型菜单内容 在菜单项上打开 Elementor 编辑器。
- 建多栏布局 三四栏适合大多数导航。
- 填写列:标题小部件作为类别标签,图标列表作为链接组,一两张图像用于视觉锚定。
- 发布模板。
一些使大型菜单正常工作而不仅仅是看起来繁忙的事情:
- 按客户的想法分组,而不是按您的组织结构图分组。 列标题应与访问者使用的单词相匹配。
- 每列大约有五到七个链接。 过去,扫描会崩溃,菜单会变成一堵墙。
- 给一栏工作。 特色产品、促销或 呼吁采取行动 赢得其空间超过第四个链接列表。
- 保持图像亮度。 Menu 图片加载到每个页面上压缩它们并服务 WebP:一个沉重的巨型菜单拖动整个网站的 加载时间的, 不仅仅是一页。
第 4 步:将菜单添加到您的标头
如果您的主题已经在其标头中渲染了 WordPress 菜单,则巨型菜单立即起作用。不需要进一步步骤。
要完全控制标头本身,请使用免费构建标头 主插件主题生成器:创建头模板,放入 导航菜单小部件、选择携带你的mega菜单的菜单,并将显示条件设置为你的整个站点,那对配对,免费主题构建器加上免费mega菜单,取代了人们最常购买pro的两个功能。
第 5 步:修复移动体验
Mega菜单大多是这样分崩离析的,1440px屏幕上看起来很尖锐的四列面板变成了手机上无尽的滚动。
- Elementor中切换到移动视图,并检查面板的真实高度,如果它运行超过两个屏幕,则为移动切割内容。
- Elementor 的响应式可见性控制在移动设备上隐藏装饰图像;保留链接, 丢弃装饰品。
- 垂直堆叠列并确认分接目标非常大。
- 在真实手机上进行测试,而不仅仅是编辑器预览。预览近似;它不会再现触摸行为。
如果您的断点与您的设计不符,则免费 自定义断点扩展 让您设置自己的。当默认平板电脑断点以尴尬的宽度切割菜单时,这很有用。
故障排除
- 超级菜单不会出现。 确认已切换扩展名,菜单项已勾选启用 Mega 菜单,并且面板模板已发布,未作为草稿留下。然后清除您的缓存。
- 面板出现,但没有风格。 通常是一个缓存的样式表。清除页面缓存和任何 CDN,然后硬重加载。
- Panel被切断或隐藏在内容后面。 一个父容器有
overflow: hiddenor低z指数,抬起头部的z指数,检查头部容器的溢出设置。 - 工作在桌面上,在移动设备上损坏。 Toggle/汉堡包区域几乎总是。验证菜单小部件的移动设置, 确认没有什么覆盖轻点目标。
常见问题
如何在没有 Pro 的 Elementor 中创建大型菜单?
装《元素大师》免费主插件,在《元素大师》>《插件与扩展》下启用《Mega Menu》扩展,然后打开《外观》>《菜单》,在你想要的项目上勾选启用《Mega Menu》,点击编辑《Mega Menu Content》在普通《元素大师》编辑器中设计下拉面板并发布。
如何免费在 Elementor 中创建菜单?
Elementor的免费版本,您可以通过外观>菜单构建标准WordPress菜单,并使用免费的Nav菜单小部件显示。对于巨型风格的下拉,单独的免费Elementor不包括该小部件,因此您需要一个免费的扩展,例如Master Addons Mega菜单来添加多列面板。
如何在不使用插件的情况下在 WordPress 中创建巨型菜单?
CSS和HTML自定义可以手工编码下拉,但它很脆弱,它在主题更新上中断,每次更改都需要开发人员,并且没有给你视觉编辑。大多数站点所有者从免费插件(例如Master Addons)中获得更快、更可维护的结果。
Max Mega 菜单免费吗?
Max Mega Menu 在 WordPress 插件存储库中有一个免费版本,加上一个付费的 Pro 附加组件,用于额外的样式选项,并且它独立于您的页面构建器而工作。Master Addons Mega Menu 是专门为 Elementor 构建的,因此面板设计时具有与您已用于页面相同的拖放编辑器。
Elementor 最好的巨型菜单插件是什么?
Elementor而需要视觉设计的面板而不学习新的界面,这取决于你已经运行了,Master Addons Mega Menu是一个可靠的免费选项,如果你需要动态条件的高级多级菜单,付费工具可能值得在承诺任一内容之前测试自己的内容。
如何使 Elementor 巨型菜单在移动设备上响应?
Elementor的移动视图切换,检查面板的真实高度垂直堆叠列,用响应式可见性控件隐藏装饰图像,保持轻点目标很大,并在实际手机上测试而不是编辑器预览如果默认断点尴尬地剪切菜单,请使用自定义断点扩展设置自己的。
为什么我的 Elementor 巨型菜单没有出现?
按顺序检查四件事:启用 Mega Menu 扩展名、菜单项已勾选启用 Mega Menu、面板模板已发布而不是保存为草稿、缓存已清除。如果面板出现但被剪辑,则父容器的溢出:隐藏或低 z 索引隐藏它。
相关阅读
