主要外卖
- 没有 Pro 的 Elementor 无法将 WordPress 菜单放置在页面或标头中,因为 Elementor 菜单小部件(以前称为 Nav 菜单)仅随 Elementor Pro 一起提供。
- 不带 Pro 的 Elementor nav 菜单可以使用主插件 Nav 菜单小部件构建,该小部件显示任何 WordPress 菜单,并单独设置桌面、平板电脑和移动设备的布局。
- Elementor nav菜单中的子菜单来自WordPress:在外观>菜单中将一个项目稍微向右拖动到其父项下,直到它读取“子项”, 然后保存。
- Master Addons Nav 菜单小部件有四种垂直类型:普通打开悬停侧面的子菜单、点击时切换和手风琴扩展它们,以及侧面将菜单固定到页面边缘。
- Master Addons Nav 菜单小部件默认情况下会为手机提供汉堡包切换,而桌面或平板电脑上的汉堡包以及弹出窗口和 Offcanvas 类型需要 Master Addons Pro。
您无需购买 Elementor Pro 即可构建样式的 Elementor nav 菜单。Elementor 自己的菜单小部件仅为 Pro,但 Master Addons Nav 菜单小部件将任何 WordPress 菜单拉入编辑器,为面板中的每个级别进行样式设计,然后折叠为手机上的汉堡包。
本指南涵盖了核心 Elementor 留下空白的原因、填充方法以及分六个步骤构建标头。然后是子菜单、四种垂直菜单类型、移动行为、菜单未显示的通常原因以及需要 Master Addons Pro 的部分。
目录
为什么 Elementor free 没有菜单小部件
Elementor的免费插件, 运送了数十个布局和内容小部件, 并且无法在页面或模板中放置WordPress导航菜单, 执行此操作的小部件, 最初称为Nav菜单, 现在称为菜单小部件, 仅限Pro。 Elementor 自己的文档 确认了。
外观>菜单下仍然可以构建菜单,差距在设计端:core Elementor没有什么可以把那个菜单掉进去的,所以它出现在你的主题打印它的任何地方。
在一个简单的站点上,有一个菜单就绪的主题,这可能就足够了。一旦你想要一个自定义标头,一个你控制的汉堡包切换或一个巨型菜单,仅靠免费的 Elementor 就无法到达那里。旧教程将 Pro 小部件称为 Nav 菜单,较新的教程将其称为菜单,但它一直需要 Pro。
三种无需 Pro 即可添加导航菜单的方法
Elementor Pro许可证的实物期权有三种,第四行是Elementor Pro,供比较之用。
| 方法 | 需要 Elementor Pro | 编辑造型 | 移动 | 最好的 |
|---|---|---|---|---|
| 主题菜单位置 | 否 | 没有,主题控制它 | 取决于主题 | 菜单就绪主题的简单网站 |
| 主插件导航菜单小部件 | 否 | 完整,来自面板 | 汉堡拨动电话 | 没有 Elementor Pro 的自定义标头 |
| 主插件巨型菜单 | 否 | 满满的 | 折叠到切换 | 多列面板,大导航 |
| Elementor Pro 菜单小部件 | 是的,付费许可证 | 满满的 | 包括画布外 | Elementor Pro 上已有网站 |
主题菜单位置。 每个主题都注册至少一个菜单区域。分配您的菜单,它的工作插件为零,但您无法从 Elementor 控制它的外观,并且移动行为是主题作者构建的任何内容。如果该菜单在手机上看起来已经正确,请跳过小部件。
主插件导航菜单小部件。 这是 Elementor 本机选项,无需 Elementor Pro 即可运行。放下 导航菜单小部件 进入任何模板,将其指向"外观">"菜单"中的菜单,以及面板上的样式颜色、间距、子菜单和移动切换。
主插件巨型菜单. Mega Menu 扩展程序对于类别较多的站点, 在同一小部件之上构建多列面板, 运行时无需 Elementor Pro。演练: 如何在没有 Pro 的情况下在 Elementor 中构建巨型菜单.
元素专业版。 如果您已经拥有它,请使用其菜单小部件和主题生成器。一个作业的两个插件只会增加权重。
想要在构建之前查看每个布局吗? 的 Nav 菜单小部件页面 有水平标头、垂直侧边栏和手机汉堡包的现场演示。
构建菜单,开始完成
Wp-admin 和 Elementor 编辑器中进行构建,没有代码,首先检查你的主题不是打印自己的标头,因为两个堆叠的标头是这里最常见的混乱。
1步:注册菜单
到外观>菜单,创建一个菜单,添加你的页面和链接,并给它起一个你将在六个月后识别的名字,这是简单的WordPress,没有插件专用,WordPress有一个 菜单屏幕指南 如果您以前没有构建过。在此处设置任何下拉(请参阅。 子菜单部分).
2步:创建头部模板
打开 主插件主题生成器 header 设置的类型并添加一个新的模板,这样就可以替换主题的 header,而不是与之战斗,要从完成的设计开始,请导入其中一个 元素标头模板 并将其菜单小部件指向您的菜单。
3步:添加导航菜单小部件并选择菜单
Elementor面板中搜索“Nav菜单”, 拖入页眉(其面板上写着导航菜单),在Content > General中, 从选择菜单下拉选择步骤1中你内置的菜单, 然后设置Layout, 水平适合一个标准页眉, 旁边有一个对齐控制, 垂直适合一个侧边栏, 并添加一个带有正常, 切换,手风琴和侧面的类型控制。
Layout是按设备设置的,桌面从水平开始,手机从汉堡开始,所以菜单在手机上崩溃,没有额外的设置。
第 4 步:设计它
Style标签页中字体、颜色、间距和悬停状态,没有自定义CSS,主菜单项保存填充、项目间隙、对齐、排版、普通、悬停和活动颜色、背景、边框、半径和文本阴影,核心元素元素对于菜单不能执行任何此操作。
5步:发布并分配
保存模板并将其分配给整个站点。如果没有 Master Addons Pro,这是唯一可用的显示条件,当您想要一个头部到处时,它就可以工作。
6步:在前端检查一下
Load站点,只确认一个头渲染 如果主题菜单也显示,请在主题的自定义器设置中将其关闭,因为用CSS隐藏它会在页面中留下标记。
如何添加子菜单并设置下拉
Elementor nav菜单中添加子菜单,在外观>菜单中将项目嵌套在其父项下,小部件将其变成下拉,Elementor内部没有子菜单设置。
- 打开外观 > 菜单并选择小部件使用的菜单。
- 如果儿童页面或链接尚未在菜单中,请添加该页面或链接。
- 将其拖到其母体下方并稍微向右拖动,直到其名称旁边出现"“子项目”标签。
- 击保存菜单,然后重新加载元素编辑器或前端。
在水平标头上,父级获取指示符箭头(设置在内容 > 指示符图标中),子菜单在悬停时打开。
Dropdown Menu 为面板设计样式(宽度、背景、边框、半径、阴影、距顶部栏的距离)。Dropdown Menu 项目为其内部链接设计样式:排版、间隙、填充、普通、悬停和活动颜色以及可选的分隔符。三级菜单获得匹配的 Dropdown 子菜单部分。 下拉菜单变化演示 显示以这种方式构建的几种面板样式。
四个垂直菜单类型
Master Addons 中的 Elementor 垂直菜单有四种类型:普通、切换、手风琴和侧面。将布局设置为垂直,并在其下方出现类型控件。类型也按设备设置,因此侧边栏可以在平板电脑上使用 Accordion,在桌面上使用 Normal。
正常
Normal 在悬停上打开其父级一侧的每个子菜单,就像一个飞出,它适合右侧有空间的桌面侧边栏。
切换
Toggle 在点击时扩展其项下的子菜单,将下面的项目向下推,几个子菜单可以一次保持打开状态,当侧边栏兼作索引时,这会有所帮助。
手风琴
Accordion 也在点击时展开,但打开一个子菜单会关闭打开的子菜单。这使得长菜单在一个狭窄的列中保持短。
侧
侧面将菜单固定到页面边缘,主要项目位于垂直栏中,每个子菜单位于旁边的面板中。 垂直侧菜单演示 将其显示在整页上。
的 垂直导航菜单演示 显示样式侧边栏版本。
让它在移动设备上运行
Nav Menu 小部件在手机上默认会折叠成汉堡包切换。内容选项卡的汉堡包菜单部分设置其对齐方式、图标、文本或两者,默认的、堆叠的或框的视图、形状,并分离正常和活动图标。
拨动从键盘以及触摸都可以工作。Enter 和 Space 打开它,Esc 关闭它,菜单外的轻按也关闭它。
Phone上,菜单在切换器下方打开到位,子菜单在里面展开,这适合中短菜单,从侧面滑入的画布外面板是一个Pro功能,下面覆盖。
Test on a real phone 以及浏览器的设备工具栏,因为轻按目标和外部轻按在触摸屏上的行为不同,检查菜单打开时图标是否改变状态,并且一个子菜单项用一个拇指即可到达。
为什么您的 Elementor nav 菜单未显示
Elementor nav菜单不显示时,原因几乎都是这四个之一,按顺序检查。
- 没有选择菜单,或者没有菜单存在。 创建菜单不会将其连接到小部件,因此请在"选择菜单"中选择它。如果字段上显示"“您的站点中没有菜单",请先创建一个。
- 不应用标头模板。 Header模板在有显示条件之前什么都不做,在主题生成器中设置整个站点,检查没有主题标头覆盖它。
- 在手机上,菜单位于汉堡包后面。 Phone显示的是toggle而不是links,如果toggle颜色与头部背景匹配,则图标是不可见的,菜单看起来不见了,在Style > 汉堡包中给toggle一个对比鲜明的颜色。
- 缓存或延迟 JavaScript。 页面缓存可以服务旧的标头,JavaScript 延迟可以阻止下拉和切换工作,直到访问者移动鼠标。清除缓存并将菜单脚本排除在 JS 延迟之外。
需要 Master Addons Pro 吗
此设置的两个部分需要 Master Addons Pro。
桌面或平板电脑上的汉堡包,以及弹出窗口和 Offcanvas 类型。 Layout 在每台设备上都提供水平和垂直功能,汉堡标有 Pro。手机将默认汉堡从盒子中取出,但汉堡在更宽的屏幕上以及弹出窗口或 Offcanvas 类型需要 Pro。因此,滑动画布菜单是这里的付费功能,通过汉堡布局或单独的 画外内容小部件的,它打开面板中任何保存的模板,没有pro,最接近的选项是垂直布局的side类型。
主题构建器定位是一条规则。 免费的主题生成器恰好保存了一个显示条件:整个站点。登陆页面上的不同标头或登录会员需要 Pro。Our 显示条件细分 解释条件规则如何工作,以及 免费主题构建器指南 涵盖该层的其余部分。
Widget 没有悬停指针动画(Elementor Pro 的菜单有),也没有任何计划上的粘性设置,要保持标头在视野中,请在标头容器上使用 Elementor Pro 的运动效果,或者添加 selector { position: sticky; top: 0; z-index: 99; } 通过容器到达 主插件自定义 CSS 扩展. X = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 粘性标题指南 走过两者。
如果您已经拥有 Elementor Pro,则这些都不适用。 小部件和扩展名目录 列出插件的其余部分,如果标头需要一个您继续手动重建的部分,则 小部件生成器 (Pro)把它变成一个真正的小部件。的 定价页面 列出层数。
常见问题
免费 Elementor 有菜单小部件吗?
No。Elementor的菜单小部件仅与Elementor Pro一起发货。Master Addons添加了自己的Nav菜单小部件,该小部件无需Elementor Pro即可运行,因此您无需该许可证即可放置和设计真正的导航菜单。
您可以在没有 Pro 的 Elementor 中创建导航菜单吗?
是。在"外观 >"菜单下注册菜单,然后使用"主插件等插件将"导航菜单小部件放入标头模板中并从面板中对其进行样式设置。仅使用免费元素器无法放置或样式设置菜单。
如何在没有 Pro 的 Elementor 中添加移动汉堡菜单?
Master Addons Nav 菜单小部件添加到您的标头模板中,然后选择您的菜单,默认情况下它会折叠到手机上的汉堡包切换,在汉堡包菜单部分中具有图标、文本、视图和形状设置。
画布外菜单是否需要 Master Addons Pro?
是的。画布外是汉堡布局内部的一种类型,而 Popup 和 Offcanvas 类型,或者桌面和平板电脑上的汉堡,需要 Master Addons Pro。如果没有 Pro,您将获得水平和垂直布局以及手机上的默认汉堡,并且垂直侧类型是最接近的侧锚选项。
如何在没有 Pro 的 Elementor 中创建大型菜单?
Master Addons 包括一个 Mega Menu 扩展,它可以构建多列面板、在移动设备上崩溃并在没有 Elementor Pro 的情况下运行。它与 Nav 菜单小部件配合使用,用于具有类别或促销内容的更大导航。
为什么我的 Elementor nav 菜单没有显示?
Widget 的选择菜单栏中通常不会选择菜单, 然后检查标题模板是否分配给整个站点, 汉堡图标与手机上的标题颜色不同, 缓存或 JavaScript 延迟不服务于旧版本。
我需要 Nav 菜单小部件的 Master Addons Pro 吗?
No。widget 不含 Pro,有造型、子菜单、每设备水平和垂直布局、四种垂直类型和手机汉堡。Pro 在桌面和平板电脑上添加了汉堡包、弹出窗口和 Offcanvas 类型以及整个站点之外的主题生成器条件。
如何将子菜单添加到 Elementor nav 菜单?
到"外观>菜单,将子项拖动到其父项下并稍微向右,直到标记为"“子项”,然后单击"保存菜单,导航菜单小部件显示为下拉,样式为"样式>下拉菜单和下拉菜单项。
接下来该怎么办
Horizontal布局和一两个子菜单构建头,然后加载到自己的手机上再做其他造型,大部分菜单问题是移动问题,在真实设备上十秒钟就显示出来,如果菜单需要多列面板,则 巨型菜单指南 从那里接,然后 导航菜单文档 列出每个控件。
- Nav 菜单小部件页面:布局、现场演示以及与 Elementor Pro 菜单小部件的比较。
- 超级菜单扩展:多列面板,内部有任何 Elementor 小部件。
- 木炭导航栏,带有巨型菜单演示:用两者构建的完整标头。
相关阅读
