如何在没有 Pro 的 Elementor 中构建 Nav 菜单(免费小部件)

Master Addons指南的精选图片,用于构建没有Pro的Elementor nav菜单,显示带有开放子菜单的桌面标头和带有汉堡包切换功能的手机

Elementor中构建一个可行的、风格化的导航菜单,而无需购买Pro。Elementor自己的菜单小部件仅限Pro,但免费的Master Addons Nav Menu小部件将任何WordPress菜单拉入编辑器,从面板中对其进行样式设计,然后折叠到小屏幕上的汉堡包切换。

下:为什么核心Elementor会留下空白,填补空白的三种方法,构建本身,以及自由停止的地方最后那部分比平常更重要,因为一种流行的移动模式不是免费的,大多数指南都说不然。

为什么 Elementor free 没有菜单小部件

Elementor的免费插件, 运送了数十个布局和内容小部件, 并且无法在页面或模板中放置WordPress导航菜单, 执行此操作的小部件, 最初称为Nav菜单, 现在称为WordPress菜单小部件, 仅限Pro。 Elementor 自己的文档 确认了。

Appearance > Menus 下仍然可以自行构建菜单,WordPress 将其注册得很好,差距在设计端:core Elementor 没有什么可以把该菜单掉进去的,所以无论你的主题决定打印它在哪里,你都会被困住。

Menu-ready 主题的简单站点上,那可能就足够了,当你想要自定义头、粘性条、你控制的汉堡包切换或巨型菜单的那一刻,仅靠免费的 Elementor 就无法到达那里。

多年来,命名发生了变化,这增加了混乱。旧教程说 Nav 菜单,新教程说 WordPress 菜单。许可证从未改变。它一直需要 Pro。

三种无需 Pro 即可添加导航菜单的方法

三种实物期权,每种期权的交易方式在造型和移动行为上都不同。

方法成本编辑造型移动最好的
主题菜单位置免费的没有,主题控制它取决于主题菜单就绪主题的简单网站
主插件导航菜单小部件免费的完整,来自面板汉堡拨动电话没有 Pro 的自定义标头
主插件巨型菜单免费的满满的折叠到切换多列面板,大导航
Elementor Pro 菜单小部件付费许可证满满的包括画布外Elementor Pro 上已有网站

主题菜单位置。 每个主题都注册至少一个菜单区域。分配您的菜单,它的工作插件为零。您无法从 Elementor 控制它的外观,并且移动行为是主题作者构建的任何内容。如果您的主题菜单看起来已经正确并且崩溃得很干净,那么确实没有理由在上面添加小部件。

主插件导航菜单小部件。 没有 Pro 许可证的 Elementor 本机选项。放弃 导航菜单小部件 进入任何模板,将其指向"外观">"菜单"中的菜单,以及面板上的样式颜色、间距、子菜单和移动切换。

主插件巨型菜单. Mega Menu 扩展程序对于类别较多的站点, 构建多列面板, 同时也是免费的, 它是一个单独的工具, 有自己的演练: 如何在没有 Pro 的情况下在 Elementor 中构建巨型菜单.

元素专业版。 如果您已经拥有它,它的菜单小部件和主题生成器会原生执行此操作,您应该使用它们。为一项作业运行两个插件只会增加权重。

Elementor 中添加 nav 菜单的四种方法的比较:主题菜单位置、主插件 Nav 菜单小部件、主插件 Mega 菜单和 Elementor Pro 菜单小部件
4个有3个没花钱,区别在于造型控制,手机上会发生什么。

构建菜单,开始完成

Wp-admin 和 Elementor 编辑器中进行整个构建,没有代码片段,没有子主题编辑,在开始之前,检查你的主题还没有打印自己的标头,因为两个堆叠的标头是人们在这里最常见的混乱。

1步:注册菜单

到外观>菜单,创建一个菜单,添加你的页面和链接,并给它起一个你将在六个月后识别的名字,这是简单的WordPress,没有插件特有的,WordPress有一个 菜单屏幕指南 如果您以前没有建造过。

WordPress外观菜单屏幕,其中包含一个名为主菜单的菜单,其中包含主页,菜肴,关于我们,博客和帐户项目
先在这里建立菜单,步骤3的小部件只显示这个屏幕定义的内容。

2步:创建头部模板

免费打开 主插件主题生成器 header 并添加一个新模板, 类型设置为 Header, 这是你的菜单所住的容器, 它让你取代主题的 header 而不是与之战斗。

主插件主题生成器模板创建弹出窗口,模板类型设置为标头
Template Type 决定这个渲染在哪里,头部就是你想要的那个。

3步:添加导航菜单小部件并选择菜单

Elementor面板中搜索“Nav菜单”, 拖入页眉, 在小部件设置中, 从选择菜单下拉选择您在步骤一中构建的菜单, 然后设置布局。水平适合一个标准页眉;垂直适合一个侧边栏, 并为您提供正常, 切换,手风琴和侧边子类型。

Layout是按设备设置的,手机默认使用汉堡包切换,所以桌面菜单在那里崩溃,没有额外的设置。

元素编辑器显示导航菜单小部件面板,其中选择菜单设置为主菜单,布局选项水平、垂直和下拉,以及断点下拉
1个面板做工作:菜单、布局、对齐和断点注意下拉布局位于列表中,但它需要Pro。

第 4 步:设计它

Style标签页中都是字体、颜色、间距、悬停状态和子菜单行为,不需要自定义CSS,这是Elementor根本做不到的部分核心,这也是添加小部件而不是使用主题菜单位置的全部原因。

Elementor 编辑器中设计自定义标头,带有徽标、导航菜单和号召性用语按钮
标头是普通的 Elementor 画布,因此菜单与任何其他小部件一样位于徽标和按钮旁边。

5步:发布并分配

保存模板并将其分配给整个站点。在唯一可用的显示条件的免费层上,当您想要一个头到处时,这很好。

主插件主题生成器显示条件面板包含和排除模板适用的规则
条件面板。免费保存一条整个站点规则;任何更窄的都是 Pro。

6步:在前端检查一下

Load站点,确认一个头部是渲染,而不是两个,如果你也看到主题的菜单,请在主题自己的自定义设置中禁用它,而不是用CSS隐藏它。

实时网站主页显示英雄部分上方的已完成自定义 Elementor 标头
一个标题,从模板而不是主题渲染。

让它在移动设备上运行

只在桌面上工作的菜单没有完成。在手机上,Nav Menu 小部件会折叠成汉堡包切换,并且该切换是免费的,包括其图标、活动状态和样式。

Toggle是专为键盘和屏幕阅读器使用而构建的,而不是仅用于鼠标。Enter和Space打开它,Esc关闭它。那值得检查你安装的任何菜单小部件,因为许多是由键盘无法到达的div构建的。

明确什么是免费移动菜单:折叠面板在切换下方展开到位,非常适合中短菜单,从侧面滑入的完整画布外面板是 Pro 功能,下一节将介绍。

Test on a real phone而不是浏览器设备工具栏。轻按目标、转换速度以及面板在外部轻按上是否关闭,在触摸屏上的行为都与在调整大小的桌面窗口中的行为不同。检查图标是否改变状态,以便明显菜单打开,并且一个子菜单项可以用一个拇指到达。

Elementor 站点的移动视图,导航菜单从汉堡包切换打开
折叠菜单从手机上的切换打开。 (此处显示在巨型菜单构建上,但切换的行为方式相同。)

免费版本停止的地方

两个限制,在您围绕它们进行设计之前而不是之后,两者都值得了解。

画布外和汉堡布局选择是 Pro。 布局控件免费提供水平和垂直,汉堡标有 Pro。手机开箱即用带有默认类型的汉堡,但选择汉堡用于其他宽度,或切换到弹出窗口或 Offcanvas 类型,需要 Pro。因此,"“off-canvas menu"通常意味着的滑动侧面板是这里的付费功能。通往类似内容的免费路径是垂直布局的侧面类型,它将菜单停放在页面的一侧,或者移动的标准汉堡切换。

主题构建器定位是一条规则。 Theme Builder 免费恰好保存一个显示条件: 整个站点。如果您想要一个头部到处都很好。不足以满足登陆页面上的不同头部, 登录会员的不同菜单, 或范围为一种帖子类型的头部。那些需要Pro。Our 显示条件细分 通过插件源跟踪该行,以及 免费主题构建器指南 涵盖该层的其余部分。

Master Addons Nav Menu 按层划分的功能图表:水平和垂直布局、垂直类型、断点控制和汉堡拨动是免费的,而下拉布局、弹出和画布外类型以及每页目标都是 Pro
Plugin源中验证过,免费栏目是一个完整的头菜单;Pro栏目多为画布外和目标定位。

Elementor Pro,你已经拥有了,这种解决方法都不适用,而且如果你的主题菜单位置足够,那么plain Appearance > 完全没有插件的菜单是正确的调用,一旦主题默认停止就足够了,就添加一个插件 小部件和扩展名目录 如果您正在权衡整个插件,请列出还有哪些内容可以免费提供。

如果标头需要一个您继续手动重建的部分,则 小部件生成器 让您将其作为真实的小部件创作一次。它位于 Pro 中,并且 定价页面 列出层数。

常见问题

Elementor 有免费的菜单小部件吗?

不是来自 Elementor 本身。核心插件没有菜单小部件;该插件仅随 Pro 一起提供。免费扩展名 Master Addons 添加了自己的 Nav 菜单小部件,因此您无需许可证即可放置和设置真正的导航菜单。

您可以在没有 Pro 的 Elementor 中创建导航菜单吗?

是。按正常方式注册外观>菜单下的菜单,然后使用免费插件将一个Nav菜单小部件放入头模板中并从面板中对其进行样式设置。仅Elementor free无法放置或样式设置菜单,因此您需要主题菜单位置或插件小部件。

如何在 Elementor 中免费添加移动汉堡菜单?

Master Addons Nav Menu 小部件添加到您的头部模板, 选择您的菜单, 默认情况下它会折叠到手机上的汉堡包切换, 切换,它的图标和它的样式都是免费的, 面板在切换下就地展开。

Master Addons 中的画布外菜单免费吗?

No。Off-canvas是汉堡布局内部的三种类型之一,选择该布局或其Popup和Offcanvas类型需要Master Addons Pro。免费上您将获得水平和垂直布局加上手机上默认的汉堡拨动,如果您想要侧面锚定菜单而无需付费,则垂直布局的侧面类型是最接近的免费等价物。

如何免费在 Elementor 中创建大型菜单?

Master Addons包括一个免费的Mega菜单扩展,它可以构建多列面板并在移动设备上崩溃,它与标准的Nav菜单小部件分开,专为具有类别,列或促销内容的更大导航而构建。

为什么我的 Elementor nav 菜单没有显示?

通常是一个未分配的菜单。检查一个菜单实际上是在小部件设置中选择的,而不仅仅是在"外观">"菜单"下创建。然后确认标题模板已分配给主题生成器中的整个站点,并且没有主题标题仍然处于活动状态并与之重叠。

我需要 Master Addons Pro 吗?还是菜单免费?

Nav Menu 小部件是免费的,包括造型、子菜单、每设备布局和手机上的汉堡包切换。Pro 添加了任何宽度的汉堡包布局及其弹出式和画布外类型,以及超出单个整个站点规则的主题生成器条件。

接下来该怎么办

用水平布局构建头部,然后在设计其他任何东西之前将其加载到自己的手机上,大多数菜单问题是移动问题,它们会在十秒钟内出现在真实设备上。

如果菜单需要多列面板,则 巨型菜单指南 从那里接。 Nav 菜单小部件页面 与 Elementor Pro 的菜单小部件进行比较,以及 导航菜单文档 列出每个控件。

罗伊·杰米的照片
罗伊·杰米
I’m Roy Jemee,Pixar Labs 的内容牧马人和营销人员,为 Elementor 编写主插件,我编写教程,录制视频,并保持文档的最新状态,所以你总是知道如何使用每个功能,我还处理支持,所以如果你遇到障碍,我就是帮助你修复它的人真正的答案,来自每天使用这些工具的人。

留下回复

您的电子邮件地址不会被发布。 标记必填字段 *

九月促销

40绔 涔诲芥澶澧% 离开一切

每个 Master Addons Pro 计划,每年一次,终身。一码,八天。

00
00人力资源
00
00

美国东部时间 9 月 14 日星期一 23:59 结束

  • 个人1 个站点 129美元77美元的
  • 商业5个站点 199美元的119美元
  • 开发者无限网站最适合代理机构 599美元的359美元

支付一次。永远不会续订。

优惠券代码 马里费岛40
立即享受 40% 的折扣
  • 30,000多个活跃安装
  • 4.5/5 来自212份点评
  • 14天退款