每个站点都需要一个菜单,并且主题的默认标头很少与自定义 Elementor 设计匹配。免费的 导航菜单小部件 在 Elementor 的主插件 elementor 编辑器内部渲染任何 WordPress 菜单:每个设备设置的水平或垂直布局、样式化的子菜单以及接管手机的汉堡包切换。
本指南将小部件从第一次拖动到样式菜单,并在实时页面上进行工作下拉。
导航菜单小部件的作用 #
Widget 拉取您在"外观、"菜单下构建的菜单,并将其渲染为 Elementor 元素,您选择布局和行为、样式以及项目的每个状态、下拉和移动切换,所有这些都来自 Elementor 面板的菜单项目本身、它们的标签、顺序和子菜单,并保持在 WordPress 中进行管理,因此内容编辑器永远不会触摸 Elementor 来向菜单添加页面。
在开始之前 #
- 文字出版社 与 元素 已安装并处于活动状态。
- Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
- 在导航小部件下的主插件选项面板中启用的导航菜单小部件。
- 下创建的菜单 外观、菜单 在您的仪表板中。演示使用带有主页、定价、团队和联系方式的 “ 主菜单,以及联系方式下的常见问题解答子菜单。
如何添加导航菜单小部件 #
在 Elementor 编辑器中,搜索 元素 面板为 导航菜单 并将其拖到页面上,通常会拖到标题部分。该小部件立即呈现您的第一个 WordPress 菜单。
选择菜单和布局 #
的 一般的 部分驱动整个小部件。 选择菜单 列出菜单屏幕中的每个菜单;选择要渲染的那个。 布局 优惠 水平, 垂直 並 汉堡包 (Pro),而且可以针对每台设备分别设置,对于垂直菜单, 类型 加行为: 正常, 切换, 手风琴 或 侧。这里是垂直布局的演示菜单:
对于头球,水平球是通常的选择。 对齐 将项目向左、向中、向右或合理放置。没有单一的断点设置:将 Elementor 切换到平板电脑或手机视图并选择该设备的布局。手机默认使用汉堡包切换。即使您不需要,也值得尝试一次垂直;看到两种布局都会使对齐选项点击。
配置下拉 #
的 下拉菜单 section 控制子菜单的行为和指示符:
- 下拉指示器: 在带有子菜单的项目旁边显示或隐藏箭头。
- 指示器位置、间隙、图标大小: 箭头所在的位置以及它有多大。
- 下拉图标: 使用正常状态和悬停状态以及旋转控件将默认 V 形换成任何图标。
- 下降宽度和对齐方式: 子菜单面板的大小和文本对齐。
- 子菜单指示器: 第三级菜单的图标。
设置移动切换 #
当设备使用汉堡包布局时,菜单会在切换按钮后面崩溃。 汉堡菜单 节配置它: 对齐, 类型 (图标, 文本,或两者), 查看 (默认、堆叠或框架), 形状 (正方形或圆圈), 以及正常状态和活动状态的单独图标。将编辑器切换到移动预览, 切换显示, 菜单堆叠在其下方:
样式菜单项 #
在 风格 选项卡, 主菜单项 涵盖顶级链接。 版式 处理字体:
在它下面, 正常, 悬停、和 活跃 每个带有选项卡 颜色, 项目背景颜色、和 文本阴影的,加上共享的 水平和垂直填充, 之间的空间、以及边框控制。演示设置蓝色悬停颜色,当光标穿过时预览实时定价:
设置切换、下拉列表和项目 #
另外三个风格部分完成工作:
汉堡包 调整切换的样式:颜色、背景、边框半径、阴影、图标大小和填充,具有正常、悬停和活动状态。
下拉菜单 为子菜单面板设计样式:背景颜色、顶部间隙、边框和填充。 下拉子菜单 涵盖更深层次的菜单。
下拉菜单项 设置面板内的链接样式,具有相同的三种状态加上 a 分频器 项目之间的行组:
页面上的结果 #
在实时页面上,菜单以您的样式呈现:悬停状态启动,常见问题解答子菜单在"联系"下完全位于下拉设置放置的位置。
常见用例 #
- 自定义标头 elementor构建的,其中主题菜单不能遵循设计。
- 着陆页 拥有自己的精简菜单,与全站菜单分开。
- 侧边栏导航 在文档或类别页面上使用垂直布局。
- 移动优先菜单 倚(toggle)的图标、视图和形状选项。
- 多级菜单 具有样式下拉和子级别面板。
更好的导航菜单提示 #
- 首先在 WordPress 中构建菜单。 Widget 从外观,菜单渲染菜单;它不创建它们。那里的结构,这里的风格。
- 赋予悬停和活动不同的颜色。 Hover 回答光标; Active 告诉访问者他们位于哪个页面。相同的颜色会浪费信号。
- 检查真实手机上的每台设备。 四项菜单可能适合平板电脑,而七项菜单也可能需要在平板电脑上进行垂直布局。
- 显式设置下拉背景。 页面内容上的透明子菜单是我们看到的最常见的菜单投诉;坚实的"下拉菜单"背景一键修复它。
视频教程 #
如果您想查看导航菜单小部件的运行情况,此视频将浏览整个设置,从选择菜单到实时页面上的样式下拉:
常见问题 #
Master Addons 中的导航菜单小部件是什么?
Elementor小部件,可渲染任何具有完整造型控制的WordPress菜单,它提供每个设备设置的水平和垂直布局,带有自定义指示器的样式子菜单,以及手机默认使用的可配置汉堡包切换。
我在哪里添加或删除菜单项?
WordPress 中,在外观下,菜单。小部件的"选择菜单下拉列表列出了您在那里构建的每个菜单,并渲染了您选择的项目、订单和子菜单在 WordPress 中进行管理;小部件处理布局和样式。
如何制作下拉子菜单?
WordPress菜单中的嵌套项目,方法是将它们拖动到菜单屏幕上的父级下。小部件会自动显示父级旁边的下拉指示器,下拉菜单和下拉列表部分会控制面板的行为和样式。
移动汉堡菜单何时出现?
默认情况下在手机上。 Master Addons Pro 可让您选择任何设备的汉堡布局,具有弹出窗口和 Offcanvas 类型。汉堡菜单部分为切换设计样式,包括图标或文本类型、堆叠或框视图、方形或圆形形状以及单独的普通图标和活动图标。
菜单可以是垂直的而不是水平的?
是的。布局控件提供水平、垂直和汉堡包 (Pro)。垂直套装侧边栏和文档页面,类型控件在顶部添加切换、手风琴或侧边行为。
包裹起来 #
"导航菜单"小部件将站点菜单放在您设计其余部分所在的位置:选择 WordPress 菜单, 选择布局, 为项目设置样式, 下拉和移动切换, 并发布。它自然地与 画布外内容 widget(专业版) 滑出式移动导航 浏览全套 主插件小部件和扩展,并看到 Nav 菜单小部件页面 elementor Pro 的菜单小部件进行比较。
