Source: https://divicake.com/blog/how-to-create-a-divi-popup-without-a-plugin/

[Blog](https://divicake.com/blog/)/[Tutorials](https://divicake.com/category/tutorials/)

# How to Create a Divi Popup Without a Plugin

By Divi Cake·20 January 2025·Updated 19 August 2026·8 min read

How to Create a Divi Popup Without a Plugin

We may earn a commission from affiliate links in this post. [Disclosure policy](https://divicake.com/affiliate-disclosure-policy/)

On this page

- [Step 1: Access the Required Page](https://divicake.com#step-1-access-the-required-page)
- [Step 2: Create a Single Row with Two Columns](https://divicake.com#step-2-create-a-single-row-with-two-columns)
- [Step 3: Add Image, Button, and Contact Form Modules](https://divicake.com#step-3-add-image-button-and-contact-form-modules)
- [Step 4: Customization](https://divicake.com#step-4-customization)

- [Customize the Button Module](https://divicake.com#customize-the-button-module)
- [Customize the Image Module](https://divicake.com#customize-the-image-module)
- [Step 5: Insert Code Module](https://divicake.com#step-5-insert-code-module)
- [Step 6: Add CSS ID and Class](https://divicake.com#step-6-add-css-id-and-class)

- [Add CSS ID to the Section Settings](https://divicake.com#add-css-id-to-the-section-settings)
- [Step 7: Customize the Background Color of the Row](https://divicake.com#step-7-customize-the-background-color-of-the-row)
- [Step 8: Apply Animation to Enhance Divi Popup](https://divicake.com#step-8-apply-animation-to-enhance-divi-popup)

- [Adjust Animation Duration and Delay](https://divicake.com#adjust-animation-duration-and-delay)
- [Step 9: Set Position of the Popup](https://divicake.com#step-9-set-position-of-the-popup)
- [Step 10: Adjust Divi Popup Width](https://divicake.com#step-10-adjust-divi-popup-width)
- [Step 11: Adjust Image Size of Divi Popup](https://divicake.com#step-11-adjust-image-size-of-divi-popup)
- [Conclusion](https://divicake.com#conclusion)

We are going to teach you how to create a [Divi popup](https://divicake.com/blog/divi-popups/) without a plugin easily. Many [Divi](https://divicake.com/go/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](https://divicake.com/blog/divi-purchase-installation-and-setup/) 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.

- Click on the Plus (+) Icon button.
- 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](https://divicake.com/go/divi-image/) in the first column and a Close [Button Module](https://divicake.com/go/divi-button-module/) in the second column. Below the close button, we will add a [Contact Form Module](https://divicake.com/go/divi-contact-form-module/).

- Click on the Plus (+) Icon in the first column.
- In the search bar, type Image or find it manually in the module list.
- 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.

- Click on the Plus (+) Icon in the second column.
- Search for Button in the search bar.
- Click on the Button Module to insert it.

Insert a Button Module in the second column by clicking the Plus icon button, searching for “Button,” and selecting it from the module list.

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

- Click on the Plus (+) Icon button, as shown in the screenshot.
- Search for Contact Form in the module search bar.
- 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.

The initial Divi popup layout with an Image Module, Contact Form

## 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.

- Click on the Gear Icon of the Button Module, as shown in the screenshot.
- Select the Content tab.
- Open the Text option.
- 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:

- Open the Design tab, as shown in the screenshot.
- Click on the Alignment option to open it.
- 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](https://divicake.com/website-design-and-development-services/) by enabling the custom style for the button.

- Click on the Design tab.
- Scroll down and click on the Button option.
- Toggle Yes to enable Use Custom Style for Button.
- Set the Button Text Size to 7px.
- Set the Button Text Color to match your website design.
- 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.

- Click on the Gear Icon button of the Image Module.
- Select the Content tab.
- 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](https://divicake.com/go/divi-code-module/) below the Popup module to paste the JavaScript code. To do this, we will add a new row in the same section.

- Click on the Plus (+) Icon button below the popup module design.
- 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](https://divicake.com/blog/divi-modules/) 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.

- Search for Code in the search bar or find it manually in the list.
- Add the Code Module.
- 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](https://divicake.com/blog/how-to-add-custom-css-to-divi/) class to the Button Module so that the code can convert our custom design into a Divi popup without using a plugin.

- Copy the CSS Class (diviCakeCloseBtn).
- Click on the Gear Icon of the Button Module.
- Select the Advanced tab.
- Click on CSS ID & Classes.
- 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](https://divicake.com/blog/getting-started-with-divi-advanced-settings/).

- Copy the CSS ID (diviCakePopup) and Click on the Gear Icon button of the Section Settings.
- Select the Advanced tab.
- Click on the CSS ID & Classes option.
- Paste the CSS ID (diviCakePopup) in the CSS ID label.
- 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](https://divicake.com/blog/divi-backgrounds-colors-images-videos/) color of the row to make it visually appealing.

- Click on the Gear Icon button of the Row (green-colored) as shown in the screenshot.
- Select the Content tab.
- Click on the Background option.
- 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](https://divicake.com/blog/a-look-at-the-divi-animation-builder/) to make the Divi Popup more attractive and visually appealing (Row Settings remain open).

- Click on the Design tab.
- Open the Animation option.
- 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.

- Set the Animation Duration to 100ms.
- 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](https://divicake.com/blog/animate-letters-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).

- Click on the Advanced tab.
- Click on the Position option.
- Set the Position to Fixed.
- Set the Location to Center.
- Scroll down and set Z-Index to 200.
- 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).

- Click on the Design tab.
- Click on the Sizing option.
- Enable the Custom Gutter Width button and set Gutter Width to 2.
- 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.

- Click on the Gear Icon button of the Image Module as shown in the screenshot.
- Set the Height to 293px.
- 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.

## Conclusion

By following this step-by-step guide, you have successfully created a fully customizable [Divi](https://divicake.com/go/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](https://divicake.com/blog/divi-overlays-plugins/)

About the author

Written by Divi Cake.

## Submit a comment

Comments are read before they appear. Your email is not published.

Comment

NameEmail

Company website

Submit commentSubmit commentSubmit comment

The comment form needs JavaScript for its spam check.

Thanks. Your comment is waiting for review and will appear here once it is approved.

## Do you need help with …

- [Divi websites](https://divicake.com/divi-website-development/)
- [Divi plugins](https://divicake.com/divi-plugin-development/)
- [Fix a site](https://divicake.com/fix-existing-site/)
- [Beyond Divi](https://divicake.com/beyond-divi/)
- [Technical SEO](https://divicake.com/technical-seo/)
- [SEO content](https://divicake.com/seo-content/)

## Save Annually on Divi

[Save 69% on Divi VIP](https://divicake.com/go/divi-vip/)[Save 69% on Divi Cloud](https://divicake.com/go/divi-cloud/)[Save 69%, Divi Team](https://divicake.com/go/divi-teams/)

## WordPress Hosting & Tools

[100% off on Kinsta for 1 Month](https://divicake.com/go/kinsta/)[Get up to 62% off Bluehost hosting.](https://divicake.com/go/wordpress-hosting-blue-host/)[Save Up to 15% on Rank Math](https://divicake.com/go/rank-math/)[Get 50% OFF on all WPForms plans](https://divicake.com/go/wpforms/)

## More in Tutorials

[

Getting Started with Divi: Using the Divi Builder

Tutorials7 min read

### Getting Started with Divi: Using the Divi Builder

A walkthrough of the Divi Builder for new users: the backend and frontend builders, how sections, rows and modules fit together, and a simple contact page built step by step.

1 October 2026](https://divicake.com/blog/getting-started-with-divi-using-the-divi-builder/)

[

How to Update the Divi Theme

Tutorials4 min read

### How to Update the Divi Theme

How to update the Divi theme safely: back up and test first, add your Elegant Themes API key to Theme Options, run the update from the WordPress Updates screen, and what to do with a legacy version.

23 September 2026](https://divicake.com/blog/how-to-update-divi-theme/)

[

Top reasons to choose a pre-built theme for your website

Blogging10 min read

### Top Reasons to Choose a Pre Built Theme for Your Website

Why a pre-built theme is often the faster and cheaper way to launch a site, compared with a custom build on cost, responsiveness, customization, SEO and support.

21 September 2026](https://divicake.com/blog/reasons-to-choose-a-pre-built-theme-for-your-website/)