Popups for Divi: a very clever free plugin!

Published on 25/11/2019 | 13 comments

It is possible to create pop-ups from Divi sections, and this, for free! Thanks to the free plugin "Popups for Divi" you will transform any Divi section into a pop-up that opens following an action by the user (click) or his intention to leave the page.

In this new article, I propose you to (re)discover this simple to use extension.

You can use it to display a text message but not only! Any of the following Divi module will appear in a pop-up window....

Here is a video preview of what you will be able to create:

Advertisement: 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 is spelled "pop-up"!!!

To be honest, I never know what term to use... I have a little penchant for "a popup" or "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 "pop-up window" or even "intruder window". It's less fun, isn't it?

I think the word "pop-up" has been Frenchized for a long time, just like the word parking or cocktail... You can imagine yourself saying "let's quickly find a place on a parking lot because we're going to be late to sip our cocktails"... MDR !!!

So, as you already know, a pop-up is a small window that appears on your computer screen (or even smartphone) to encourage you to do something.

I've rarely (ever, actually) seen a pop-up that just pops up and says, "hey, how are you?"

We are far from that... A pop-up is usually set up for a commercial purpose: a call to action to encourage Internet users to place an order or register.

On a scale of 1 to 10, what do you think of this?

  • the pop-ups we can't close: where is that cross?
  • popups that are really intrusive: I discovered the site a second and a half ago and I was asked to give my email! This is crazy!
  • non-responsive popups: but, but, but how do I do it? Come on, hop, I'm leaving!
  • the popups that open when "I'm out": is that a really good idea? If I leave, it's because 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 surf on 10 pages of the same site and the pop-up opens 10 times...

In short, I need to take a deep breath, I'll be fine (don't hesitate to say in commentary that she's the type of pop-up you hate the most)...

So, as you will have understood, the way you use a pop-up is decisive for your conversion rate: if you are too intrusive, it will not work, if you are totally absent, you will have no feedback...

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 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 Internet user to take action. Nothing is mandatory and you can close this window.

While a modal window is used for operating purposes.

For example, you click on a button to create your account and a window appears to retrieve your information. Or, you visit a merchant site that sells alcohol and a modal appears to ask you if you are of legal 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 anywhere else to exit it. The modal passes over the application used, to exit it, you will either have to 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 directory of WordPress extensions.

Thanks to this plugin, you will create simple popups but its definite advantage is that the window will be composed of a Divi section created using the Visual Builder.

Learn more about the Divi Builder.

This extension is therefore optimized for the Divi Builder and cannot work with other page builders.

Plugins like Popup Maker are nice but you won't be able to take on sections built with Divi. Unless you tweak the code a little bit by following this tutorial.

4 - How to use Popups for Divi?

All you need is a WordPress site using the Divi theme or the Divi Builder plugin and install the Popups for Divi extension available here.

plugin Popups for Divi

To do this, go to the Extensions tab > Add, do a search and click Install and then click Activate.

Good news, this extension does not require any configuration. It works as soon as it is installed.

The rest of the creation process will take place directly within a page or article using the Visual Builder, as explained below in video or below in step by step version:

Don't delay any longer! Discover the Divi theme here !

Step 1 - Create a Divi section

You know how to do that!

All you have to do is add a new section within your layout (a blue section), add a line (in green) and then modules.

You can use any module, according to your needs. This can be a simple text module, an image module, a contact form module, a price table etc.

The only thing you will have to do is give a CSS ID and a CSS Class to this section, as you can see in the screenshot below:

Ajouter la class Popup ainsi qu'un ID de votre choix.
Add the "popup" class and an ID of your choice in the settings of your Divi section.

Edit the Divi section you want to transform into a popup:

  1. Go to the section settings (gear icon)
  2. Go to the Advanced tab > CSS IDs and Classes
  3. Enter an ID of your choice. For my example, it's "popup-price" but I could have named it "hello", it wouldn't have changed anything.
  4. Add a "popup" class. This term should not be changed, it is thanks to this class that the section is transformed into a pop-up.

Be aware that there are other classes that the plugin allows to add and that will have an impact on the functioning or appearance of the pop-up:

  • "pop-up"
  • "pop-up" +"no-close"
  • "pop-up" +"dark"
  • "pop-up" + "is modal"
  • "pop-up" +"on-exit"
  • "pop-up" +"close"

More information on the official website.

As soon as the "popup" class is assigned to a Divi section, it disappears (front-end side).

It is no longer visible to Internet users for the moment.

To make it appear, you will need to add a call to action, such as a button or link for example.

Step 2 - Create a call to action

The second step is to create a button, for example, or any other type of call to action to insert a link.

CTA bouton
Create a call to action via a button

In the image above, I added a button with a link to my Divi section that will be used as a popup.

I have assigned the "popup-price" ID to my section, so the link I add to my call to action is "#popup-price".

That's all! That's all! Your popup works!

You can even insert this link on another element such as an image:

CTA image
Create a call to action on an image.

Step 3 - Check the final rendering...

Finally, save all your changes and check the final rendering on the front-end side.

Be careful, I advise you to create sections no larger than the size of the screen. Ideally, your popup should not be long because part of it will be cut off and inaccessible.

Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE"

5 - Access the demo of "Popups for Divi" live!

Can you imagine how much you can create with this extension? There is no longer any limit.

You can use the classic Divi modules without forgetting that it can be ideal to promote your shop's products by simply inserting a "shop module" within your section.

Come here to see live the demo of all popups.

Discover others Divi compatible plugins... and who really want you to feel good 😉

Pop-up Divi
Plugin "popups for Divi"
Divi Section Pop-up

You should like it too:

Divi Switch : un plugin multifonction qui vous veut du bien !

Divi Switch: a multifunctional plugin that wants you to feel good!

You are looking for ways to remove the grey line under the menu, make your phone number clickable in the top menu, change the hamburger icon or even the color of the "back up" button... Don't waste any more time coding and install Divi Switch ! A multifunctional plugin in-dis-pen-sa-ble!

13 Commentaires

  1. Speckens

    Ok, ça marche avec un call to action pour afficher la popup. Comment fait-on pour que la popup s’affiche automatiquement à l’ouverture de la page ? Merci

  2. Lycia Diaz

    Salut Julien,
    Tu ne peux pas afficher la popup à l’ouverture avec ce plugin. Si tu veux ça, tu dois utiliser Popup Builder https://wordpress.org/plugins/popup-builder/
    Mais tu ne pourras pas y insérer une section Divi à l’intérieur.

  3. Sandra

    J’ai essayé, et essayé mais je n’ai pas réussi à faire fonctionner.
    La section a bien été créée, monCSS-ID s’affiche en haut de la section. Quand je clique sur l’image où je veux le popup, Il s’affiche en bas à gauche monurl.com/#monCSS-ID mais il ne va nul part, rien s’affiche, il ne se connecte pas. 🙁
    J’ai essayé sur la même page, nouvelle page etc etc – rien. J’ai vidé le cache, essayé un autre « browser », ET oui, tout est à jour.
    Pour l’instant c’est un site de test sans beaucoup de plugins.

    C’est dommage. Ce sera très sympa.
    Avez-vous des suggestions?

  4. Muriel

    comment faire pour rendre obligatoire l’entrée d’un N° de téléphone pour pouvoir télécharger le lien du popup ?

  5. Lycia Diaz

    Salut Muriel. Je ne pense pas que ce plugin te permette de faire ce dont tu as besoin. Peut-être que Bloom te permet de le faire ou un autre plugin d’optin…

  6. Lycia Diaz

    Salut Sandra. C’est bizarre, il y a une étape que tu dois rater car pour moi, tout fonctionne. J’utilise même ce plugin en production pour mon Calendrier de l’Avent Spécial Divi : https://astucesdivi.com/calendrier-avent-freebies/

  7. Floriane Besse

    bonjour, j’ai besoin d’aide… la section texte, soit le popup, reste visible tout le temps et non seulement quand je clique sur le bouton.

    J’ai donc un bouton « Clic » avec comme lien « #popup-ini »
    Et une section texte avec ID CSS « popup-ini » et Class CSS « popup ».

    Merci pour votre aide

  8. Lycia Diaz

    Bonsoir Floriane.
    Je ne peux pas vous dire d’où ça vient, il faudrait que je regarde de plus près mais si vous avez suivi à la lettre le tuto, ça devrait marcher 😉

  9. Floriane Besse

    Ben j’ai noté exactement ce que j’ai mis dans mon premier message. Je ne comprends pas pourquoi ça ne va pas.

  10. Philippe

    Bonjour Lycia,
    Soit j’ai pas tout compris soit c’est pas possible ???
    J’ai un module texte et j’aimerai que lorsque l’on clique sur le texte un popup s’ouvre avec le formulaire contact de Divi.
    Merci pour vos tuto qui mon déjà bien aidé.

  11. Lycia Diaz

    Merci Philippe 😉
    Autre solution : j’ai mal expliqué ?
    Pourtant ce plugin te permet bien de faire ce dont tu as besoin. Il est justement fait pour embarquer des modules de Divi dans des popups. Il faut juste bien mettre les ID et Classes CSS aux bons endroits.

  12. janjaq

    Effectivement ça ne marche pas, le le module qu’on assigne comme modal ne disparait pas. Rien ne fonctionne. Need help please. Si vous le voulez bien contacter mon adresse mail que je renseigne et je vous ferais un partage d’écran. Merci.

  13. Lycia Diaz

    Bonjour Janjaq,
    Ce plugin fonctionne parfaitement, je l’utilise et je n’ai pas de souci. Donc, soit vous avez un conflit, soit vous ne placez pas la bonne classe ou ID CSS au bon endroit. Il faut juste suivre à la lettre ce qui est inscrit dans le tuto. Sinon, vous pouvez également vous rapprocher de la documentation officielle du plugin (https://fr.wordpress.org/plugins/popups-for-divi/), voire ouvrir un ticket si le bug persiste 😉

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Share This