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.
Follow a few simple steps below and enjoy the result:
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.