Table of Contents
What is a Popup?
Step by Step Guide to Design an Elementor Popup
Step 01: Selecting a template/Have your own web page.
We have selected a built-in template from Elementor library. You can do the same according to your requirement or can have your own web page in which you want to embed the popup.
Step 02: Name the Template
Step 03: Choose a Template from Elementor Library or Make your own.
Step 04: Start Customizing the shape of your Popup
- Give width a value of 45 VW.
- Height -> Fit to content.
- Positions are centered (you can customize it according to your choice).
- Enable Overlay and Close Button toggles.
- Choose the Entrance and Exit Animations of your choice. We set them to Fade in and Fade out.
- Animation Duration -> 0.7 sec.
Step 05 : Add a Section in Popup
Step 06: Add Buttons
Click on individual buttons and change the properties as shown below:
- Set the Text property under the content section.
In the style tab of both buttons:
- Change Typography settings.
- Give the text a Weight of 500.
- Make the text Transform Uppercase.
- Finally set the Letter Spacing to 9.3.
Step 07: Publish the Popup
- Select the button you want to set the popup to be triggered on.
- Under the Link section choose Popup from the dropdown menu.
- Next under the Popup section write name of your created popup and select it.
Get your hands over it and try this feature of Elementor to showcase your creative skill to target your audience.