Do you want to create a full screen menu in Elementor ? If so, this article will show you how. There is no add-on needed to create a full-screen menu in Elementor. All you need is Elementor Pro.
The pro version ofElementor comes with a popup builder which allows you to create beautiful popups. You can use this feature to create full screen menu in Elementor.
If you don't see what we want to talk about today, check out this video.
How to create a fullscreen menu in Elementor?
Before you begin, make sure you have upgraded your Elementor to the pro version. Once you're ready, go to Templates -> Popups. Create a new popup template by clicking the Add New button.
Give your popup template a name and click the button CREATE AMODEL.
Elementor offers dozens of popup templates for you to choose from. In this tutorial, we will create the model from scratch. So just close the template library to open the Elementor editor.
Before you start creating the popup template, define the layout first. To do this, open the popup window settings by clicking the gear icon in the lower left corner.
In the block Layout, under the tab Settings, set the width to 100VW and the height on Fit to screen. You can also set entry and exit animation effects.
After defining the layout, start creating the template by adding a new section. You can add whatever elements you want to the template. To add menu items, you can use the Nav Menu widget or the Icon List widget.
See also: How to set custom position for mobile menu in Elementor
In this guide, we will be using the Icon List widget.
Edit each item in the list. You can add the menu item label in the field texts and add the link in the field Link.
Go to the tab Style to style lists. You can set the space between list items and the alignment in the List Block. To set the icon size and color (if you use icons), you can open the Icon block. To set the typography (font size, font family, font style) and text color of list items, you can open the Text block.
If you want, you can change the background of the section. To customize the popup close button, open the popup settings again and go to the tab Style. Open the block close button and you will see some options to customize the close button like background color, size and position.
Once you are done creating the popup template, click the arrow icon next to the button PUBLISH and select Display Terms.
Set where you want the popup to appear by clicking the button ADD A CONDITION And click on the button NEXT to set the trigger.
Activate the option Click And click SAVE & CLOSE.
Popup template call
Once the popup template is ready, you can call it. As you want to create a full screen menu, you can create a header with Elementor or modify an existing header.
Read this post to know more about how to create a custom header with Elementor.
You can call the popup template you just created with any Elementor widget that has an option to add a link, like a button, icon, icon box, text, image, etc.
In this tutorial, we use the Icon Box widget. Select the widget to enter editing mode. Under the tab Contents From the left panel, find the field in which to add the link.
Set the link as dynamic and select Popup.
Select the popup template you just created by clicking the wrench icon.
Publish/Update your header template.
Get Elementor Pro Now!!!
Conclusion
Here ! That's it for this article that shows you how create a fullscreen menu in Elementor. If you have any concerns about how to get there let us know within Comments.
However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
