In this tutorial, I’m going to show you how to create a vertical menu in Elementor for free using the HT Mega Addons for Elementor. You can be able to do this with both the free and pro versions of Elementor. With your vertical menu just like the horizontal menu, you’ll be able to navigate through pages on your website.
Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.
Video: Free Elementor Vertical Menu Tutorial
Install the HT Mega Addons Plugin
On your WordPress dashboard, go to Plugins > Add New, search for the HT Mega Addons, install and activate it (00:59)
After you activate your plugin, click on it on the dashboard menu, then under Advanced Addons, enable Menu builder (01:09), and then save changes.
If you don’t have Elemnentor pro to help you create your headers and footers, HT Mega enables you to use the HT Builder to assign a section as your header.
To do this go to HT Mega on your dashboard, go to Settings > Advanced Addons, enable the Theme Builder then save changes (07:46)
After enabling it, click on HT Builder on the dashboard, then under Header Template select your template (07:56) then save changes.
This way you’re able to use the header section and create a vertical menu with HT Mega Addons, for free without Elementot Pro.
Add a Vertical Menu using Elementor (Free)
If you’re using the free version of Elementor, open up your page with Elementor, and add a new section with 2 columns.
Select the section and under Style > Background Type, select Image then insert an image from your media library.
Select the first column and under Style > Column Width, give it 25%, then select the second column and give it 75% (02:22).
Go to your Widgets area and search for the Vertical Mega Menu widget then drag it to your first column (02:31)
Select the vertical menu widget, then under Content > Menu, select the menu you want to display (02:44).
Tip:
To create a menu, go to your WordPress dashboard and under Appearance > Menus > Add New, give your menu a name then Add menu items to it and save (02:54), then you’ll be able to select this menu in your Elementor editor.
Select the vertical menu, go to Style > Main Menu > Background Type, select gradient, then choose your first and second colours. You can also do more styling on your menu background.
When you’re done go to the Main Menu Items option, under Text Color select white, under Typography > Weight, give them 700. On Hover, go to Background Type and select Gradient, then choose different gradient colours, set Location to 60 and Angle to 50 (06:30)
When you’re done setting up your menu, click the Update button, then preview your page.
In closing
That’s how you can create a vertical menu in Elementor for free using the HT Mega Addons plugin.
If you have any questions or comments, let me know in the comments section below, and don’t forget to subscribe to my newsletter and youtube channel for more of these tips and tutorials.
