Articles Web Development

How to Create Advanced Mega Menus with Elementor Page Builder

No ratings yet.

Mega menus can make it much easier for users to get deeper into a site with fewer clicks. Here, you will learn how to make your menus more functional and informative while using mega menus. This tutorial will help you create products grids, blog posts, and even maps and contact forms in a mega menu on your WordPress website using Elementor page builder. Among other tools needed are JetMenu and JetElements plugins. JetMenu is a first-class plugin which allows creating a mega menu with Elementor page builder. With JetMenu, you can add content to a menu using any needed widgets, and style it up according to your needs. JetElements plugin offers a great variety of modules to create high-quality websites.

mega menus elementor

Follow a few simple steps below and enjoy the result:

  1. Once JetMenu plugin is installed and activated on your website, navigate to WordPress Dashboard and proceed to the Appearance > Menus tab. You can either select one of the existing menus for further editing or create a new menu and then create a mega menu for one or several of its items. Settings menu allows you to specify mega menu position and set custom width for the particular item. Icon tab allows you to choose the color of your icon. Badges tab helps to create the name of the badge, set the badge color, and badge background color. With the help of the Miscellaneous tab, you can hide the item navigation label and set custom padding for the items. If you are working with vertical menus, you may need to adjust the setting in the Vertical menus tab also.
  2. In the Content tab, toggle Mega Submenu Enabled option to Yes. Then, click Edit mega menu item content option to proceed to Elementor editor. Here you can use any widgets which you need to build a mega menu. You can use headings, sliders, product grid layouts, post layouts, videos, etc.
  3. Let’s search for Posts widget. Drop it to the center area and start working on it. Since Monstroid2 WordPress theme is used, the Magic button can be used to gain access to a great collection of ready-made sections and icons. Sections > Blog gives you the choice of different layouts for a blog. You can choose any of those and put them on your page. Note, if you are not using Monstroid2 WordPress theme, but you have downloaded JetElements plugin, you can navigate to Templates in Elementor > Blocks menu and choose any ready-made element in the category dropdown. Pre-made designs are available for each particular widget there. Post grid layout can be inserted to your page. Once it is done, your post section can be styled to your liking (fonts, colors, backgrounds). Make sure this section gets some background color. If you do not set any background (Style menu), it will be transparent. Finally, click Update, go back and Save, close the window, and click Save Menu. Do not hesitate to check the result after.
  4. The next step is to create a Contact page. To do this, go to the Pages menu to create a new page. Select Contact and click Add to Menu. Once the page is added, click JetMenu button and adjust the settings. In the Content tab, toggle Mega Submenu Enabled option to Yes. Then, click Edit mega menu item content option to proceed to Elementor editor. Drop section layout and search for Advanced Map module. Edit Advanced Map settings to specify the location, adjust Scrollwheel Zoom, Zoom Controls, etc. Map Style section allows you to change Map Height, and Map Style. Add some pins with the help of the Pins section.
  5. Choose Contact Form 7 widget to continue working on your contact form. As you can see, it has a default generic design. Use the Magic button again and choose the best design for your site in the Sections menu. Once you pick the most suitable layout, click Insert to get it to appear on your page. Afterwards, you can customize the look of your Contact page. Play with the background, padding, fonts, and do not forget to click Update after you finish. Return back, click Save, close the window, and click Save Menu. Refresh your home page and check the result.
  6. To create a product collection section, you need JetWooBuilder plugin. If you are using JetElements, you will have access to WooCommerce widgets. Just drop the widget to the center and start customization. Set up the quantity of products per page, order by, titles, etc. Click Save, Save Menu, then go to the homepage and refresh it to see the updates.

With JetMenu and JetElements plugins, it is quick and easy to include blog posts, product grids, and a contact page with a map on the home page of your website. I hope you enjoyed this tutorial. Share it with those who are building websites and may find this guide useful. Do not be afraid to experiment to build a fully functional website!

elementor wordpress plugins



Top WordPress Plugins

NameProviderCategoryPrice
JetElements - Addon for Elementor Page Builder WordPress PluginZEMEZjetBusiness Services$15
JetBlocks - Elementor Header & Footer Widgets WordPress PluginZEMEZjetBusiness Services$15
JetTricks - Visual Effects Addon for Elementor WordPress PluginZEMEZjetBusiness Services$15
JetWooBuilder - WooCommerce Page Builder Addon for Elementor WordPress PluginZEMEZjetBusiness Services$15
JetTabs - Tabs and Accordions for Elementor Page Builder WordPress PluginZEMEZjetBusiness Services$15
JetParallax - Addon for Elementor Page Builder WordPress PluginZEMEZjetBusiness Services$15
JetReviews - Reviews Widget for Elementor Page Builder WordPress PluginZEMEZjetBusiness Services$15
JetMenu - Mega Menu for Elementor Page Builder WordPress PluginZEMEZjetBusiness Services$15
JetBlog - Blogging Package for Elementor Page Builder WordPress PluginZEMEZjetBusiness Services$15
JetPopup - Popup Addon for Elementor WordPress PluginZEMEZjetBusiness Services$15
JetEngine - Adding & Editing Dynamic Content with Elementor WordPress PluginZEMEZjetBusiness Services$15
JetGuten - Blocks Set Addon for Gutenberg Editor WordPress PluginZEMEZjetBusiness Services$15
JetSearch - An ultra-fast AJAX Search widget for Elementor WordPress PluginZEMEZjetBusiness Services$15

Read Also

How to Style and Customize Contact Forms with Elementor Page Builder

JET Plugins for WordPress Elementor Builder [Review]

How to Create Testimonials Using Elementor Page Builder

Top 50 WordPress Elementor Business Themes

How to Create a Mega Menu with Elementor Builder Quickly and Easily

Leave a Reply

Your email address will not be published. Required fields are marked *