Popups for Divi: a smart free plugin!

Updated on 08/05/2020 | Published on 25/11/2019 | 50 comments

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:

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.

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 embed Divi built sections in them. Unless you tweak the code a bit by following this tutorial.

4 - How do I use Popups for Divi?

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

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

You will be able to use any module, depending on your needs. It can be a simple text modulea image modulea contact form modulea rate tableetc.

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

Convertir une section Divi en popup
Convert a Divi section to a popup

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:

Behavior tab:

Popup Behavior
Behavior tab

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:

Popup Close
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 :

Popup Layout

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 :

Popup Visibility

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.

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'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:

CTA image
Create a call to action on 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 😉

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

1,719 words

7

You should like it too:

Product Carousel pour Divi et WooCommerce

Product Carousel for Divi and WooCommerce

If you're looking for a way to scroll through your WooCommerce store's products in a stylish carousel, the "Product Carousel" extension can help. It's quick and easy to use, and the results live up to expectations.

50 Commentaires

  1. Speckens

    Bonjour,
    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
    Julien

  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

    Bonjour,
    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?
    Merci

  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é.
    Cordialement
    Philippe

  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 😉

  14. Mamour Ly

    Bonjour,
    Le PopUp s’affiche mais l’image à l’intérieur, elle ne s’affiche pas. Vous savez pourquoi ?

  15. Lycia Diaz

    Non, je vois pas… C’est bizarre.

  16. Alexandre

    Bonjour, désolé mais ça ne fonctionne pas du tout .

    Il faut simplement remplir le champ CSS class (par exemple: newsletter) et ensuite dans bloom, il ne faut pas mettre a# mais juste un point (par exemple: .newsletter)

  17. Patrick V.

    Bonjour à tous,

    Après quelques recherches (https://wordpress.org/support/topic/automatic-trigger/):

    – ouverture automatique après 5 secondes:

    window.setTimeout(function(){
    DiviPopup.openPopup(‘#get-newsletter’)
    }, 5000);

    Salutations à tous

  18. Lycia Diaz

    Super !

  19. Mihary

    Bonjour Lycia,

    Un très grand merci pour ces explications.
    De mon côté tout a fonctionné 🙂

    Avant, j’utilisais Popup Maker, mais Popups for Divi est bien meilleur et bien plus simple à utiliser.

    PS : Attention, pour que ça fonctionne, il faut que la popup ainsi que le bouton (ou image ou texte) pour appeler la popup doivent être sur la même page. Autrement, la popup ne s’ouvrira pas.

  20. Lycia Diaz

    Merci à toi !

  21. Pierrick Camel

    Bonjour à tous,

    Est-il possible dans une pop-up d’ajouter un bouton qui ferme la pop-up?

    En gros j’aimerais bien faire un choix avec 2 boutons dans ma pop-up :

    Option 1: recevoir un cadeau
    Option 2: fermer la pop-up (sans utiliser la petite croix en haut à droite)

    Bien cordialement,
    Pierrick.

  22. Lycia Diaz

    Salut Pierrick, à ma connaissance je ne crois pas mais tu peux poser la question au développeur du plugin

  23. Marius

    Bonjour,

    La fonction pop-up ne s’affiche pas lorsque j’installe le plugin.

  24. Lycia Diaz

    Salut Marius, tu as peut-être un conflit de plugin ?

  25. Deschamps

    Merci, mais il semble que le pop-up soit un handicap pour le référencement.
    Il est conseillé de préférer l’utilisation de pop-in, pourquoi pas un post sur la bonne méthode pour les mettre en oeuvre ?

  26. Lycia Diaz

    Merci Pierre.
    Oui c’est une idée à creuser 😉

  27. Marine

    Bonjour et merci pour l’article !
    Je voudrais pouvoir ouvrir un pop-up depuis un bouton qui se trouve sur une autre page, est-ce possible ?
    Tous mes pop-up fonctionnent sauf lorsque j’essaye de les déclencher depuis une page différente (en l’occurrence, un bouton « Réserver » qui se trouve en header et footer donc sur toutes les pages de mon site et qui renvoie vers une section pop-up de ma page d’accueil) : le lien me redirige bien vers la bonne page mais ne déclenche pas le pop-up…
    Je n’ai pas trouvé de solution sur tous les forums et vidéos en anglais que j’ai regardé, j’espère avoir frappé à la bonne porte !

    Un grand merci d’avance pour votre aide !

  28. lassalle

    Bonjour

    Il y a un truc que je ne capte pas avec ce plugin …

    Ok pour le fonctionnement mais au départ … comment faire ???

    Est-ce que je crée une nouvelle page pour «dessiner» mon pop-up comme je le veux puis ensuite je l’indique comme «pop-up» ???
    ou alors j’utilise une partie de mon site déjà créée et je la mentionne comme «pop-up» (mais dans ce cas elle ne sera pas forcément comme je veux et puis elle ne va pas «apparaître» puisqu’elle est déjà affichée quelque part)

    Bref je ne comprend pas très bien comment ça marche «tout au début»

    Merci pour les renseignements

  29. Lycia Diaz

    Salut Lassale,
    Il te suffit de créer ta popup avec des modules de Divi au sein de ta page. Si tu veux que ta popup apparaisse sur tout le site, tu devrais alors créer cette popup depuis le theme builder, au sein du header ou du footer global. Est-ce plus clair ?

  30. Alain Chaxel

    Bonjour,
    J’ai un soucis en intégrant un formulaire Gravity Form dans la popup. ça fonctionne mais quand je valide le formulaire la popup se ferme, et je n’ai pas les éventuels messages d’erreur ni le message de bonne prise en compte. Auriez-vous une solution ? Merci d’avance !

  31. Lycia Diaz

    Salut Alain,
    Non, je n’ai pas de réponse. As-tu fait une demande sur le support du plugin ?

  32. Christophe

    Bonjour Lycia,
    À la base je recherchais un système simple de pop-up pour afficher un avertissement à l’arrivée sur le site (info liée à la Covid).
    J’ai regardé Popup Builder, très (trop) complet, puis Popups for Divi. Léger, super, mais… il lui manque quand même des options pour déclencher son apparition.
    Tu pourrais aussi rajouter Bloom ? : inclus dans la licence Divi, plus d’options de déclenchement et pas obligé de demander un mail avec l’option Custom HTML dans les services d’abonnement.

  33. shiva108

    Bonjour Lycia,
    J’ai un petit souci: je n’arrive pas à afficher ma popup avec des modules sur plusieurs colonnes.

    Normal ? est-ce une des limitation de ce plugin ou est-ce que je m’y premds mal ?

  34. Lycia Diaz

    Salut Shiva bizarre. Mon calendrier de l’avent Divi utilise ce plugin et il y a bien un colonage. Donc, tu n’as pas dû l’utiliser correctement je suppose. (Mon calendrier est disponible en ce moment, le lien est dans la sidebar)

  35. Philippe

    Bonjour,
    merci pour ce tuto. Es-t’il possible d’ouvrir un pdf avec par exemple PDF Embedder Premium.
    Merci et à bientôt
    Philippe

  36. Lycia Diaz

    Salut Philippe, tu parles de ce plugin : https://wp-pdf.com/premium/ ??? Du moment que c’est un plugin WordPress, je ne vois pas pourquoi ce ne serait pas possible ?

  37. Sylvain

    Bonjour, Merci beaucoup pour ces explications ultra claires !

    Cependant, je rencontre un souci d’affichage avec mes popups.
    Ils s’affichent uniquement en arrière-plan (on peut les voir un bout en défilant jusqu’en bas)… Vous pouvez le voir en cliquant sur mon site que j’ai mis ici.

    J’ai beau chercher l’origine du problème mais je ne le trouve pas… :'(
    D’ailleurs, je tiens à préciser que le problème persiste uniquement sur safari (sur chrome et Mozilla, ça marche sans problème).

    Merci !

  38. Lycia Diaz

    Salut Sylvain, il y a peut-être du Z-index de parametré quelque part. Regarde dans tes options avancées des modules qui cachent ta popup

  39. Sylvain

    C’est bon, c’était un problème interne. Après une mise à jour de l’extension, le problème a été résolu.
    Merci en tout de ta réponse.

  40. Lycia Diaz

    Ah tant mieux !

  41. Elsa

    Bonjour,
    J’ai intégré une pop-up avec un bouton & une ancre, mais lorsque l’on clique sur le bouton l’ancre fonctionne mais la pop up ne se ferme pas, quelqu’un aurait une idée de comment faire ?
    Merci d’avance

  42. Lycia Diaz

    Salut Elsa, il faudrait regarder la documentation du plugin car je ne vois pas d’où ça peut venir.

  43. jean-françois

    Bonjour,

    j’ai utilisé le plugin pour mon site, c’est top ! ton tuto est nickel.
    J’ai juste une question : quand est-il du SEO sur un pop-up ?, notamment avec ce plugin ?

  44. Lycia Diaz

    Salut Jean François. Super ! Pour le SEO j’en sais rien. Si tu inspecte le code dans ton navigateur et que tu vois le popup alors Google peut le voir aussi.

  45. Monnay

    Merci de préciser avec qu’elle version de wordpress et divi ce plus in fonctionne ?
    avec les dernière version les options popup non visible dasn les objets divi

  46. Lycia Diaz

    Je pense que Popups for Divi est toujours compatible. Je ne l’ai plus testé depuis quelques mois cependant…

  47. Romain C

    Bonjour Lycia,
    Tout d’abord, bravo pour vos Tutos, en français qui plus est (ça repose;)!
    Mes popups fonctionnent parfaitement lorsque que le déclencheur se trouve sur la même page que la popup. MAIS :
    1. existe t-il une solution pour afficher mes popups (formulaire de connexion + form inscription) depuis des boutons sur différentes pages ET des éléments de menu ?!
    2. Lorsque je clique sur un lien d’une popup pour en ouvrir une autre, que se passe t-il ? Est-ce que la popup #2 appelée depuis la popup #1 « écrase » la première (je ne suis pas sûr d’être clair…)
    Merci beaucoup!

  48. Lycia Diaz

    Salut Romain, je ne suis pas sûre d’avoir tout compris mais si tu veux que ta popup s’ouvre sur toutes les pages, je pense que tu devrais la construire directement dans ton footer à l’aide du Thème Builder, sinon elle fonctionne que sur une seule page. Il faut tester/bidouiller un truc du genre 😉

  49. Romain C

    Merci Lycia pour ton astuce « popup footer ». Ca fonctionne au poil !

  50. Lycia Diaz

    Super Romain !

Soumettre un commentaire

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

Je souhaite recevoir les news du blog Astuces Divi !

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

Shares
Share This