The pro version of Elementor comes with a popup builder feature that allows you to create a beautiful popup on your WordPress site effortlessly. With a bit of creativity, you can also use the popup builder to create an attractive menu. In this post, we will show you to use create an off-canvas menu in WordPress using Elementor’s popup builder.
What is off-canvas menu?
An off-canvas menu is a type of menu that appears on the right side or the left side of a website. This menu typically appears after a visitor clicks a button or icon. Here is an example of an off-canvas menu.
How to create an off-canvas menu in Elementor
The popup builder of Elementor supports several trigger types, including on-click. You can make use of this to create an off-canvas menu. The popup (menu) will appear after your visitors click a button or icon you set. In addition to creating an off-canvas menu, you can also use the Elementor’s popup builder to create a full-screen menu.
Before getting started, make sure you have upgraded your Elementor to the pro version since the popup builder is only available on the pro version of Elementor.
Step 1: Create the popup template
Login to your WordPress dashboard and go to Templates -> Popups. Click the Add New button to create a new popup template.
Give your popup template a name and click the CREATE TEMPLATE button.
Elementor offers tens of premade popup templates you can choose from. In this example, we will create the popup from scratch. Simply click the template library by clicking the X button on the top-right corner. Before adding the content, set the popup layout first. To do so, open the popup settings panel by clicking the gear icon on the bottom-left corner.
On the Layout block under the Settings tab, set the Height to Fit to Screen and horizontal position to left or right. You can set the width according to the width of the off-canvas you want to create. You can also set the entrance animation as well as the exit animation from this block.
Once you are done setting the popup layout, you can start to add the content to your popup. Start by adding a new section and drag the widget you want to add. You can use either the Nav Menu widget or Icon List widget to display the menu items. In this example, we use the Icon List widget.
Edit the list items. Tailor them with the menu labels you want on your website. Don’t forget to add the link on the Link field.
Go to the Style tab to style up the Icon List widget. Open the List block to set alignment and space between the items. To customize the icons (if you use ones), you can open the Icon block. While to customize the text, you can open the Text block. From this block, you can set the text color, text hover color, and typography (font size, font style, font family, and so on).
You can go to the Advanced tab to set the margin and the padding of the Icon List widget.
You can add other widgets such as Social Icons, Form, Button, Image, or any widget you want to the section.
To make your menu looks more attractive, you can change the background of the section. Click the section handle and go to the Style tab on the left panel. Change the background from the Background block.
You can also set the section layout by setting the height fit to screen so you will have a solid background from the top to bottom.
If you are new to Elementor, you can read our beginners’ guide to learn how to edit a section, column, and widget in Elementor.
Once you are done editing the content, click the PUBLISH button on the bottom side on the left panel to publish the popup. Set where you want your popup to appear by clicking the ADD CONDITION button and click the NEXT button.
Next, you will be asked to set the trigger type. Enable the On Click option. If you want to add an advanced rule, you can click the NEXT button. Otherwise, you can click SAVE & CLOSE.
Step 2: Edit the header
Once your popup template is ready, you can call it at any time. Since we want to create an off-canvas menu so we will call it via an element on the header. You can read our guide on how to create a custom header with Elementor.
You can use any Elementor widget that has an option to add a link to call the popup template you have just created. In this example, we use the Icon widget. Drag the Icon widget to the header and select the icon you want to use.
Click the database icon on the Link field and select Popup.
Click the wrench icon and select the popup template you have just created (type your popup name to find the popup template).
Click the UPDATE button to update your header.
