Search

How to Create a Popup in Elementor Free Version (without Plugin)

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.

Section settings

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

CSS Class for the Popup Section

Then, open up the column settings and establish the column ratios as follows:

  • Left Column Width: 95%
  • Right Column Width: 5%
Column settings illustration

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.

Setting the close icon of the popup

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.

Adding JavaScript

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.

Adding JavaScripts in WordPress

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.

Popup Example

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.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Hendri Risman

Hendri Risman

Hendri is a WordPress expert and a writer staff at WPPagebuilders. He writes solutions on how to get things fixed in WordPress a lot. Mostly without involving a plugin.
Want to save yearly expense up to $219? why not?

2 thoughts on “How to Create a Popup in Elementor Free Version (without Plugin)”

Leave a Comment

Haven’t used Elementor Pro yet?