It is possible to create pop-ups from Divi sections for free! Thanks to the free plugin "Popups for Divi you will turn any Divi section into a popup that opens when the user clicks or intends to leave the page.
In this new article, I propose you to (re)discover this easy to use extension.
You can use it to display a text message but not only! Any Divi module may appear in a pop-up window...
Here is a video preview of what you can create:
- 1 - A popup ? A popup ? Pop-up ?
- 2 - Pop-up or Modal?
- 3 - What is "Popups for Divi"?
- 4 - How do I use Popups for Divi?
- 5 - Access the "Popups for Divi" live demo!
Announcement: this article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.
1 - A popup ? A popup ? Pop-up ?
I see you coming! Some of the readers of this article will say but we say "a popup", others will not be surprised to read "a popup", and others will think but it's spelled " pop-up "!!!
To be honest, I never know what term to use... I'm partial to "a popup" or "a pop-up".
Anyway, our friend Wikipedia tells us that we can say a pop-up or a pop-up.
In French, this term could be translated as "surging window" or even "intruding window". It's less fun, isn't it?
I think that the word "pop-up" has long been Frenchified, just like the word parking or cocktail... You can imagine saying "let's find a place on a parking lot because we'll be late to sip our cocktails"... LOL!!!
So, as you already know, a pop-up is a small window that appears on your computer screen (or even smartphone) with the purpose of getting you to do something.
I've rarely (never, in fact) seen a pop-up that just pops up telling you "hey how's it going?"
We are far from that... A pop-up is generally set up for commercial purposes: a call to action to encourage Internet users to place an order or a registration.
On a scale of annoyance from 1 to 10, what do you think of this:
- pop-ups that you can't close : where is this cross ?
- the popups which are really intrusive: I discover the site since a second and a half and they ask me to give my email! It's crazy!
- Non-responsive popups : but, but how do I do it ? Let's go, I'm leaving!
- popups that open when "I'm leaving": is that really a good idea? If I leave, it means I want to leave, if I want to come back, I save the tab in my dedicated app...
- the popups that open on each page: not smart enough to see that I've already clicked on the cross... Like, I'm surfing on 10 pages of the same site and the popup opens 10 times...
Anyway, I have to take a deep breath, I'll be fine (feel free to say in comments that this is the type of pop-up you hate the most)...
So, as you can see, the way you use a pop-up is crucial for your conversion rate: if you are too intrusive, it won't work, if you are totally absent, you won't get any return...
So you have to find the right balance but that's not the purpose of this article... I'll introduce you to this famous plugin "Popups for Divi and explain you how it works. So, no marketing theory here...
2 - Pop-up or Modal?
A little aside to try to understand the difference between a pop-up and a modal window...
So, as we have just seen, the pop-up is used for commercial purposes, to encourage the user to take action. Nothing is mandatory and you can close this window.
Whereas a modal window is used more for operational purposes.
For example, you click on a button to create your account and a window pops up to retrieve your information. Or, you visit a merchant site that sells alcohol and a modal pops up to ask you if you are of age, you will have to enter your year of birth to continue browsing the site.
In general, a modal window takes full control of the visited screen and you will not be able to click elsewhere to exit. The modal goes on top of the application you are using, to get out of it you will have to either enter the requested information or cancel your request.
3 - What is "Popups for Divi"?
Popups for Divi is a free plugin available on the official WordPress extensions directory.
With this plugin, you will create simple popups but its advantage is that the window will be composed of a Divi section created with the Visual Builder.
This extension is therefore optimized for the Divi Builder and cannot work with other page builders.
4 - How do I use Popups for Divi?
To do this, go to the Extensions > Add tab, search and click Install and then Activate.
Good news, this extension does not require any settings. It works as soon as you install it.
The rest of the process of creating the pop-up will take place directly within a page or article using the Visual Builder, as explained below:
Don't wait any longer! Discover the Divi theme here !
Step 1 - Turn your Divi section into a Popup
Create a Divi section, you know how to do that!
You just need to add a new section in your layout (a blue section for example), add a line (in green) and then modules.
Once your section design is complete, open the settings window (the cogwheel) and go to the Popup tab.
This new tab appears after installing and activating the Popups for Diviextension.
To turn your Divi section into a Popup, simply enable the "This is a Popup" option and enter a CSS ID in the dedicated field. For this example, my ID is "popup-price".
That's it, your section is now a popup...
All you have to do now is to set up its behavior...
Step 2 - Set up the Popup behavior
Still from the "Popup" tab located in your section settings, other options are available to you:
From the Behavior tab, you will find 3 options:
- Close on Background-Click: The popup can be closed when the user clicks anywhere around it. If this option is disabled, the user will only be able to close the popup via the "Close" button or by pressing the ESC key on the keyboard.
- Close other Popups: If you are using multiple Popups at the same time, this option will close them all at once.
- Enable Exit Intent: This option allows you to display the popup when the user is about to leave your site. You know this type of popup! However, it only works on computers, not on mobiles or tablets.
Close Button tab:
From the "Close Button" tab, you will be able to configure the close button of your Popup:
- Show Close Button: You can show or hide the close button.
- Button color: choose whether the button should be light or dark
- Transparent Background: the closing icon (the cross) can have a colored or transparent background.
Layout tab :
The Layout tab allows you to add a "default" shadow to your popup.
If you prefer to set a custom shadow, use Divi's native feature in the settings section of the Style > Box Shadows tab instead.
In this case, deactivate this option.
Visibility tab :
The Visibility tab simply allows you to define on which type of screen you want this popup to appear.
This can be a good solution for improve the responsiveness of your Divi site and user experience.
More info on the official website.
Step 3 - Create a call to action to display the Popup
The third step is to create a button, for example, or any other type of module allowing you to insert a link.
In the image above, I added a button with a link to my Divi section that will be used as a popup.
I've assigned the ID "popup-price" on my section, so the link I add in my call to action is "#popup-price".
That's it! Your popup is displayed when the user clicks on the link!
You can even insert this link on another element like, for example, an image:
You can put this link anywhere, even on a piece of text (link anchor).
Step 4 - Check the final rendering...
Finally, save all your changes and check the final rendering on the front-end.
Important: I advise you to create sections not bigger than the screen size. Ideally, your popup should not be long because part of it will be cut off and inaccessible.
Also note that these popups are not displayed when the site is opened. These are popups that are intended to appear either after a click or when the user exits the site. If you want a popup to appear as soon as the user arrives on your site, choose an extension like Popup Builder.
Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE
5 - Access the "Popups for Divi" live demo!
Can you imagine what you can create with this extension? There is no limit.
You'll be able to use the classic Divi modules, but it can also be great for promoting products from your store by simply inserting a "store module" within your section.
Go here to see it live the demo of all popups.
Find out more about Divi compatible plugins... and who really want you well 😉