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.
- Click on the Plus (+) Icon button.
- Insert a Single Row with Two Columns.
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.
- 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.
- Click on the Plus (+) Icon in the second column.
- Search for Button in the search bar.
- Click on the Button Module to insert it.
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.
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.
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.
Next, we’ll customize the button text color according to our website’s design 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.
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.
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.
- Click on the Plus (+) Icon button below the popup module design.
- Select Single Row, Single Column.
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.
- 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>
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.
- 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.
Add CSS ID to the Section Settings
Now, we will add a CSS ID to the entire section in the Advanced tab.
- 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.
Step 7: Customize the Background Color of the Row
Now, we will customize the background 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.
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).
- Click on the Design tab.
- Open the Animation option.
- Select Fade as the Animation Style.
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.
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).
- 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.
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%.
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.
Final Result
The GIF below demonstrates the final output after successfully following and implementing all the steps provided above.
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