Table of Contents
What is a Popup?
In your daily life while navigating through any web page you must have came across popups. Popups are the modal windows which are triggered in response to an action performed either by the user or the web page, they overlay the page at a moment and gives a floating illusion to grab user’s attention.
In this article, we will be designing a popup using Elementor steps by steps, so follow along.
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.
Press Ctrl+E to open a finder like shown below in the figure and click on Add new Popup.
Step 02: Name the Template
Next, you will be prompted to enter a suitable name for the Popup template you are going to design for your web page.
Step 03: Choose a Template from Elementor Library or Make your own.
Elementor will show you suggested templates as shown below:
You can choose among them or you can design your own. In this article, we will be making our own template so close the library.
On closing the library, you will be shown this dialog box to add your own customized section/widget.
Step 04: Start Customizing the shape of your Popup
Click on the settings gear icon located in the bottom left of the Elementor menu.
Next, in the Settings tab expand the Layout section, and tweak the following settings:
- 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.
You can tweak the General and Preview Settings if you have some dynamic content to attach with the popup, but for now we are keeping them on default.
In the style tab, you can add border, set its radius and a lot more from Popup and Overlay sections. Right now, we just changed the size of Close Button to 22 to make it a bit more visible.
Likewise, in the Advanced tab, we enabled the Disable Page Scrolling toggle to stop the user from scrolling the page behind the popup.
Step 05 : Add a Section in Popup
Click on the plus (+) button and select a single column structure.
Drag and drop the Text Heading element from the menu on the left into the section, and under the Content section, give it a text of your choice, set the styling using a required HTML tag type style and set the alignment, for example:
Give your heading a Text Color and set the required Typography:
Step 06: Add Buttons
Add another two column structured section in the popup by clicking on the plus (+) button and drag it below the Heading section. Choose the Button element from the menu and place it in the first column, same goes with the second column of the newly created section.
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.
Next, in the Style tab, tweak the Normal and Hover settings as:
Same goes with the second button, just give it a red Background Color under Normal section.
The resulting popup will be similar to the one shown below:
Note: If you feel like adding more space between the heading text and buttons, just add a new one column structured section in between them and add a Spacer in that section from the elements menu.
Step 07: Publish the Popup
Finally publish the popup by clicking on the Publish button located in the bottom right corner of menu. You can choose Conditions, Triggers, and Rules according to your need but in this case we want the popup to be triggered on one of our buttons click. For doing that, go to your web page editor in Elementor:
- 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.
Click on Publish and see your popup flaunting on your site on button click.
Conclusion
This tutorial was a demonstration of how you can create your own custom popup for your website on WordPress using Elementor. You must have observed how much customization flexibilities Elementor provides to the designer which can be used to make the popups look more visually appealing and attention grabbing.
Get your hands over it and try this feature of Elementor to showcase your creative skill to target your audience.
