Popups para Divi: ¡un plugin inteligente y gratuito!

Actualizado el 08/05/2020 | Publicado el 25/11/2019 | 46 comentarios

Es posible crear pop-ups desde las secciones de Divi de forma gratuita! Gracias a la plugin gratuito "Popups" para Divi convertirá cualquier sección de Divi en una ventana emergente que se abrirá cuando el usuario haga clic o intente salir de la página.

En este nuevo artículo, te propongo (re)descubrir esta extensión fácil de usar.

Puedes utilizarlo para mostrar un mensaje de texto, ¡pero no sólo! Cualquier Módulo Divi puede aparecer en una ventana emergente...

Aquí tienes un vídeo de avance de lo que puedes crear:

Anuncio: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.

1 - ¿Una ventana emergente? ¿Una ventana emergente? ¿Reventón?

¡Te veo venir! Algunos de los lectores de este artículo dirán pero decimos"un popup", otros no se sorprenderán al leer "un popup", y otros pensarán pero ¡¡¡se escribe " pop-up "!!!

Para ser honesto, nunca sé qué término utilizar... Tengo debilidad por "una ventana emergente" o "un pop-up".

De todos modos, nuestro amigo Wikipedia nos dice que podemos decir una ventana emergente o una ventana emergente.

En francés, este término podría traducirse como "ventana emergente" o incluso "ventana intrusa". Es menos divertido, ¿no?

Creo que la palabra "pop-up " hace tiempo que se afrancesó, al igual que la palabra parking o cóctel... Te imaginas diciendo "vamos a buscar un sitio en un parking porque vamos a llegar tarde a tomar nuestros cócteles"... ¡¡¡LOL!!!

Así que, como ya sabes, una ventana emergente es una pequeña ventana que aparece en la pantalla de tu ordenador (o incluso de tu smartphone) con el propósito de que hagas algo.

Rara vez (nunca, de hecho) he visto una ventana emergente que simplemente aparezca diciéndote "hola, ¿cómo va todo?".

Estamos lejos de eso... Una ventana emergente se crea generalmente con fines comerciales: una llamada a la acción para animar a los internautas a realizar un pedido o un registro.

En una escala de molestia del 1 al 10, ¿qué opina de esto?

  • ventanas emergentes que no se pueden cerrar : ¿dónde está la cruz?
  • las ventanas emergentes que son realmente intrusivas: ¡descubro el sitio desde un segundo y medio y me piden que dé mi correo electrónico! ¡Es una locura!
  • Ventanas emergentes que no responden : ¿pero, pero cómo lo hago? ¡Vamos, me voy!
  • ventanas emergentes que se abren cuando "me voy": ¿es realmente una buena idea? Si me voy, significa que quiero irme, si quiero volver, guardo la ficha en mi aplicación dedicada...
  • las ventanas emergentes que se abren en cada página: no son lo suficientemente inteligentes como para ver que ya he hecho clic en la cruz... Por ejemplo, estoy navegando en 10 páginas del mismo sitio y la ventana emergente se abre 10 veces...

En fin, tengo que respirar hondo, estaré bien (siéntanse libres de decir en los comentarios que este es el tipo de ventana emergente que más odian)...

Así que, como puede ver, la forma de utilizar una ventana emergente es crucial para su tasa de conversión: si es demasiado intrusiva, no funcionará, si está totalmente ausente, no obtendrá ningún retorno...

Así que hay que encontrar el equilibrio adecuado, pero ese no es el objetivo de este artículo... Te presentaré este famoso plugin "Popups" para Divi y te explico cómo funciona. Así que, ninguna teoría de marketing aquí...

2 - ¿Pop-up o Modal?

Un pequeño inciso para tratar de entender la diferencia entre una ventana emergente y una ventana modal...

Así pues, como acabamos de ver, la ventana emergente se utiliza con fines comerciales, para incitar al usuario a actuar. Nada es obligatorio y puede cerrar esta ventana.

Mientras que una ventana modal se utiliza más para fines operativos.

Por ejemplo, usted hace clic en un botón para crear su cuenta y aparece una ventana para recuperar su información. O bien, si visita un sitio comercial que vende alcohol y aparece un modal que le pregunta si es mayor de edad, tendrá que introducir su año de nacimiento para seguir navegando por el sitio.

En general, un ventana modal toma el control total de la pantalla visitada y no podrá hacer clic en otra parte para salir. El modal va encima de la aplicación que estás utilizando, para salir de él tendrás que introducir la información solicitada o cancelar tu solicitud.

3 - ¿Qué es "Popups for Divi"?

Popups para Divi es un plugin gratuito disponible en el directorio oficial de extensiones de WordPress.

Con este plugin, crearás popups sencillos pero su ventaja es que la ventana estará compuesta por una sección Divi creada con el Visual Builder.

Más información sobre el Constructor Divi.

Por lo tanto, esta extensión está optimizada para el Divi Builder y no puede funcionar con otros constructores de páginas.

Los plugins como Creador de ventanas emergentes son bonitas pero no podrás incrustar secciones construidas en Divi en ellas. A menos que modifiques un poco el código siguiendo este tutorial.

4 - ¿Cómo puedo utilizar Popups para Divi?

Todo lo que necesitas es un sitio de WordPress con Tema Divi o plugin Divi Builder e instalar la extensión Popups for Divi disponible aquí.

plugin Popups for Divi

Para ello, vaya a la pestaña Extensiones > Añadir, busque y haga clic en Instalar y luego en Activar.

Buenas noticias, esta extensión no requiere ninguna configuración. Funciona tan pronto como lo instalas.

El resto del proceso de creación de la ventana emergente tendrá lugar directamente dentro de una página o artículo utilizando el Constructor Visual, como se explica a continuación:

No esperes más. Descubra el tema Divi aquí !

Paso 1 - Convierte tu sección Divi en un Popup

Crea una sección Divi, ¡ya sabes cómo hacerlo!

Sólo tienes que añadir una nueva sección en tu diseño (una sección azul, por ejemplo), añadir una línea (en verde) y luego los módulos.

Podrá utilizar cualquier módulo, en función de sus necesidades. Puede ser un simple módulo de textoa módulo de imagena módulo de formulario de contactoa tabla de tarifasetc.

Una vez que el diseño de su sección esté completo, abra la ventana de configuración (la rueda dentada) y vaya a la pestaña Popup.

Esta nueva pestaña aparece después de instalar y activar la extensión Popups for Divi.

Para convertir tu sección Divi en un Popup, simplemente activa la opción "Esto es un Popup" e introduce un ID CSS en el campo dedicado. Para este ejemplo, mi ID es "popup-price".

Convertir une section Divi en popup
Convertir una sección de Divi en una ventana emergente

Eso es todo, su sección es ahora una ventana emergente...

Todo lo que tienes que hacer ahora es configurar su comportamiento...

Paso 2 - Configurar el comportamiento de la ventana emergente

Todavía desde la pestaña "Popup" situada en la configuración de su sección, tiene a su disposición otras opciones:

Pestaña de comportamiento:

Popup Behavior
Ficha de comportamiento

En la pestaña Comportamiento, encontrará 3 opciones:

  • Cerrar al hacer clic en el fondo: La ventana emergente puede cerrarse cuando el usuario hace clic en cualquier parte de ella. Si esta opción está desactivada, el usuario sólo podrá cerrar la ventana emergente mediante el botón "Cerrar" o pulsando la tecla ESC del teclado.
  • Cerrar otros Popups: Si está utilizando varios Popups al mismo tiempo, esta opción los cerrará todos a la vez.
  • Activar la intención de salida: Esta opción le permite mostrar la ventana emergente cuando el usuario está a punto de salir de su sitio. Ya conoces este tipo de ventanas emergentes. Sin embargo, sólo funciona en ordenadores, no en móviles o tabletas.

Ficha del botón de cierre:

Popup Close
Ficha del botón de cierre

Desde la pestaña "Botón de cierre", podrá configurar el botón de cierre de su Popup:

  • Mostrar botón de cierre: Puede mostrar u ocultar el botón de cierre.
  • Color del botón: elija si el botón debe ser claro u oscuro
  • Fondo transparente: el icono de cierre (la cruz) puede tener un fondo de color o transparente.

Pestaña de diseño :

Popup Layout

La pestaña Diseño le permite añadir una sombra "por defecto" a su ventana emergente.

Si prefieres establecer una sombra personalizada, utiliza la función nativa de Divi en la sección de ajustes de la pestaña Estilo > Sombras de caja.

En este caso, desactive esta opción.

Ficha de visibilidad :

Popup Visibility

La pestaña de Visibilidad simplemente le permite definir en qué tipo de pantalla quiere que aparezca esta ventana emergente.

Esta puede ser una buena solución para mejorar la capacidad de respuesta de su sitio Divi y la experiencia del usuario.

Más información el sitio web oficial.

Paso 3 - Crear una llamada a la acción para mostrar el Popup

El tercer paso es crear un botón, por ejemplo, o cualquier otro tipo de módulo que permita insertar un enlace.

CTA bouton
Crear una llamada a la acción mediante un botón

En la imagen de arriba, he añadido un botón con un enlace a mi sección Divi que se utilizará como una ventana emergente.

He asignado el ID "popup-price" en mi sección, por lo que el enlace que añado en mi llamada a la acción es "#popup-price".

¡Eso es! Su ventana emergente se muestra cuando el usuario hace clic en el enlace.

Incluso puede insertar este enlace en otro elemento como, por ejemplo, una imagen:

CTA image
Cree una llamada a la acción en una imagen.

Puede poner este enlace en cualquier lugar, incluso en un trozo de texto (ancla del enlace).

Paso 4 - Compruebe el renderizado final...

Por último, guarde todos los cambios y compruebe el renderizado final en el front-end.

Importante: Te aconsejo que crees secciones no más grandes que el tamaño de la pantalla. Lo ideal es que su ventana emergente no sea larga porque parte de ella se cortará y será inaccesible.

Tenga en cuenta también que estas ventanas emergentes no se muestran cuando se abre el sitio. Se trata de ventanas emergentes destinadas a aparecer después de un clic o cuando el usuario sale del sitio. Si quiere que aparezca una ventana emergente en cuanto el usuario llegue a su sitio, elija una extensión como Constructor de ventanas emergentes.

¿Sabías que puedes probar Divi gratis? Ir a esta página y haz clic en "PRUEBA GRATUITA

5 - ¡Acceda a la demostración en vivo de "Popups for Divi"!

¿Te imaginas lo que puedes crear con esta extensión? No hay límite.

Podrás usar los módulos clásicos de Divi, pero también puede ser genial para promocionar productos de tu tienda simplemente insertando un "módulo de tienda" dentro de tu sección.

Vaya aquí para verlo en directo la demostración de todas las ventanas emergentes.

Más información sobre Plugins compatibles con Divi... y que realmente te quieren bien 😉

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

1.719 palabras

7

A ti también te debería gustar:

Product Carousel pour Divi et WooCommerce

Carrusel de productos para Divi y WooCommerce

Si estás buscando una forma de desplazarte por los productos de tu tienda WooCommerce en un elegante carrusel, la extensión "Product Carousel" puede ayudarte. Es rápido y fácil de usar, y los resultados están a la altura de las expectativas.

46 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…

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.

Pínchalo en Pinterest

Acciones
Comparte esto