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