Es posible crear pop-ups de las secciones Divi¡Gratis! Gracias plugin gratuito Popups for Divi Usted transformará cualquier Sección Divi en uno pop-up que se abre siguiendo una acción del usuario de Internet (click) o su intención de salir de la página.
En este nuevo artículo, propongo (re) descubrir esta simple extensión a utilizar.
Usted puede utilizarlo para hacer aparecer un mensaje de texto pero no sólo! Cualquier Módulo Divi puede aparecer en un por la ventana…
Aquí está una vista previa de vídeo de lo que será capaz de crear:
1 – ¿Un popup? ¿Un popup? ¿Pasar?
¡Te veo venir! Algunos lectores de este artículo dirán pero dicen "un popup", otros no se sorprenderán de leer "un popup", y otros pensarán pero dice "pop-up« !!!
Para ser honesto, nunca sé qué término usar... Tengo un poco de encanto para "un popup" o "pop-up".
De todos modos, nuestro amigo Wikipedia Nos dice que podemos decir un pop-up o un pop-up.
En francés, este término podría traducirse en « ventana de salto » o incluso "ventana invasiva". Es menos divertido, ¿no?
Sólo pienso en la palabra "pop-up" ha sido franco por mucho tiempo, como la palabra estacionamiento o cóctel... Te imaginas diciendo "Encontremos rápidamente un lugar en un estacionamiento porque vamos a llegar tarde a tomar nuestro cóctel"... MDR!!!
Así que, como ya sabes, un pop-up es una pequeña ventana que aparece en la pantalla del ordenador (o incluso el teléfono inteligente) para animarte a hacer algo.
Rara vez he visto (nunca, en realidad) un pop-up que acaba de aparecer diciéndote "¿Cómo estás? »
Estamos lejos de eso... Un pop-up generalmente se establece para fines comerciales: a petición de acción alentar a los usuarios a realizar un pedido o registro.
En una escala de remo de 1 a 10, ¿qué piensas de esto:
- pop-ups que no podemos cerrar: ¿dónde está esta cruz?
- los popups que son realmente intrusivos: He estado descubriendo el sitio por un segundo y medio y me piden que dé mi correo electrónico! ¡Esto es una locura!
- popups no responsables: pero, ¿cómo lo hago? ¡Vamos, me voy!
- popups that open when "I walk away": is that really a good idea? Si me voy, quiero irme, si quiero volver, guardaré la ficha en mi aplicación dedicada...
- popups que abren en cada página: no lo suficientemente inteligente para ver que ya he hecho clic en la cruz... Como, surf 10 páginas del mismo sitio y el pop-up abre 10 veces...
De todos modos, tengo que respirar un buen tiro, va a estar bien (no dude en decir en comentario que ella es el tipo de pop-up que más odias) ...
Así que lo entenderás. tu forma de usar un pop-up es decisiva para tu tasa de conversión Si eres demasiado intrusivo, no funcionará, si estás totalmente ausente, no volverás...
Así que tenemos que encontrar el equilibrio correcto, pero este no es el propósito de este artículo... Te presentaré a este famoso plugin Popups for Divi y explicar cómo funciona. Así que, no hay teoría de marketing aquí...
2 - ¿Pasar o Modale?
Poco aparte para tratar de entender la diferencia entre un pop-up y una ventana modal…
Así que, como acabamos de ver, pop-up se utiliza en un fines comerciales, para alentar a los usuarios de Internet a tomar medidas. Nada es obligatorio y puedes cerrar esta ventana.
Mientras tanto modal window es más bien usado fines operacionales.
Por ejemplo, haga clic en un botón para crear su cuenta y aparece una ventana para recuperar su información. O, usted visita un sitio comercial que vende alcohol y un modale surge para preguntarle si usted es un mayor, debe entrar su año de nacimiento para continuar navegando por el sitio.
En general, modal window toma el control total de la pantalla visitada y no será capaz de hacer clic en otro lugar para salir. El modal pasa por encima de la aplicación utilizada, para salir, usted tendrá que introducir la información solicitada o cancelar su solicitud.
3 – ¿Qué es Popups para Divi?
Popups for Divi es un plugin gratuito disponible en el directorio oficial de extensiones de WordPress.
Gracias a este plugin, crearás popups simples pero su ventaja definitiva es que la ventana consistirá en una sección Divi creada usando el Editor Visual.
Más información sobre el Divi Builder.
Esta extensión está optimizada para el Divi Builder y no puede trabajar con otros constructores de páginas.
Plugins como Popup Maker son agradables pero no serás capaz de abordar secciones construidas con Divi. Excepto si hackeas el código un poco siguiendo este tutorial.
4 - Cómo utilizar Popups para Divi
Solo tienes un sitio de WordPress Divi tema o Divi Builder plugin e instalar la extensión Popups for Divi disponible aquí.
Para esto, ve a la pestaña Prórrogas Añadir, haga una búsqueda y haga clic Instala entonces Habilitación.
Buenas noticias, esta extensión no requiere ningún ajuste. Funciona tan pronto como se instala.
El resto del proceso de creación del pop-up se producirá directamente dentro de una página o artículo usando el Editor Visual, como se explica a continuación:
¡No te demores! Descubre el tema Divi aquí. !
Paso 1 – Convierta su sección Divi en Popup
¡Crea una sección Divi, sabes cómo!
Simplemente agregue una nueva sección dentro de su diseño (una sección azul por ejemplo), agregue una línea (verde) y luego agregue módulos.
Puede utilizar cualquier módulo, dependiendo de sus necesidades. Puede ser un simple Módulo de texto1 módulo de imagen1 Módulo de formulario de contacto1 Cuadro arancelariopara colocar el siguiente código:
Una vez que su diseño de sección esté completo, abra el Ventana de configuración (la rueda dental) y entrar Lista de reproducción.
Esta nueva pestaña aparece después de la instalación y activación de la extensión Popups for Divi.
Así que tu La sección Divi se convierte en Popup, sólo activar la opción "Esto es un Popup" y aprovechar un CSS ID en el campo dedicado. Para este ejemplo, mi identificación es "Popup-price".
Aquí, tu sección es un popup, ahora...
Todo lo que tienes que hacer es establecer tu comportamiento...
Paso 2 - Establecer el comportamiento del Popup
Aún desde la pestaña Popup en la configuración de la sección, otras opciones están disponibles para usted:
Tapa de comportamiento:
Desde la pestaña Behavior encontrarás 3 opciones:
- Cerrar sobre Antecedentes-Click: el popup se puede cerrar cuando el usuario hace clic en cualquier lugar alrededor. Si esta opción está deshabilitada, el usuario sólo puede cerrarla a través del botón "Cerrar" o pulsando la tecla ESC en su teclado.
- Cerrar otras Popups: Si utiliza múltiples Popups al mismo tiempo, esta opción le permite cerrar todos en 1 vez.
- Intención de salida: Esta opción permite que el popup aparezca cuando el usuario está a punto de salir de su sitio. ¡Conoces este tipo de popup! Por otro lado, sólo funciona en computadoras, no en móviles o tabletas.
Tab Close Button:
Desde la pestaña Cerrar botón, puede configurar el botón de cierre de su Popup:
- Show Close Button: puede mostrar o ocultar el botón de cierre.
- Color de botón: elegir si el botón de cierre debe ser claro o oscuro
- Fondo transparente: el icono de cierre (la cruz) puede tener un color o fondo transparente.
- ¿Qué?
La pestaña Diseño le permite añadir una sombra "default" a su popup.
Si prefiere establecer una sombra personalizar, utilice la función Divi nativa en la configuración de la sección a la pestaña Estilo Caja de sombras (Box-shadows).
En este caso, desactiva esta opción.
Visibilidad:
La pestaña Visibilidad simplemente le permite definir en qué tipo de pantalla desea hacer que este popup aparezca.
Esta puede ser una buena solución mejorar la capacidad de respuesta de su sitio Divi y experiencia de usuario.
Más sobre el sitio web oficial.
Paso 3 – Crear una llamada de acción para mostrar el Popup
El tercer paso es crear un botón, por ejemplo, o cualquier otro tipo de módulo permitiendo insertar un enlace.
En la imagen anterior, añadí un botón con un enlace a mi sección Divi que se utilizará como popup.
He asignado I-ID "Popup-price" en mi sección, así que el enlace que agrego en mi llamada a la acción es #popup-price.
¡Eso es! Su popup aparecerá cuando el usuario haga clic en el enlace!
Incluso puede insertar este enlace en otro elemento como, por ejemplo, una imagen:
Puede poner este enlace en cualquier lugar, incluso en un pedazo de texto (ancla de enlace).
Paso 4 – Revisar la entrega final...
Por último, guarde todos sus cambios y compruebe la entrega final, lado frontal.
Importante: Le aconsejo que crear secciones no más grandes que el tamaño de la pantalla. Idealmente, su popup no debe ser largo porque parte de ella será cortada e inaccesible.
Note also that estos popups no aparecen cuando el sitio se abre. Estos son popups que apuntan a aparecer ya sea después de un clic o en la salida del sitio. Si usted está buscando hacer que un popup aparezca tan pronto como el usuario llegue en su sitio, elija una extensión como Popup Builder.
¿Sabes que puedes probar Divi gratis? Nos vemos en esta página y haga clic en "Pruébalo GRATIS"
5 - ¡Ve a la demo de Popups para Divi en vivo!
¿Puedes imaginar todo lo que puedas crear con esta extensión? No hay límite.
Puede utilizar los módulos Divi clásicos sin olvidar que esto puede ser ideal para promover productos de su tienda simplemente insertando un "modulo de taller" en su sección.
Nos vemos aquí para ver en vivo demo de todos los popups.
Descubre más plugins compatibles con Divi...y quién realmente quiere que seas bueno
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 ?