Popups para Divi: un plugin gratuito muy inteligente!

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

¡Es posible crear pop-ups de las secciones de Divi de forma gratuita! Gracias a la plug-in gratuito "Popups para Divi" convertirá cualquier sección de Divi en un pop-up que se abrirá como resultado de la acción (clic) de un usuario o de su intención de salir de la página.

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

Podrás usarlo para hacer aparecer un mensaje de texto, ¡pero no sólo! Cualquier El módulo Divi puede aparecer en una ventana emergente...

Aquí hay una vista previa en video de lo que podrás crear:

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

1 - ¿Un popup? ¿Un popup? ¿Pop-up?

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

Para ser honesto, nunca sé qué término usar... Tengo una pequeña inclinación por "un popup" o un "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 como "ventana emergente" o incluso "Ventana de intrusión".. Es menos divertido, ¿no?

Sólo creo que la palabra "pop-up" ha sido franqueada durante mucho tiempo, al igual que la palabra parking o cóctel... Puedes imaginarte diciendo "encontremos un sitio en un parking rápidamente porque vamos a llegar tarde a sorber nuestros cócteles"... MDR!!!!

Así que, como ya sabes, un pop-up es una pequeña ventana que aparece en la pantalla de tu ordenador (o incluso en tu smartphone) para pedirte que hagas algo.

Rara vez (nunca, en realidad) he visto un pop-up que aparezca y diga, "Hola, ¿cómo va?"

Por lo general, se crea una ventana emergente con fines comerciales: un llamamiento a la acción para incitar a los usuarios de Internet a hacer un pedido o un registro.

En una escala de molestias del 1 al 10, ¿qué tal esto?

  • los pop-ups que no podemos cerrar: ¿dónde está esa cruz?
  • popups que son realmente intrusivos: ¡He estado descubriendo el sitio por un segundo y medio y me piden que dé mi correo electrónico! ¡Es una locura!
  • popups no receptivos: pero, ¿pero cómo lo hago? ¡Vamos, salta, me voy!
  • los popups que se abren cuando "me voy": ¿es realmente una buena idea? Si me voy, es porque quiero irme, si quiero volver, guardo la ficha en mi aplicación dedicada...
  • los popups que se abren en cada página: no es lo suficientemente inteligente como para ver que ya he hecho clic en la cruz... Como, estoy navegando en 10 páginas del mismo sitio y el popup se abre 10 veces...

De todos modos, necesito respirar profundamente, estaré bien (siéntete libre de decir en el comentario que ella es el tipo de pop-up que más odias)...

Así que, como habrás comprendido, la forma en que uses un pop-up es decisiva para tu tasa de conversión: si eres demasiado intruso, no funcionará, si estás totalmente ausente, no obtendrás ningún feedback...

Así que tenemos que encontrar el equilibrio correcto pero ese no es el propósito de este artículo... Voy a presentarles este famoso plugin "Popups para Divi" y explicarte cómo funciona. Así que, ninguna teoría de marketing aquí...

2 - ¿Pop-up o Modal?

Pequeño aparte para tratar de entender la diferencia entre un pop-up y una ventana modal...

Así que, como acabamos de ver, el pop-up se utiliza con fines comerciales, para incitar al usuario de Internet a tomar medidas. Nada es obligatorio y puedes cerrar esta ventana.

Mientras que una ventana modal se utiliza más bien con fines operacionales.

Por ejemplo, haces clic en un botón para crear tu cuenta y aparece una ventana para recuperar tu información. O bien, visitas un sitio comercial que vende alcohol y aparece un modal que te pregunta si eres mayor de edad, tendrás que introducir tu año de nacimiento para seguir navegando por el sitio.

En general, un ventana modal toma el control total de la pantalla que visita y no podrá hacer clic en ningún otro lugar para salir. El modal anula la aplicación que está utilizando, para salir tendrá que introducir la información solicitada o cancelar su solicitud.

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

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

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

Aprende más sobre el Divi Builder.

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

Plugins como Popup Maker son bonitas, pero no podrás abordar ninguna sección construida con Divi. A menos que modifiques un poco el código. siguiendo este tutorial.

4 - ¿Cómo usar los Popups para Divi?

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

plugin Popups for Divi

Para ello, ve a la pestaña Extensiones > Añadir, busca y haz clic en Instalar y luego en Activar.

La buena noticia es que esta extensión no requiere ninguna configuración. Funciona tan pronto como se instala.

El resto del proceso de creación de pop-ups 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! Descubre el tema de la Divi aquí !

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

Creando 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 módulos.

Podrá utilizar cualquier módulo, según sus necesidades. Puede ser un simple módulo de textoa módulo de imagena módulo de formulario de contactoa tabla de tasasetc.

Una vez completado el diseño de tu sección, abre la ventana de ajustes (la rueda dentada) y ve 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 habilita la opción "Esto es un Popup" e introduce un ID de CSS en el campo dedicado. Para este ejemplo, mi identificación es "popup-price".

Convertir une section Divi en popup
Convierte una sección Divi en un popup

Ahí, tu sección es un popup ahora...

Todo lo que tienes que hacer es establecer su comportamiento...

Paso 2 - Establecer el comportamiento del Popup

Aún así, desde la pestaña "Popup" que se encuentra en la configuración de su sección, hay otras opciones disponibles:

Ficha de comportamiento:

Popup Behavior
Ficha de comportamiento

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

  • Cerrar en Background-Click: el popup se puede cerrar cuando el usuario hace clic en cualquier lugar. Si esta opción está desactivada, el usuario sólo podrá cerrarla mediante el botón "Cerrar" o pulsando la tecla ESC de su teclado.
  • Cerrar otros Popups: Si estás usando varios Popups al mismo tiempo, esta opción te permite cerrarlos todos a la vez.
  • Activar 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! Sin embargo, sólo funciona en ordenadores, no en móviles o tabletas.

Cierra la pestaña del botón:

Popup Close
Cerrar la pestaña del botón

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

  • Mostrar el botón de cierre: Puedes mostrar u ocultar el botón de cierre.
  • Color del botón: elige si el botón de cierre 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 agregar una sombra "predeterminada" a su ventana emergente.

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

En este caso, desactiva esta opción.

Pestaña de visibilidad :

Popup Visibility

La pestaña de visibilidad simplemente le permite definir en qué tipo de pantalla desea que aparezca este popup.

Esto 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 sobre 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 para insertar un enlace.

CTA bouton
Crear una llamada a la acción a través de un botón

En la imagen de arriba, he añadido un botón con un enlace a mi sección Divi que será usado como un popup.

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

¡Eso es! ¡Tu popup aparece cuando el usuario hace clic en el enlace!

Incluso puedes insertar este enlace en otro elemento como un..:

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

Puedes poner este enlace en cualquier lugar, incluso en un trozo de texto (link anchor).

Paso 4 - Revisar el renderizado final .

Por último, guarda todos los cambios y comprueba la representación final, la parte delantera.

Importante: Le aconsejo que cree secciones no más grandes que el tamaño de la pantalla. Lo ideal es que su popup no sea largo porque parte de él estará cortado y será inaccesible.

También hay que tener en cuenta que estos popups no se muestran cuando se abre el sitio. Son popups que pretenden aparecer después de un clic o al salir del sitio. Si desea que aparezca un popup tan pronto como el usuario llegue a su sitio, elija en su lugar una extensión como Popup Builder.

¿Sabías que puedes probar Divi gratis? Ir a esta página y haga clic en "TRY IT FOR FREE".

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

¿Te imaginas cuánto puedes crear con esta extensión? Ya no hay límite.

Podrá utilizar los módulos clásicos de Divi sin olvidar que puede ser ideal para promocionar los productos de su tienda con sólo insertar un "módulo de tienda" dentro de su sección.

Ve aquí para ver en vivo... la demostración de todos los popups.

Descubrir a los demás Plugins compatibles con la división... 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 debería gustarte:

Product Carousel pour Divi et WooCommerce

Carrusel de productos para Divi y WooCommerce

Si buscas una manera de desplazarte por los productos de tu tienda WooCommerce en un elegante carrusel, la extensión "Carrusel de productos" puede ayudarte. Es simple y rápido de usar, el resultado está a la altura de sus expectativas.

38 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

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.

Ponerlo en el interés

Acciones
Comparte esto