Popup builder is a one of the Elementor features that is only available on the pro version. But with a little effort, you can also create a popup on the Elementor Free. This post will show you how.
Creating a popup with Elementor Pro is effortlessly simple thanks to its dedicated feature called Popup Builder. This feature empowers you to design popups using the intuitive drag-and-drop interface of Elementor. With Popup Builder, you gain access to a plethora of pre-made templates, allowing you to choose and customize popups seamlessly. Additionally, you can set triggers for your popups, determining when they appear with just a few clicks.
However, even if you’re using Elementor Free, you’re not left out in the cold when it comes to creating engaging popups. This article will guide you through the process of crafting popups without the need for additional plugins. Depending on the code you choose, you can trigger the popup to appear either through a button click or by setting a specific time for it to automatically display. Let’s dive into the steps!
Creating Popup in Elementor Free Version
Step 1: Create a Section and Design the Popup
To initiate the creation of a popup using the Elementor free version, start by establishing a section on the page where you want the popup to appear. This section will serve as the container for all the elements constituting your popup. The elements within can range from text and images to videos or any other components aligned with the intended purpose of the popup.
For creating a form within your popup, consider employing a form builder plugin like WPForm. By integrating WPForm, you can easily design your form according to your preferences and requirements. Once the form is created, you can seamlessly incorporate it into the designated section of your Elementor page using the provided shortcode.
As this article underscores the avoidance of additional plugins, putting the focus on utilizing only the free version of Elementor and incorporating custom code, let’s dive into the practical steps. Consider a scenario where you’re crafting a simple popup to highlight an announcement for an ongoing sale. Now, let’s move forward with the hands-on implementation.
Create the Section and Assign a CSS Class
Build a section with a two-column structure positioned after the page’s content. Designate the first column for your popup content and reserve the second column for the close button, allowing users to easily exit the popup.
After establishing the section, access the section settings to fine-tune the width and height of the forthcoming popup. Refer to the provided screenshot of our section settings as a visual guide, and feel free to tailor these dimensions to align with your specific preferences.

Proceed to the Advanced tab and insert the wpp-popup-content
custom CSS class into the designated CSS Classes field

Then, open up the column settings and establish the column ratios as follows:
- Left Column Width: 95%
- Right Column Width: 5%

Add a Closing Icon and Assign CSS Class
After completing the section setup, introduce a closing icon (X) to the right column. This icon will serve as the mechanism to close the popup when clicked.

Proceed to the Advanced tab and assign wpp-popup-close
custom CSS class in the CSS Classes field.

Design Your Popup
Now, unleash your creativity and design the popup within the left column by incorporating any elements you deem necessary. The canvas is yours to explore, allowing you to craft a visually appealing and engaging popup. Below, find an illustration of our simple popup designed for this tutorial as a source of inspiration.

You now have the option to save the section as a template, enabling you to seamlessly load it in another location without the need to recreate it from scratch. It’s a time-saving strategy. Just ensure that the custom CSS class assigned to the section and the close button remain intact when you load the template, preserving the intended design and functionality.
Step 2: Add a Custom Code
Select the Popup Trigger Code
Once you’ve finished designing your popup, it’s time to introduce some code that will initiate the section’s appearance when the trigger is activated. In this tutorial, we’ll present two methods for triggering the popup, and we’ll provide you with the corresponding code for each method:
- Trigger the popup automatically after some time passed
<script> jQuery(document).ready(function($) { $('.wpp-popup-content').each(function(){ $(this).wrap('<div class="wpp-popup-wrapper"><div class="wpp-popup-inside">'); }); setTimeout(function(){ $('.wpp-popup-wrapper').addClass('popup-is-visible'); $('body').addClass('wpp-noscroll'); }, 3000); $('.wpp-popup-close').click(function(e){ e.preventDefault(); $('.popup-is-visible').removeClass('popup-is-visible'); $('body').removeClass('wpp-noscroll'); }); }); </script>
The provided code will automatically display the popup after three seconds. If you wish to adjust the timing, you can modify the value of 3000, which is in milliseconds (3000 ms equals 3 seconds). Feel free to make it shorter or longer according to your preferences by altering this numerical value.
- Trigger the popup by clicking a button
<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>
The provided code will activate the popup when a button with a custom CSS class of wpp-popup-trigger
is clicked.

Adding the Code
For a quick implementation, you can easily insert the chosen trigger code into an HTML element on the visual editor.

If you prefer the code to run across your entire website, you can integrate it into the head of your website by encapsulating the code within a PHP function. This function can be added to a custom plugin or directly to your theme’s functions.php file. You can access the functions.php file by navigating to Appearance and then selecting Theme File Editor from your WordPress dashboard. Below is the format of the function to guide you through this process.
function wpp_popup_trigger() { ?> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> //paste the code here <?php } add_action('wp_head', 'wpp_popup_trigger');
Copy the popup trigger code based on your preference — whether it’s the automatic trigger or the button click trigger. Paste the copied code on the line marked with //paste the code here
within the provided function format. Once this is done, insert the complete code at the bottom of the file editor in your functions.php file. To finalize the process, click the Update File button to ensure that the modifications are applied and take effect on your WordPress site.

If youāre working with a block theme, you can find the Theme File Editor menu located within the Tools menu. In the case that your chosen theme, like āTwenty Twenty Three,ā doesnāt include the functions.php file, you might need to create it via SFTP or your siteās file manager initially.
Step 3: Add a Custom CSS
To complete the setup, incorporate the following custom CSS into the Additional CSS section within the theme customizer. Typically, you can access this customization area by navigating to Appearance and selecting Customize from the menu on your WordPress dashboard. If you use a block theme, we have a separate article covering how to enable theme customizer on a block theme.
body .wpp-popup-wrapper { position:fixed; z-index:99999; top:0; right:0; bottom:0; left:0; 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; } /* Allow the content inside the popup wrapper to scroll */ .wpp-popup-inside { height:100%; overflow-y: scroll; } /* 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; }
The provided CSS code functions to initially conceal the popup. When the trigger is activated, the code ensures that the popup becomes visible, overlaying all other elements on the page. This mechanism enables a smooth and controlled display of the popup upon triggering.
With all the aforementioned steps completed, your popup is now primed for action. Below is an illustration of the popup in action, set to appear automatically after three seconds. Scroll down to view the full popup, and utilize the close button for a seamless and user-friendly interaction.

The Bottom Line
Even if you’re using the free version of Elementor, you can still create engaging popups without additional plugins. This article guides you through the process, offering code options to trigger popups either through a button click or at a specific time without the need for additional plugins.
8 thoughts on “How to Create a Popup in Elementor Free Version (without Plugin)”
Hello, Hendri!
I followed the steps outlined in this article thoroughly, and it worked!
However, one persistent issue I am facing is:
the WP menu URLs on my underlying page stop working completely.
to clarify, the same menu on other pages works as expected, without any issues, but the URLs on the homepage where I have implemented this elementor popup technique do not work at all.
I have tried tapping, clicking, nothing works…
Only right-clicking the URLs to open link in new tab works and then it also scrolls to the correct section, but the URLs (including the anchor links used to scroll to the correct section on the same page on the same ) don’t load on the same page, apart from this major functional issue, this implementation to create an elementor popup has worked really well.
Is there any type of reset that can be can be included within the wpp-popup-close function code block to enure the links work?
this would really help!
I could send you the URL to the live homepage if you would like to see it for yourself?
please let me know, looking forward to making this work !
Hi, sank
Thank you for sharing your experience, and Iām glad the implementation is mostly working as intended!
It sounds like the issue is related to how the popup interaction modifies the behavior of links on the homepage.
Try to Reset Click Listeners by adding $(‘a’).off(‘click’); under the .wpp-popup-close function.
Hope that helps!
This is a game changer for me..winderful tip. How do I add two buttons to the popup?
I’m thrilled to hear that the tip is a game changer for you, Ginta!
Regarding adding two buttons to the popup, if you would like to place them inline, you can refer to the inline guide from our previous article here. Or, is it different layout ?
Hello, awesome!
I managed to implement it, but it is only displayed on the desktop, on mobile it does not work.
Can you help me?
Hi Pedro,
To ensure a smooth experience on mobile devices, you might want to check that the popup width isn’t too large for phone screens. Implementing media queries for the popup section can help make the width dynamic and responsive to different screen sizes. For example
@media (max-width: 768px) {
.wpp-popup-content {
width: 80%;
}
}
/* Media query for mobile phones (widths less than 480px) */
@media (max-width: 480px) {
.wpp-popup-content {
width: 90%;
}
}
On medium and small screens, the popup width is set to percentage of the screen width, making it more adaptable and readable.
Thanks for the post Hendri. It helped so much!
Thank you for the kind words Patti! I’m glad my post was helpful.