创建超级菜单

菜单

站点中应用的所有菜单都是在Dashboard -> Appearance -> Menu中创建的。之前的WordPress菜单编辑教程提供了有关创建/编辑/保存菜单的详细说明。

有两个菜单位置:主菜单和移动菜单。一个和相同的菜单可能都是:主菜单和移动菜单。此外,WoodMart 主题提供了多种选项来在站点的任何位置显示菜单,可以根据需要创建尽可能多的菜单,此处提供了菜单选项的更详细描述: 向站点添加菜单。

超级菜单

WoodMart主题通过 Megamenu 块扩展了默认的 WordPress 菜单。Megamenu 块是 WP Bakery 页面构建器或 Elementor 模板,允许添加任何元素或小部件:文本、图像、产品网格和其他静态元素。在大多数情况下,该演示使用 Extra 菜单元素/小部件来使子菜单更好地排列并且看起来更好看。

为了创建一个 megamenu  ,需要 在Dashboard -> HTML blocks -> Add new 中为每个菜单项单独创建HTML 块。

一旦 Megamenu 块准备就绪,就可以将它们添加到Appearance -> Menu -> Select menu -> enter menu item -> HTML Block for the dropdown只有在保存菜单并重新加载页面后才会出现的菜单项。首先,需要在“设计”选项中设置“全宽”或“设置大小”以使 HTML 块下拉列表可用。

菜单自定义字段

设计——此选项将决定大型菜单块的宽度: 默认、全宽、旁白和设置大小

  • 默认 – 下拉菜单将具有默认宽度,并且不会出现大块选项。
  • 全宽 – 块将使菜单容器的整个宽度居中对齐,并且会出现选择 HTML 块作为菜单巨型块的选项。
  • 设置大小– 允许设置块的自定义大小和选择 HTML 块的选项作为菜单巨型块出现。
  • 放在一边——将子项目放在一边,将悬停时的下拉菜单显示为选项卡。在这里查看我们的演示

下拉菜单的HTML 块 如果在“设计”下拉菜单中选择了“全角”或“设置大小” ,则会出现此下拉菜单,并将现有的所有 HTML 块显示为一个大型菜单块供选择。

使用 AJAX 加载 HTML 下拉列表——使用 AJAX 加载 HTML 块以优化性能的选项

下拉文本配色方案 ——深色或白色。深色配色方案确保深色文本和浅色背景。浅色方案确保大型菜单块的浅色文本和深色背景。

Open on mouse event – 允许在菜单项上设置悬停或单击事件,结果 Mega 菜单块将在悬停或单击时出现。

标签文本——向菜单项添加自定义工具提示的选项

图片。 您可以上传要在菜单项文本之前显示的图标。此处推荐使用 SVG 或 PNG。

使用图像作为. 您可以将上传的图像显示为菜单项文本旁边的图标或下拉菜单的背景。

标签颜色——用于设置菜单项中工具提示颜色的选项。

该字段的图标名称仅支持 来自 FontAwesome 源提供的源的图标   – 该字段需要从 FontAwesome 图标插入关键字。例如,ID 主页图标代码如下所示:

<i></i>

有必要提取识别图标的部分,即 fas fa-home, 并将其插入到字段中。

页面锚点– 使用单页导航菜单启用。如果启用,则需要将此项目的链接设置为如下所示:http://your_site.com/home_page/#anchor_id 其中 anchor_id 将是您主页上 ROW 的 ID。

CSS 类(可选)允许插入类并分配自定义 CSS,此外插入类 woodmart-open-newsletter 会将菜单项分配给主题 Promo Popup。本站还为您提供更多的Woodmart主题面板相关教程