12 Apr Find out how to Create Superior Mega Menus with Elementor Web page Builder
Mega menus could make it a lot simpler for customers to get deeper right into a web site with fewer clicks. Right here, you’ll learn to make your menus extra purposeful and informative whereas utilizing mega menus. This tutorial will aid you create merchandise grids, weblog posts, and even maps and speak to types in a mega menu in your WordPress web site utilizing Elementor web page builder. Amongst different instruments wanted are JetMenu and JetElements plugins. JetMenu is a first-class plugin which permits making a mega menu with Elementor web page builder. With JetMenu, you’ll be able to add content material to a menu utilizing any wanted widgets, and elegance it up based on your wants. JetElements plugin affords an important number of modules to create high-quality web sites.
Observe a couple of easy steps under and benefit from the consequence:
- As soon as JetMenu plugin is put in and activated in your web site, navigate to WordPress Dashboard and proceed to the Look > Menus tab. You’ll be able to both choose one of many current menus for additional modifying or create a brand new menu after which create a mega menu for one or a number of of its objects. Settings menu lets you specify mega menu place and set customized width for the actual merchandise. Icon tab lets you select the colour of your icon. Badges tab helps to create the identify of the badge, set the badge coloration, and badge background coloration. With the assistance of the Miscellaneous tab, you’ll be able to cover the merchandise navigation label and set customized padding for the objects. If you’re working with vertical menus, it’s possible you’ll want to regulate the setting within the Vertical menus tab additionally.
- Within the Content material tab, toggle Mega Submenu Enabled choice to Sure. Then, click on Edit mega menu merchandise content material choice to proceed to Elementor editor. Right here you should utilize any widgets which it’s essential construct a mega menu. You need to use headings, sliders, product grid layouts, put up layouts, movies, and so on.
- Let’s seek for Posts widget. Drop it to the middle space and begin engaged on it. Since Monstroid2 WordPress theme is used, the Magic button can be utilized to achieve entry to an important assortment of ready-made sections and icons. Sections > Weblog provides you the selection of various layouts for a weblog. You’ll be able to select any of these and put them in your web page. Notice, if you’re not utilizing Monstroid2 WordPress theme, however you will have downloaded JetElements plugin, you’ll be able to navigate to Templates in Elementor > Blocks menu and select any ready-made aspect within the class dropdown. Pre-made designs can be found for every explicit widget there. Put up grid structure will be inserted to your web page. As soon as it’s completed, your put up part will be styled to your liking (fonts, colours, backgrounds). Be sure that this part will get some background coloration. If you don’t set any background (Type menu), it is going to be clear. Lastly, click on Replace, return and Save, shut the window, and click on Save Menu. Don’t hesitate to test the consequence after.
- The subsequent step is to create a Contact web page. To do that, go to the Pages menu to create a brand new web page. Choose Contact and click on Add to Menu. As soon as the web page is added, click on JetMenu button and regulate the settings. Within the Content material tab, toggle Mega Submenu Enabled choice to Sure. Then, click on Edit mega menu merchandise content material choice to proceed to Elementor editor. Drop part structure and seek for Superior Map module. Edit Superior Map settings to specify the situation, regulate Scrollwheel Zoom, Zoom Controls, and so on. Map Type part lets you change Map Top, and Map Type. Add some pins with the assistance of the Pins part.
- Select Contact Type 7 widget to proceed working in your contact type. As you’ll be able to see, it has a default generic design. Use the Magic button once more and select the perfect design in your web site within the Sections menu. When you choose essentially the most appropriate structure, click on Insert to get it to seem in your web page. Afterwards, you’ll be able to customise the look of your Contact web page. Play with the background, padding, fonts, and don’t forget to click on Replace after you end. Return again, click on Save, shut the window, and click on Save Menu. Refresh your private home web page and test the consequence.
- To create a product assortment part, you want JetWooBuilder plugin. If you’re utilizing JetElements, you’ll have entry to WooCommerce widgets. Simply drop the widget to the middle and begin customization. Arrange the amount of merchandise per web page, order by, titles, and so on. Click on Save, Save Menu, then go to the homepage and refresh it to see the updates.
With JetMenu and JetElements plugins, it’s fast and simple to incorporate weblog posts, product grids, and a contact web page with a map on the house web page of your web site. I hope you loved this tutorial. Share it with those that are constructing web sites and should discover this information helpful. Don’t be afraid to experiment to construct a totally purposeful web site!