How to create a Divi Pop-Up Overlay without a plugin using the Divi Builder

Feb 15, 2022 | Divi Tutorials, 👨‍🏫 Tutorial | 120 comments

NOTE: We updated this post on 2/15/2022.

What is a Divi Pop-Up?

Definite the first step in learning How to create a Divi Pop-Up Overlay without a plugin using the Divi Builder, is to define it for those of you that may not know what it is.

In Short, a Divi Pop-Up is a Divi Section or Module that is shown on screen when it is triggered by something like a button, or maybe when the user has interacted with your site in some other way like scrolling down a certain amount. This is usually shown over the other content on the page as an overlay with a background covering the other content.

You usually need a 3rd party plugin to add a Divi Pop-Up to your Divi sites, but in this tutorial, we will show you how to do this with only the Divi Builder and some clever code.

Introduction

Today we are going to show you how to create a pop-up overlay with the Divi Builder without using a plugin. We only use simple Jquery and CSS.

We have recorded an extensive tutorial on this, which I think will be helpful in teaching you jQuery / CSS as well as how to create the pop-up. Alternatively, we have it written down below.

1. Give your Divi Pop-Up button/element a CSS class

The first thing is to give a class name to the element you want to click on that activates the pop-up. In our case we are giving it a class name of “popup”.

2. Add jQuery to target the Divi Pop-Up button

The next step is to add some jQuery in Divi > Theme Options > Integrations > Add code to the < body > section. At first we are just going to check if the jQuery is working by preventing the link action and then alerting us that it has. See the code below

3. Create Divi Pop-Up Section and add CSS classes

The third step is to create the pop-up section and add the modules we want. Add a new section and give it the class name “popup-overlay”, then on the column add the class name “popup-content”. The rest is up to you in terms of design, for the section (overlay) add a background colour. For the column we suggest adding a background colour too such as white and add padding of 40px for example to create spacing between the column and the modules.

4. Add CSS to overlay

We need to hide the section we just created and make it show when we add the class “show” using jQuery (step 5). We also need to make it fixed so when you scroll it stays, make it the height and width of the screen and position it above all the other sections. Below is the CSS and the explaination of each

5. Add jQuery to add “show” class & show/hide Divi Pop-Up overlay

Finally we want to add the class “show” when you click on the element with the class “popup” (step 1).

We then want to remove the class “popup” when they click on the overlay but not the content. Below is the jQuery used

Finialise

That is it! This will now allow you to create a pop-up using the Divi Builder with no plugin. We hope this has been helpful and any questions please ask.

What did you think?

120 Comments

Add your comment