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

WoodMart Themes and Elementor The builder is combined to provide users with powerful menu design features. With the help of these tools, it is easy to create mega menus that meet the needs of multi-level, icons, mega menus, etc. and optimize the navigation structure of your website. Below are the detailed steps to build a mega menu using Elementor and WoodMart themes.

Creating navigation menus

Based on this picture, here are the steps:

• Access to menu settings
  exist WordPress In the backend, navigate to the Appearance > Menus section.
• Create new menu
  On the menu page, click the "Create new menu" button and enter a name for the menu (e.g. "Demo menu").
• Add menu item
  In the "Add menu item" area, you can select elements such as pages, posts, categories, tags, etc. In order to add a new link item, enter the link address in the "Customize link" section (e.g. #) and link text (e.g. "Home"), then click the "Add to menu" button.
• Setting the menu position
  In the "Menu Settings" section, you can select the location of this menu (e.g. main menu or mobile side menu).
• Save menu
  When you are done with the settings, click the "Save Menu" button at the top right corner of the page to save the changes.

Setting up drop-down menus

Add menu item
In the "Add Menu Item" section, you can select pages, articles, categories, etc. and add them to the menu. For example, check the "My Account" page, checkout page, shopping cart page, etc. and click the "Add to Menu" button.

Creating submenus
If you want to set certain menu items as drop-down submenus, simply drag them under the target menu item. For example, drag the My Account page under the Home menu item and it will become a submenu of that menu item.

Restructuring of the menu
In the "Menu Structure" section on the right, you can see the added menu items. By dragging the menu items, you can reorder them or further nest the menu items into submenus.

Full-width Super Menu

Selecting menu items and adding HTML blocks
exist WordPress In the backend, under Appearance > Menus, select the menu you want to edit. In the menu item settings on the right, click "Add new HTML block" to add custom content to the menu.

Setting up the design of menu items
In the Design drop-down menu, select the Full Width option. The menu items will then be displayed full-width on the page.

Naming HTML Blocks
In the input box at the top of the page for HTML Block naming (e.g. "Full width mega menu").

Using Elementor Editors
After naming the HTML block, click "Use the Elementor Edit" button to enter the Elementor editor interface.

Add additional menu listings
Drag in the elementor widgetExtra menu listand click on it to make an editorial copy of it.

Add custom HTML blocks for menu items
In the "Custom fields (for theme)" section, select the "HTML Block for the dropdown" option. Select the previously created HTML block (e.g. "Full width mega menu").

Finally return to the front end to preview the effect, make the final adjustments to the final result is out.

Preservation of design
Once you have finished designing and adjusting the menu, remember to save all changes by clicking the "Update" button in the upper right corner of the page.

Adding a Super Menu Item Label

When creating a full-width mega menu, you can add labels to each menu item. For example, add "Hot Items", "New Arrivals" or "Discounts" labels to highlight certain important menu items.

This can be done by Elementor The "Tags" option in the editor is set to help visitors quickly identify key content.

Customized size mega menu

Select menu items and configure the design
exist WordPress On the Appearance > Menus page in the backend, select the menu item you want to edit. In the menu item settings on the right, you can select the "Design" option and set it to "Set sizes".

Adding custom HTML blocks
In the "HTML Block for the dropdown" section, click on the dropdown box and select the "Add new" option. If you wish to add custom content or additional menu lists to the menu items, you can select this option and create a new HTML block.

Using Elementor Editors
After naming HTML After the block, click the "Edit with Elementor" button to enter the Elementor editor interface.

Add additional menu lists and products (grid and rotate)
existelementorDrag in the widgetExtra menu listand click on it to make an editorial copy of it. Then drag in aProducts (grid or carousel)In the Elementor editor, first select the widget you want to edit.

In the settings panel on the left, find the Layout Part. In the Products hover In the drop-down menu, select the type of layout you want:Grid,List maybe Carousel. Here we chooseCarouselThe

In the Elementor editor, select the region or widget you want to edit.

In the left panel, click Carousel Setup section.

exist Slides per view In the slider, adjust the number of slides shown at a time. You can set the number to 1 or higher as desired.

Scroll per page: When this option is enabled, each scroll will scroll an entire page instead of a single product. This option can be turned on or off as required.

Hide pagination control: If you do not want to show the paging controls, you can enable this option to hide the paging buttons.

Hide prev/next buttons: Enable this option if you don't want the previous/next button to be displayed.

Other options

Center mode: You can enable this option if you want the slideshow to be centered.

Slider loop: When this option is enabled, the slideshow will loop and the user can slide infinitely.

Slider autoplay: You can enable this option if you want the slideshow to play automatically.

Init carousel on scroll: When this option is enabled, the rotation will only start when the user scrolls the page, which is suitable for optimizing performance.

Save Settings

Once you've completed all the settings, click on the bottom right corner of the page to update button to save the changes.

Setting the drop-down menu size
Configure the width and height of the dropdown menu. In the "Dropdown Width" and "Dropdown Height" fields, enter the desired values to resize the dropdown menu.

After setting it up, return to the front-end preview and adjust it to your needs then you can save the settings.

concluding remarks

By combining the use of Elementor Builders and WoodMart Theme that can create a super menu that adapts to a variety of devices. This kind of menu is not only beautiful and feature-rich, suitable for displaying more content and navigation options, effectively improving the navigation efficiency of the site.