How to Create a Mega Menu with Elementor Builder and WoodMart Themes

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

图片[1]-如何使用 Elementor 构建器和 WoodMart 主题创建超级菜单

创建导航菜单

根据这张图片,以下是操作步骤:

  • 进入菜单设置
    exist WordPress 后台,导航到“外观” > “菜单”部分。
  • Create new menu
    在菜单页面上,点击“创建新菜单”按钮,输入菜单名称(例如“Demo menu”)。
  • Add menu item
    在“添加菜单项”区域,可以选择页面、文章、分类、标签等元素。为了添加新的链接项,在“自定义链接”部分输入链接地址(例如 #)和链接文本(例如“Home”),然后点击“添加到菜单”按钮。
  • 设置菜单位置
    在“菜单设置”部分,可以选择此菜单的位置(例如,主菜单或移动侧边菜单)。
  • Save menu
    完成设置后,点击页面右上角的“保存菜单”按钮保存更改。
图片[2]-如何使用 Elementor 构建器和 WoodMart 主题创建超级菜单

设置下拉菜单

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

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

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

图片[3]-如何使用 Elementor 构建器和 WoodMart 主题创建超级菜单

全宽超级菜单

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

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

图片[4]-如何使用 Elementor 构建器和 WoodMart 主题创建超级菜单

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

Using Elementor Editors
在命名完 HTML 块后,点击“使用 Elementor 编辑”按钮,进入 Elementor 编辑器界面。

图片[5]-如何使用 Elementor 构建器和 WoodMart 主题创建超级菜单

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

图片[6]-如何使用 Elementor 构建器和 WoodMart 主题创建超级菜单

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

图片[7]-如何使用 Elementor 构建器和 WoodMart 主题创建超级菜单

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

图片[8]-如何使用 Elementor 构建器和 WoodMart 主题创建超级菜单

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

添加超级菜单项标签

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

图片[9]-如何使用 Elementor 构建器和 WoodMart 主题创建超级菜单

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

图片[10]-如何使用 Elementor 构建器和 WoodMart 主题创建超级菜单

自定义大小超级菜单

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

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

图片[11]-如何使用 Elementor 构建器和 WoodMart 主题创建超级菜单

Using Elementor Editors
在命名完 HTML 块后,点击“使用 Elementor 编辑”按钮,进入 Elementor 编辑器界面。

图片[12]-如何使用 Elementor 构建器和 WoodMart 主题创建超级菜单

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

在左侧的设置面板中,找到 Layout 部分。 在 Products hover 下拉菜单中,选择想要的布局类型:Grid,List maybe Carousel。这里我们选择CarouselThe

图片[13]-如何使用 Elementor 构建器和 WoodMart 主题创建超级菜单

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

In the left panel, click Carousel 设置部分。

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

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

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

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

图片[14]-如何使用 Elementor 构建器和 WoodMart 主题创建超级菜单

Other options

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

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

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

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

图片[15]-如何使用 Elementor 构建器和 WoodMart 主题创建超级菜单

Save Settings

完成所有设置后,点击页面右下角的 update 按钮,保存更改。

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

图片[16]-如何使用 Elementor 构建器和 WoodMart 主题创建超级菜单

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

图片[17]-如何使用 Elementor 构建器和 WoodMart 主题创建超级菜单

concluding remarks

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


Contact Us
Can't read the article? Contact us for free answers! Free help for personal, small business sites!
Tel: 020-2206-9892
QQ咨询:1025174874
(iii) E-mail: info@361sale.com
Working hours: Monday to Friday, 9:30-18:30, holidays off
© Reprint statement
This article was written by: upupdowndownLRLRBABA
THE END
If you like it, support it.
kudos1232 share (joys, benefits, privileges etc) with others
commentaries sofa-buying

Please log in to post a comment

    No comments