Comment créer un méga menu avec Elementor builder et le thème WoodMart

WoodMart Thèmes et Elementor 构建器相结合，为用户提供了强大的菜单设计功能。借助这些工具，可以轻松创建超级菜单，满足多层次、图标、超级菜单等需求，优化网站的导航结构。以下是使用 Elementor 和 WoodMart 主题构建超级菜单的详细步骤。

创建导航菜单

根据这张图片，以下是操作步骤：

• 进入菜单设置
  existent WordPress 后台，导航到“外观” > “菜单”部分。
• Créer un nouveau menu
  在菜单页面上，点击“创建新菜单”按钮，输入菜单名称（例如“Demo menu”）。
• Ajouter un élément de menu
  在“添加菜单项”区域，可以选择页面、文章、分类、标签等元素。为了添加新的链接项，在“自定义链接”部分输入链接地址（例如 #）和链接文本（例如“Home”），然后点击“添加到菜单”按钮。
• 设置菜单位置
  在“菜单设置”部分，可以选择此菜单的位置（例如，主菜单或移动侧边菜单）。
• Sauvegarder le menu
  完成设置后，点击页面右上角的“保存菜单”按钮保存更改。

设置下拉菜单

Ajouter un élément de menu
在“添加菜单项”部分，可以选择页面、文章、分类等内容，并将其添加到菜单中。例如，勾选“我的账户”页、结账页、购物车页等，然后点击“添加到菜单”按钮。

创建子菜单
若希望将某些菜单项设置为下拉子菜单，只需将它们拖动到目标菜单项下方。例如，将“我的账户”页拖到“Home”菜单项下方，它将成为该菜单项的子菜单。

调整菜单结构
在右侧的“菜单结构”部分，可以看到已添加的菜单项。通过拖动菜单项，可以调整它们的顺序，或进一步将菜单项嵌套为子菜单。

全宽超级菜单

选择菜单项并添加 HTML 块
existent WordPress 后台的“外观”>“菜单”中，选择要编辑的菜单。在右侧的菜单项设置中，点击“添加新 HTML 块”向菜单添加自定义内容。

设置菜单项的设计
在“设计”下拉菜单中，选择“全宽”选项。这样菜单项将在页面中全宽的方式显示。

命名 HTML 块
在页面顶部的输入框中为 HTML 块命名（例如：“Full width mega menu”）。

Utilisation de l'éditeur Elementor
在命名完 HTML 块后，点击“使用 Elementor 编辑”按钮，进入 Elementor 编辑器界面。

添加额外菜单列表
在elementor小部件中拖入Extra menu list，并点击它对它进行编辑复制。

为菜单项添加自定义 HTML 块
在“自定义字段（for theme）”部分，选择“HTML Block for the dropdown”选项。选择之前创建的 HTML 块（例如“Full width mega menu”）。

最后返回前端预览效果，进行最后的调整最后的结果就出来了。

保存设计
完成菜单的设计和调整后，记得点击页面右上角的“更新”按钮保存所有更改。

添加超级菜单项标签

在创建全宽超级菜单时，可以为每个菜单项添加标签。例如，为某些重要的菜单项添加“热销商品”、“新品”或“折扣”标签，突出显示。

这可以通过 Elementor 编辑器中的“标签”选项进行设置，帮助访客快速识别关键内容。

自定义大小超级菜单

选择菜单项并配置设计
existent WordPress 后台的“外观”>“菜单”页面，选择想要编辑的菜单项。在右侧的菜单项设置中，可以选择“设计”选项并设置为“Set sizes”。

添加自定义 HTML 块
在“HTML Block for the dropdown”部分，点击下拉框并选择“Add new”选项。如果希望为菜单项添加自定义内容或额外的菜单列表，可以选择这一选项并创建一个新的 HTML 块。

Utilisation de l'éditeur Elementor
在命名完 HTML 块后，点击“使用 Elementor 编辑”按钮，进入 Elementor 编辑器界面。

添加额外菜单列表和产品（网格和轮播）
existentélémentaire小部件中拖入Extra menu list，并点击它对它进行编辑复制。然后拖入一个products（grid or carousel），在 Elementor 编辑器中，首先选择要编辑的小部件。

在左侧的设置面板中，找到 Layout 部分。 在 Products hover 下拉菜单中，选择想要的布局类型：GrilleetList peut-être Carrousel。这里我们选择Carrousel.

在 Elementor 编辑器中，选择要编辑的区域或小部件。

Dans le panneau de gauche, cliquez sur Carrousel 设置部分。

existent Slides per view 滑块中，调整每次展示的幻灯片数量。可以根据需要设置为 1 或更高数量。

Scroll per page：启用此选项后，每次滚动将滚动一整页，而不是单个产品。可以根据需求开启或关闭此选项。

Hide pagination control：如果不希望显示分页控制，可以启用此选项来隐藏分页按钮。

Hide prev/next buttons：如果不希望显示上一页/下一页按钮，启用此选项。

Autres options

Center mode：如果希望幻灯片居中显示，可以启用此选项。

Slider loop：启用此选项后，幻灯片将循环播放，用户可以无限滑动。

Slider autoplay：如果希望幻灯片自动播放，可以启用此选项。

Init carousel on scroll：启用此选项后，轮播仅在用户滚动页面时启动，适用于优化性能。

Sauvegarder les paramètres

完成所有设置后，点击页面右下角的 mettre à jour 按钮，保存更改。

设置下拉菜单尺寸
配置下拉菜单的宽度和高度。在“Dropdown Width”和“Dropdown Height”字段中，输入希望的值来调整下拉菜单的尺寸。

设置好之后返回前端预览，再根据自己的需求进行调整然后就可以保存设置了。

remarques finales

通过结合使用 Elementor 构建器和 WoodMart 主题，可以打造出适应各种设备的超级菜单。这种菜单不仅美观，且功能丰富，适合展示更多内容和导航选项，有效提高网站的导航效率。