The pro version of Elementor has a super useful popup builder feature which you can use to create a stunning popup. If you don’t have the pro version, you can still create a popup although it takes extra effort. It this post, I will show you how to create a popup in Elementor Free. Without involving an add-on.
Popup itself is a great marketing tool if implemented properly and proportionally. You can use it to capture leads, to display a promotional banner, to create a floating element, and so on. Popup is also great to increase user involvement on your website. You can, for instance, display a video in a popup when a visitor clicks on a button.
While I will show you how to create a popup in Elementor Free in this post, I strongly recommend using the pro version if you want to create an advanced popup. Especially if you want to create a popup for a marketing purpose. You can incorporate the popup builder of Elementor and its form builder to create an effective email opt-in popup to capture leads.
Shortcuts:
- Step one: Design the popup
- Step two: Add CSS snippet
- Step three: Add JavaScript snippet
- Step four: Call the popup
Preparation
To manually create a popup in Elementor Free, you will need to add a CSS snippet. Commonly, you can add CSS snippet via the Additional CSS block on Theme Customizer. However, if you use a block theme, you may need to enable Theme Customizer first as the feature is disabled in most block themes.
How to enable Theme Customizer in a block theme?
On your WordPress dashboard, go to Tools -> Theme File Editor. Select the functions.php file on the right panel to edit its content and add the following line right after the last line of the functions.php file’s content.
add_action( 'customize_register', '__return_true' );Here is the example of the placement of the above line.
Make sure to click the Update File button after adding the line.
A little note. If your website is hosted on SiteGround and you use its security plugin (Security Optimizer), you may need to enable the theme and plugin file editor feature on your WordPress site.
Start Creating the Popup
In this example, I will show you how to create a simple modal popup that will show up when a visitor clicks a button. The design of the popup is created with the Elementor editor, of course. Thus, you can tailor the popup content according to your needs.
For your information, I will use container instead of section. If you still use section, you can enable container first by going to Elementor -> Settings your WordPress dashboard. Click the Features tab on the Elementor settings dashboard and scroll down to find the Flexbox Container option and enable it.
Click here to see the end result of the popup I will create in this post.
Step 1: Design the Popup
Start by creating a new page and edit it with Elementor. Of course, you can also edit an existing page. Design your page as you usually do with Elementor. Once done, add a new container to your page. To make it easy for you to identify the container of the popup on your page, you can rename the container to something like “popup”.
Here is the example of my design.
Select the popup container to make some settings. On the Layout tab on the settings panel, set the Content Width to Full Width and set the width to 600px. You can tailor the value according to the width of the popup you want to create.
Next, you can start to add any widget to the popup container. You can add any widget. In my example, I only add the Video widget.
Once done designing the popup content, select the popup container and go to the Advanced tab on the settings panel. Add the CSS class wpp-popup-content to the CSS Classes field.
Adding the Close Popup Icon
You need to add a close popup icon to close the popup. For this purpose, you can use the Icon widget. Ideally, you can use the window close button for the close popup icon. But you can use any icon if you want it.
You can place the icon anywhere within the popup container. But ideally, it should be placed at the top-right corner as shown below.
Once done adding the icon, go to the Advanced tab on the settings panel and add the CSS class wpp-popup-close to the CSS Classes field.
Step 2: Add CSS Snippet to Hide the Popup Container
Once you are done designing your popup, the next step is to add the CSS snippet to hide the popup container when the page is loaded. Here is the CSS snippet you can use.
body .wpp-popup-wrapper {
position:fixed;
z-index:99999;
transition: all .5s cubic-bezier(.14,.06,.41,1.39);
opacity:0;
visibility:hidden;
}
body .wpp-popup-wrapper.popup-is-visible {
opacity:1;
visibility:visible;
}
/* Prevent Body from Scrolling when Popup is visible */
body.wpp-noscroll {
overflow: hidden;
}
/* Center Align Popup Content inside the Section */
.wpp-popup-content {
display:flex;
flex-direction:column;
justify-content: center;
}
.wpp-popup-close {
cursor:pointer;
}You can add the above CSS snippet to the Additional CSS block on Theme Customizer. Go to Appearance -> Customize on your WordPress dashboard to access Theme Customizer.
Scroll down to the Additional CSS block and add the above snippet. Click the Publish button to apply the snippet.
The above CSS snippet is used to hide the popup container when the page is loaded. And when the trigger is activated (button click in this case), the popup will show up.
Step 3: Add JavaScript Snippet to Open the Popup Container
Next, you need a JavaScript snippet to open the popup container on your page. In Elementor, you can use the HTML widget to add JavaScript snippet.
So, drag the HTML widget and drop it to your page. You can place it anywhere within your page. Be it to the popup container or the parent container.
Here is the JavaScript snippet you can use.
<script>
jQuery(document).ready(function($) {
$('.wpp-popup-content').each(function(){
$(this).wrap('<div class="wpp-popup-wrapper"><div class="wpp-popup-inside">');
});
$('.wpp-popup-trigger').off().click(function(e){
e.preventDefault();
$('.wpp-popup-wrapper').addClass('popup-is-visible');
$('body').addClass('wpp-noscroll');
});
$('.wpp-popup-close').click(function(e){
e.preventDefault();
$('.popup-is-visible').removeClass('popup-is-visible');
$('body').removeClass('wpp-noscroll');
});
});
</script>You can add the above snippet to the code editor of the HTML widget as shown below.
Step 4: Call the Popup
Your popup is ready. You can call it with a button on your page. First, add a Button widget or edit an existing one. On the settings panel, go to the Advanced tab and add the CSS class wpp-popup-trigger to the CSS Classes field.
Preview your page and try to click the button to display the popup. If everything goes well, you should see the following result.
Summary
Elementor has a native popup builder feature, but it is only accessible if you have the pro version installed. If you only need to create a simple modal popup, there is a sollution to create one in the free version as I have just elaborated above.
To create a more advanced popup, upgrading the pro version is wort considering. The popup builder of Elementor allows you to create a wide range of popup types. From a simple modal popup like the one above, notification bar, content locker, floating element, email opt-in, and more. You can even use it to create a full-width menu on your website.
