How to Create a Divi Popup Without a Plugin

by | Jan 20, 2025 | Tutorials | 0 comments

Affiliate Disclosure: Some of the links in this post are affiliate links, which means we may earn a commission if you click through and make a purchase. For more details, please read our Affiliate Disclosure Policy.

We are going to teach you how to create a Divi popup without a plugin easily. Many Divi website developers struggle to create a popup using plugins or fail to find a free plugin that works efficiently. Most free plugins come with limitations, which is why we’re here to solve this problem by helping you create a fully customizable popup without any restrictions—all for free and in a very simple way.

The design of the popup depends on your website’s layout and preferences. In this tutorial, our goal is to create a Divi popup without a plugin using code. The best part is that you can turn any Divi theme section, row, or even a single column into a popup. First, design your section as needed, and then simply convert it into a Divi popup. If you follow our step-by-step guide, you’ll be able to transform any premade design into a Divi popup effortlessly.

Step 1: Access the Required Page

First, navigate to the specific page where you want the Divi popup to appear. This is the page where your popup will be displayed.

Step 2: Create a Single Row with Two Columns

In this step, we will create a single row with two columns inside a new section. You can choose the number of columns based on your needs, but for this tutorial, we are using two columns in a single row.

  1. Click on the Plus (+) Icon button.
  2. Insert a Single Row with Two Columns.
Add a single row with two columns in Divi by clicking the Plus icon button and inserting the desired layout for your popup design.

Step 3: Add Image, Button, and Contact Form Modules

Now, we will insert an Image Module in the first column and a Close Button Module in the second column. Below the close button, we will add a Contact Form Module.

  1. Click on the Plus (+) Icon in the first column.
  2. In the search bar, type Image or find it manually in the module list.
  3. Once the Image Module appears, click on it to insert.
Insert an Image Module in the first column and a Close Button Module in the second column, followed by a Contact Form Module, to design a functional Divi popup.
  1. Click on the Plus (+) Icon in the second column.
  2. Search for Button in the search bar.
  3. Click on the Button Module to insert it.

Now, it’s time to insert the Contact Form Module below the closing button.

  1. Click on the Plus (+) Icon button, as shown in the screenshot.
  2. Search for Contact Form in the module search bar.
  3. Click on the Contact Form Module to insert it.

The screenshot below displays the result after adding the Image Module, Contact Form Module, and Button module successfully before customization.

Step 4: Customization

Customize the Button Module

In this step, we will customize the Image Module, Contact Form Module, and Closing Button Module to enhance their appearance and functionality.

  1. Click on the Gear Icon of the Button Module, as shown in the screenshot.
  2. Select the Content tab.
  3. Open the Text option.
  4. In the Button Label, type “X” to set it as the closing button.
Modify the Button Module in Divi by clicking the Gear Icon, accessing the Content tab, and setting the Button Label to “X” for the closing button.

Now, we will align the button to the right corner. To do this, follow these steps:

  1. Open the Design tab, as shown in the screenshot.
  2. Click on the Alignment option to open it.
  3. Select the Right Alignment button, as shown in the screenshot.
Adjust the Button Module alignment in Divi by opening the Design tab, selecting the Alignment option, and choosing Right Alignment for proper positioning.

Next, we’ll customize the button text color according to our website’s design by enabling the custom style for the button.

  1. Click on the Design tab.
  2. Scroll down and click on the Button option.
  3. Toggle Yes to enable Use Custom Style for Button.
  4. Set the Button Text Size to 7px.
  5. Set the Button Text Color to match your website design.
  6. Click the Tick Mark button to save the changes.
Enable custom styling for the Button Module in Divi by adjusting the text size, color, and design settings to match your website’s theme.

Customize the  Image  Module

Now, let’s change the image and customize its size to make it more attractive.

  1. Click on the Gear Icon button of the Image Module.
  2. Select the Content tab.
  3. Click on the Image and upload your website’s image.
Update the Image Module in Divi by selecting the Gear Icon, accessing the Content tab, and uploading a custom image to fit your website's design.

Step 5: Insert Code Module

Now, it’s time to create a Code Module below the Popup module to paste the JavaScript code. To do this, we will add a new row in the same section.

  1. Click on the Plus (+) Icon button below the popup module design.
  2. Select Single Row, Single Column.
Add a new row with a single column below the popup module design in Divi, preparing to insert a Code Module for the JavaScript code.

After creating the new row, the Divi Module list will open automatically. We will add the Code Module and paste our JavaScript code into it. Make sure to wrap the code with the starting (<script>) and closing (</script>) tags.

  1. Search for Code in the search bar or find it manually in the list.
  2. Add the Code Module.
  3. Once the Code Module is added, paste the provided JavaScript code into the black-colored code box, as shown in the image below.
<script>
document.addEventListener("DOMContentLoaded", function () {
    // Select the close button and popup elements by class and ID
    const closeButton = document.querySelector(".diviCakeCloseBtn");
    const popup = document.getElementById("diviCakePopup"); 
    // Check if the close button and popup exist
    if (closeButton && popup) {
        // Add click event listener to the close button
        closeButton.addEventListener("click", function (event) {
            event.preventDefault(); // Prevent default behavior
            console.log("Close button clicked, hiding the popup."); // Debug message
            popup.style.display = "none"; // Hide the popup
        });
    } else {
        console.error("Close button or popup element not found."); // Log error if elements are missing
    }
});
</script>
 Insert the Code Module in Divi, search for "Code" in the module list, and paste the JavaScript code wrapped in <script> tags into the module's code box.

Step 6: Add CSS ID and Class

Now, we’ll add a CSS class to the Button Module so that the code can convert our custom design into a Divi popup without using a plugin.

  1. Copy the CSS Class (diviCakeCloseBtn).
  2. Click on the Gear Icon of the Button Module.
  3. Select the Advanced tab.
  4. Click on CSS ID & Classes.
  5. Paste the CSS Class (diviCakeCloseBtn) in the CSS Class label.
Assign a CSS class to the Button Module in Divi by opening the Advanced tab, navigating to CSS ID & Classes, and pasting the class "diviCakeCloseBtn" to enable custom functionality.

Add CSS ID to the Section Settings

Now, we will add a CSS ID to the entire section in the Advanced tab.

  1. Copy the CSS ID (diviCakePopup) and Click on the Gear Icon button of the Section Settings.
  2. Select the Advanced tab.
  3. Click on the CSS ID & Classes option.
  4. Paste the CSS ID (diviCakePopup) in the CSS ID label.
  5. Click the Tick Mark button to save the changes.
Assign a CSS ID to the entire section in Divi by accessing the Advanced tab in Section Settings, pasting the ID "diviCakePopup" in the CSS ID label, and saving the changes.

Step 7: Customize the Background Color of the Row

Now, we will customize the background color of the row to make it visually appealing.

  1. Click on the Gear Icon button of the Row (green-colored) as shown in the screenshot.
  2. Select the Content tab.
  3. Click on the Background option.
  4. Change the Background Color to your preferred color, as shown in the screenshot.
Change the background color of the row in Divi by opening Row Settings, selecting the Content tab, and adjusting the Background option to match your design.

Step 8: Apply Animation to Enhance Divi Popup

Now, we will add an animation effect to make the Divi Popup more attractive and visually appealing (Row Settings remain open).

  1. Click on the Design tab.
  2. Open the Animation option.
  3. Select Fade as the Animation Style.
Apply a fade animation effect to the Divi popup by accessing Row Settings, opening the Design tab, and selecting the Fade option under Animation settings.

Adjust Animation Duration and Delay

Now, scroll down in the Animation Settings to fine-tune the animation effect.

  1. Set the Animation Duration to 100ms.
  2. Set the Animation Delay to 2000ms.
Fine-tune the Divi popup animation by setting the Animation Duration to 100ms and the Animation Delay to 2000ms in the Animation Settings.

Learn More: How to Animate Letters for Unique Designs in Divi

Step 9: Set Position of the Popup

Now, we will change the position of the row to be fixed and align it to the center (Row Settings remain open).

  1. Click on the Advanced tab.
  2. Click on the Position option.
  3. Set the Position to Fixed.
  4. Set the Location to Center.
  5. Scroll down and set Z-Index to 200.
  6. Click on the Tick Mark button to save the changes.
Adjust the Divi popup position by setting the row to Fixed, aligning it to the Center, and setting the Z-Index to 200 in the Advanced tab.

Step 10: Adjust Divi Popup Width

Now, we will decrease the width of the row to improve the popup’s appearance (Row Settings remain open).

  1. Click on the Design tab.
  2. Click on the Sizing option.
  3. Enable the Custom Gutter Width button and set Gutter Width to 2.
  4. Scroll down and set the Width to 44%.
Improve the Divi popup appearance by enabling Custom Gutter Width, setting Gutter Width to 2, and adjusting the row width to 44% in the Design tab.

Step 11: Adjust Image Size of Divi Popup

Now, we will increase the image size to make it equal to the Contact Form module.

  1. Click on the Gear Icon button of the Image Module as shown in the screenshot.
  2. Set the Height to 293px.
  3. Click on the Tick Mark button to save the changes.
Resize the Image Module in the Divi popup by setting its height to 293px to match the Contact Form module for a balanced layout.

Final Result

The GIF below demonstrates the final output after successfully following and implementing all the steps provided above.

A GIF showcasing the final Divi popup design with animations, custom styling, and interactive elements after completing all the implementation steps.

Conclusion

By following this step-by-step guide, you have successfully created a fully customizable Divi Popup without relying on any plugins. This method gives you complete control over the design, animations, and functionality, ensuring a seamless user experience. Whether you’re using images, buttons, or contact forms, you can now transform any Divi section, row, or column into an interactive popup effortlessly. With CSS, JavaScript, and Divi’s built-in features, you can enhance your website’s usability while keeping it lightweight and efficient. Try experimenting with different designs and animations to make your popups more engaging!

Read More: Divi Overlays Popup Builders

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Stay ahead with the Latest WordPress Insights

Subscribe for tips, updates, and exclusive tools to elevate your website game.

Newsletter

No spam ever. Only Divi related updates. You need this.

Pin It on Pinterest

Shares