It is possible to create pop-ups from Divi sectionsFree of charge! Thanks to free plugin Popups for Divi You will transform any Section Divi in one pop-up which opens following an action of the Internet user (click) or his intention to leave the page.
In this new article, I propose to (re)discover this simple extension to use.
You can use it to make a text message appear but not only! Any Divi module may appear in a pop up windowâŠ
Here is a video preview of what you will be able to create:
1 â A popup? A popup? Pop-up?
I see you coming! Some of the readers of this article will say but they say "a popup", others will not be surprised to read "a popup", and others will think but it says " 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 into « popping window » or even "invasive window". It's less fun, isn't it?
I just think the word "pop-up" has been francized for a long time, just like the word parking lot or cocktail... You imagine yourself saying "Let's quickly find a place on a parking lot because we're going to be late to sip our cocktail"... MDR!!!
So, as you already know, a pop-up is a small window that appears on your computer screen (or even smartphone) in order to encourage you to do something.
I have rarely seen (never, actually) a pop-up that just pops up telling you "Hey, how you doing? »
We're a long way from that... A pop-up is usually set up for commercial purposes: a call for action to encourage users to place an order or registration.
On a rowing scale from 1 to 10, what do you think of this:
- pop-ups that we can't close: where is this cross?
- the popups that are really intrusive: I've been discovering the site for a second and a half and I'm asked to give my email! This is crazy!
- non-responsible popups: but, but how do I do it? Come on, I'm going!
- popups that open when "I walk away": is that really a good idea? If I'm leaving, I want to leave, if I want to come back, I'll save the tab in my dedicated app...
- popups that open on each page: not smart enough to see that I've already clicked on the cross... Like, I surf 10 pages from the same site and the pop-up opens 10 times...
Anyway, I have to breathe a good shot, it's gonna be okay (don't hesitate to say in comment that she's the type of pop-up you hate the most)...
So you'll understand, your way of using a pop-up is decisive for your conversion rate If you're too intrusive, it won't work, if you're totally absent, you won't get back...
So we have to find the right balance, but this is 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 Modale?
Little apart to try to understand the difference between a pop-up and a modal windowâŠ
So, as we just saw, pop-up is used in a commercial purpose, to encourage Internet users to take action. Nothing is mandatory and you can close this window.
While modal window is rather used to operating 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 commercial site that sells alcohol and a modale arises to ask you if you are a major, you must enter your year of birth to continue browsing the site.
In general, modal window takes total control of the screen visited and you will not be able to click elsewhere to get out. The modal passes over the application used, to get out, you will either need 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 consist 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 will not be able to board sections built with Divi. Except if you hack the code a little following this tutorial.
4 - How to use Popups for Divi
Just have a WordPress site using Divi theme or Divi Builder plugin and install the extension Popups for Divi available here.
For this, go to the tab Extensions > Add, do a search and click Install then on Enable.
Good news, this extension does not require any setting. It works as soon as it is installed.
The rest of the process of creating the pop-up will occur directly within a page or article using the Visual Builder, as explained below:
Don't delay! Discover the theme Divi here !
Step 1 â Turn your Divi section into Popup
Create a Divi section, you know how!
Just add a new section within your layout (a blue section for example), add a line (green) and then add modules.
You can use any module, depending on your needs. It can be a simple Text module1 image module1 Contact form module1 tariff tablekeyheadâkeyhead in the menu
Once your section design is complete, open the Settings window (the tooth wheel) and go in Popup tab.
This new tab appears after installation and activation of extension Popups for Divi.
So that your Divi section turns into Popup, just activate the option "This is a Popup" and seize a CSS ID in the dedicated field. For this exmple, my ID is "popup-price".
Here, your section is a popup, now...
All you have to do is set your behavior...
Step 2 â Set the Popup's behavior
Still from the Popup tab in your section settings, other options are available to you:
Behavior tab:
From Behavior tab you will find 3 options:
- Close on Background-Click: the popup can be closed when the user clicks anywhere around. If this option is disabled, the user can only close it via the "Close" button or by pressing the ESC key on his keyboard.
- Close other Popups: If you use multiple Popups at the same time, this option allows you to close them all in 1 time.
- Enable Exit Intent: This option allows the popup to appear when the user is about to leave your site. You know this type of popup! On the other hand, it only works on computers, not on mobiles or tablets.
Tab Close Button:
From the Close Button tab, you can configure the closure button of your Popup:
- Show Close Button: you can display or hide the closing button.
- Button color: choose whether the closing button should be clear or dark
- Transparent Background: the closing icon (the cross) can have a color or transparent background.
Layout tab:
Layout tab allows you to add a "default" shadow to your popup.
If you prefer to set a shadow customize, use the native Divi feature in the section settings to the tab Style > Shadow box (box-shadows).
In this case, disable this option.
Tab Visibility:
The Visibility tab simply lets you define on which type of screen you want to make this popup appear.
This can be a good solution for improve the responsiveness of your Divi site and user experience.
More about the official website.
Step 3 â Create an action call to display the Popup
The third step is to create a button, for example, or any other type of module allowing to insert a link.
In the above image, I added a button with a link to my Divi section that will be used as a popup.
I assigned I-ID "popup-price" on my section, so the link I add in my call to action is #popup-price.
That's it! Your popup will pop up 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, front-end side.
Important: I advise you to create sections not larger than screen size. Ideally, your popup should not be long because part of it will be cut and inaccessible.
Note also that these popups do not appear when the site opens. These are popups that aim to appear either after a click or at the exit of the site. If you are looking to make a popup appear as soon as the user arrives on your site, choose an extension like Popup Builder.
Do you know you can test Divi for free? See you on this page and click on "TRY IT FOR FREE"
5 - Go to the demo of Popups for Divi live!
Can you imagine everything you can create with this extension? There's no limit.
You can use the classic Divi modules without forgetting that this can be ideal to promote products from your shop by simply inserting a "shop module" into your section.
See you here to see live demo of all popups.
Discover more plugins compatible with Divi...and who really want you to be good
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
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.
đ
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
comment faire pour rendre obligatoire l’entrĂ©e d’un N° de tĂ©lĂ©phone pour pouvoir tĂ©lĂ©charger le lien du popup ?
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…
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/
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
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 đ
Ben j’ai notĂ© exactement ce que j’ai mis dans mon premier message. Je ne comprends pas pourquoi ça ne va pas.
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
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.
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.
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 đ
Bonjour,
Le PopUp s’affiche mais l’image Ă l’intĂ©rieur, elle ne s’affiche pas. Vous savez pourquoi ?
Non, je vois pas… C’est bizarre.
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)
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
Super !
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.
Merci Ă toi !
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.
Salut Pierrick, à ma connaissance je ne crois pas mais tu peux poser la question au développeur du plugin
Bonjour,
La fonction pop-up ne s’affiche pas lorsque j’installe le plugin.
Salut Marius, tu as peut-ĂȘtre un conflit de plugin ?
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 ?
Merci Pierre.
Oui c’est une idĂ©e Ă creuser đ
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 !
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
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 ?
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 !
Salut Alain,
Non, je n’ai pas de rĂ©ponse. As-tu fait une demande sur le support du plugin ?
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.
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 ?
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)
Bonjour,
merci pour ce tuto. Es-tâil possible d’ouvrir un pdf avec par exemple PDF Embedder Premium.
Merci et Ă bientĂŽt
Philippe
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 ?
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 !
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
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.
Ah tant mieux !
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
Salut Elsa, il faudrait regarder la documentation du plugin car je ne vois pas d’oĂč ça peut venir.
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 ?
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.
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
Je pense que Popups for Divi est toujours compatible. Je ne l’ai plus testĂ© depuis quelques mois cependant…
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!
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 đ
Merci Lycia pour ton astuce « popup footer ». Ca fonctionne au poil !
Super Romain !
Merci beaucoup Alicia, super article comme d’habitude đ
J’ai juste une question. Je ne suis pas parvenur Ă faire la pop up avec une section spĂ©ciale. En fait je cherche Ă faire que la pop up ne soit pas un grand rectangle mais plutĂŽt un petit carrĂ© (ou petit rectangle) et lĂ (en version gratuite du moins) je cale. As-tu une idĂ©e ?
MErci !!
Bonjour et merci pour ce tuto đ
Une question cependant : est-il possible d’afficher une popup qui contient un article prĂ©cis ?
Ce que j’aimerais faire est la chose suivante : Afficher une liste d’articles puis, lorsque l’on clique sur un article, il s’ouvre dans une popup *sans recharger la page* …
Je ne sais pas si c’est possible et j’ai eu beau parcourir Google (pas encore complĂštement, je n’ai pas encore utilisĂ© tout les mots clĂ©s de recherche đ ) et je n’ai rien trouvĂ© …
Merci de ton retour,
Bien cordialement,
Guillaume
Je pense que câest possible avec ce plugin, tu crĂ©es une section avec cette liste dâarticles puis tu la paramĂštres en tant que Popup
Bonjour, peut on changer la couleur du close bouton ?
Bonjour,
Je rencontre un souci. J’ai un formulaire de contact crĂ©Ă© avec Contact Form 7 => le shortcode est inclus dans une section qui s’active en popup avec Popups for Divi.
Sur desktop : la popup se ferme aprÚs le clic sur le bouton « envoyer » et ce quel que soit le scénario :
1. Certains champs obligatoires sont manquants : la popup se ferme au lieu de rester active et d’indiquer les champs obligatoires (l’url de la page se modifie avec un /wpcf7-xxxx-xxxx)
2. Tous les champs sont ok : la popup se ferme automatiquement au lieu d’afficher « votre message a bien Ă©tĂ© envoyé »
Une idĂ©e du problĂšme ? Sachat que sur mobile, le souci n’est pas prĂ©sent.
Merci
Merci Lycia pour cette dĂ©couverte de plugin ! Elle m’a facilitĂ©, mĂȘme si au dĂ©but je me suis emmĂȘlĂ©e les pinceaux entre la section et la ligne ..
Et merci Ă Patrick V pour ce bout de code, j’ai pu le personnalisĂ© et le pop-up se lance directement !
Super !
Bonjour Lycia,
Merci pour votre blog !
J’utilise le Popups pour une section « à propos » il y a une barre de dĂ©filement vers le bas qui j’affiche sur le cĂŽtĂ© droit. Comment retirer cette barre, car vraiment moche et gĂąche tout
Merci de ta réponse
Bonjour Lycia,
J’ai ajoutĂ© un bouton d’appel Ă l’action sur ma fenĂȘtre popup et j’aimerai que le clic sur ce bouton ferme le popup (en plus de rediriger Ă un endroit de ma page web). La redirection fonctionne mais la fenĂȘtre popup reste ouverte, ce qui est trĂšs dĂ©rangeant pour bien rediriger l’internaute. As-tu une piste ou une astuce Ă ce sujet ?
Merci de ton aide.
Salut AurĂ©lie. Bonne question, j’en ai aucune idĂ©e. DĂ©solĂ©e.
Je suppose qu’elle s’affiche car ta section et son contenu sont plus grands que la taille de la popup
Bonjour Lycia.
DĂ©solĂ© de dĂ©terrer, mais je n’arrive pas Ă trouver un plugin qui ouvre une popup avec le raccourci d’une page au survol d’un mot avec un lien !
Comme dans wikipedia
Est-ce que tu connais-tu ça ?
Salut Sam, alors lĂ , aucune idĂ©e… DĂ©solĂ©e.
Bonjour Lycia, y a-t-il un moyen de fermer la popup avec un code javascript ? Je vois que le bouton fermer a le lien href #close mais si je l’utilise par ailleurs ça ne fonctionne pas. L’idĂ©e est de pouvoir fermer seulement si on clique sur une image prĂ©cise ou une phrase de notre choix…
Salut, je me dis que tout est possible quand on sait coder ? Avez-vous demandé aux créateurs du plugin ?