Mis plugins favoritos para crear un pop-ups en WordPress + Divi

Autor: Max Camuñas

Fecha: 29/01/2019

Hoy te quiero hablar de los temidos (para muchos) pop-ups y de cómo crearlos en WordPress, con especial atención a quienes usan Divi como plantilla en su web.

Las ventanas emergentes, más conocidas como pop-ups, son un recurso de diseño web como otro cualquiera.

Si se han ganado mala fama en los últimos años, en mi opinión, es debido al mal uso que han hecho muchos marketers y bloggers de ellos, llenando sus sitios de pop-ups de los que era difícil escapar.

Pero, como digo, son un recurso muy interesante para utilizar a la hora de diseñar una web y especialmente a la hora de elaborar una estrategia de generación de leads / clientes.

Más allá del uso que todos conocemos enfocado a captar suscriptores para email marketing, los pop-ups tienen mucho potencial si se integran correctamente en el sitio web y, por supuesto, en su estrategia.

Por ese motivo, en este post te muestro cuáles son mis preferencias en cuanto plugins para crear pop-ups en WordPress (y también en Divi).

¡Allá vamos!

3 plugins para crear pop-ups en WordPress (y también en Divi)


Dentro de la gama de plugins, existe una amplia variedad entre los que tienen como objetivo crear pop-ups en WordPress.

De toda esa gran variedad, a lo largo de varios años como diseñador web, he probado numerosas opciones y, a día de hoy, me quedo con los tres plugins que voy a mencionar a continuación.

#1 Bloom

Bloom: plugin para crear pop-ups en WordPress y Divi

Bloom es el plugin de captación de suscriptores y leads de Elegant Themes, es decir, de los desarrolladores de Divi.

Por lo tanto, si usas Divi en tu web, no tendrás ningún problema para integrar a Bloom en su diseño, pues se acomplan perfectamente.

Bloom dispone de seis tipos de diseños diferentes:

  1. Pop-up automático
  2. Ventana lateral emergente
  3. Formularios insertados dentro de tu contenido
  4. Formulario al final de tus posts
  5. Formularios como widgets
  6. Formularios para desbloquear contenido
3 plugins para crear pop-ups en WordPress y Divi

Además, puedes elegir cuando lanzar y mostrar tus formularios (al hacer clic en un botón, después de unos segundos en sitio, al llegar al 50% de la navegación, etc) y se integra con 16 plataformas de email marketing.

Entre ellas, destacan: Mailerlite (mi actual proveedor), Mailchimp, Active Campaign, Infusionsoft, GetResponde, Mailpoet, SendInBlue o HubSpot.

Si quieres saber cómo configurar Bloom para aumentar la captación de leads en tu web, pásate por este post que publiqué hace un tiempo.

Además, te dejo un vídeo donde te explico su funcionamiento:

#2 Popup Maker

PopUp Marker: plugin para crear pop-ups en WordPress y Divi

El nombre completo de este plugin es: Popup Maker – Popup Forms, Optins & More.

Popup Maker es un plugin para crear pop-ups en WordPress extremadamente versátil y flexible, pues te permite crearlos con diferentes objetivos y formatos.

Entre sus funcionalidades destacan:

  • Disparadores al hacer clic en un botón o de autoapertura tras un tiempo de retraso. Incluso permite configurar una cookie personalizada.
  • Objetivos y condiciones: elige en qué parte de tu web quieres que se muestre (entradas, páginas, categorías, etc).
  • Opciones de personalización: varias plantillas, tamaños, animaciones y posición.
  • Posibilidades de cierre del pop-up por parte del usuario: botón, clic, ESC o F4.

De esta forma, Popup Maker te permite personalizar todos los aspectos de tus ventanas emergentes, desde el tema y la posición, hasta la orientación y las cookies.

Como ejemplo, puedes ver esta web en la que lo he utilizado para solicitar un presupuesto personalizado a la hora de contratar un servicio.

El pop-up se muestra cuando el usuario clica en el botón SOLICITAR.

3 plugins para crear pop-ups en WordPress y Divi

Paso 1: el usuario elige la modalidad de servicio que más le interesa y hace clic en «solicitar».

3 plugins para crear pop-ups en WordPress y Divi

Paso 2: se abre el formulario que debe completar el potencial cliente para solicitar su presupuesto personalizado.

Y aquí puedes ver su funcionamiento al clicar en el botón «solicitar»:

3 plugins para crear pop-ups en WordPress y Divi

Es decir, huyendo del clásico pop-up para captar suscriptores y reconvirtiéndolo en una forma muy poderosa de captar leads y posibles clientes.

PD: cómo puedes ver, este plugin para crear pop-ups se integra perfectamente con Divi Builder.

3 plugins para crear pop-ups en WordPress y Divi

#3 Popups for Divi

PopUps for Divi: plugin para crear pop-ups en WordPress y Divi

La tercera opción que te quiero mostrar para crear pop-ups en WordPress es Popups for Divi, que como su propio nombre indica, está pensado expresamente para el tema y maquetador de Elegant Themes.

Este plugin es realmente sencillo de utilizar, pues apenas necesita configuración.

Simplemente debes activarlo y añadir la clase CSS «popup» y la etiqueta de identificación a una sección Divi.

Para abrir la ventana emergente, solo necesitas colocar un enlace en la página con la URL que apunte a la ID de la sección.

Además, incluye varias clases especiales para Divi Builder:

  • popup. Esta opción te permite convertir cualquier sección normal de Divi en un pop-up. Cada ventana emergente también necesita una identificación única. De lo contrario, no podrás mostrar la ventana a tus usuarios.
  • no-close (no cerrar). Por defecto, cada pop-up tiene un botón de cerrar en la esquina superior derecha. Si por algún motivo, no quieres que se pueda cerrar la ventana, solo tienes que agregar la clase no-close a tu pop-up.
  • dark (oscuro). Esta modalidad te permite cambiar el color del botón de cerrar en la esquina superior derecha (por defecto el botón es claro con un icono oscuro). Esta clase también convierte el fondo del pop-up en oscuro.
  • is-modal. Agrega esta clase a cualquier pop-up para deshabilitar la función de cierre de la capa de fondo.
  • on-exit (al salir). Muestra la ventana emergente sin hacer clic cuando el usuario intenta salir de tu página. Esta opción solo funciona en la versión de escritorio. En los dispositivos con pantalla táctil (tableta y móviles) no se muestra el pop-up.

Como ejemplo, puedes ver el funcionamiento de este plugin en esta misma web.

Actualmente lo tengo configurado para que mis lectores accedan a la masterclass cómo planificar tu página web para que tu negocio brille.

De esta forma, cuando el usuario clic en el botón que da acceso a la masterclass (QUIERO EMPEZAR YA), se abre un pop-up con un formulario de suscripción.

3 plugins para crear pop-ups en WordPress y Divi

Paso 1: el usuario clic en el botón

3 plugins para crear pop-ups en WordPress y Divi

Paso 2: inmediatamente aparece el pop-up que contiene el formulario de suscripción

Aquí puedes ver su funcionamiento:

3 plugins para crear pop-ups en WordPress y Divi

En resumen, tras probar muchos plugins para crear pop-ups en WordPress (y Divi) estas son mis opciones favoritas y las que, por supuesto, te recomiendo utilizar en tu web si buscas aumentar tus leads 🙂

Portada: Template for subscribe to a newsletter (shutterstock by adichrisworo)

Summary
3 plugins para crear pop-ups en WordPress y Divi
Article Name
3 plugins para crear pop-ups en WordPress y Divi
Description
3 plugins para crear pop-ups en WordPress y Divi: #1 Bloom #2 Popup Maker #3 Popups for Divi
Author
Publisher Name
Max Camuñas
Publisher Logo

18 Comentarios

  1. Stephany

    Muchas gracias Max!!
    Me preguntaba cómo habías hecho el tuyo porque me parece muy chulo!!

    Responder
  2. carol

    Hola Max,

    quiero saber si es compatible Divi con Thrive Leads porque no acabo de entender porque no me deja hacer los pop ups en los botones.

    Si realizo la landing integrada dentro de mi web con thrive architect no hay problema pero las páginas realizadas con Divi, no me deja integrarlo con pop up o formularios creados por Thrive.

    Mi duda es: se puede crear mediante código CSS para poder utilizar el de Thrive Leads o es incompatible y entonces tengo que hacerlo con Bloom?

    Muchas gracias por tu ayuda!
    Carol

    Responder
    • Max Camuñas

      Hola Carol,

      Hace tiempo que no uso Thrive Leads, como dos años más o menos, pero cuando lo he usado con Divi, siempre he tenido algún problema de integración. De hecho, según tengo entendido, Thrive Leads suele dar problemas en ese sentido.

      Mi consejo es que, si estás utilizando Divi como tema, la captación de leads la hagas con Bloom, pues se entienden perfectamente.

      Siento no ser más concreto.

      Saludos

      Responder
      • Carol

        Gracias Max, porque me estaba volviendo loca en cuanto se actualizaba Divi me borraba todo lo integrado con Thrive y no entendía el problema.

        Así que sigo tus recomendaciones y las páginas creadas con Divi los integro con Bloom y así me ahorro posibles problemas en siguientes actualizaciones.

        De nuevo mil gracias por responderme tan rápido! Feliz sábado!
        Carol

        Responder
  3. Mario

    Hola Max! qué útil este Post.
    Una pregunta, se pueden personalizar los datos que pides en el formulario? Yo por ejemplo, por las necesidades del mío, necesito saber la edad de la persona. Además el pop up quiero que sea una ventana emergente que aparece cuando cliquen en un botón (como en tu masterclass cómo planificar tu página web para que tu negocio brille.)

    Muchas gracias Max!
    Un saludo

    Responder
    • Max Camuñas

      Hola Mario,

      Sí se pueden personalizar. Mira, por ejemplo, mi cuestionario para clientes.

      Por otro lado, el pop-up de mi masterclass lo he montado con el plugin Popups for Divi que menciono en el post 😉

      Saludos

      Responder
      • Mario

        Sí, veo que tu cuestionario tiene muchos campos.
        Me he descargado el Popups for Divi, pero no consigo entender cómo hacer que funcione. Si quiero que aparezca un pop up para suscribirse, y poner algún dato, cómo lo hago?

        Por lo que he entendido yo: cojo el botón que he añadido con divi y le pongo identificador css: un nombre
        clase css: pop up

        Pero luego no se cuál es el siguiente paso.
        me puedes ayudar?

        Muchas gracias!

        Responder
        • Max Camuñas

          Hola Mario,

          Eso es, con la clase y el identificador CSS debería funcionarte sin problemas.

          Saludos

          Responder
          • Mario

            Sí, lo había solucionado, muchas gracias!

            Lo que no sé es vincular la información que me den con una herramienta tipo MailChimp.

            Se necesita código para eso?

            Mil gracias de nuevo!

  4. Montse

    Hola Max
    Tengo todo creado, pero cuando lo tengo que asociar al botón que he creado en la pagina, que clase css tendría que poner. He encontrado alguna pero al incluirla siempre me da el mismo error Expected RBRACE

    Responder
    • Max Camuñas

      Hola Monste,

      ¿Te refieres a CSS para modificar el aspecto del botón que incluye el pop-up?

      Responder
  5. Montse

    No Max, para modificar el aspecto del botón lo hago a través de Bloom, el problema que tenía era que al hacer click en el botón no me aparecía el formulario. No me llevaba a que se abriera, a eso me refiero. Gracias!

    Responder
    • Max Camuñas

      Hola Montse,

      Eso se configura en Display Settings > Trigger On Click. Debes configurar un selector CSS que dé la orden al pop-up.

      Saludos

      Responder
  6. Erik

    Hola Max, que increíble post y vídeo!
    A mi me gustaría saber si es posible que salga el Bloom pop up en diferentes idiomas, con sus diferentes listas de mailchimp.
    Me explico, tengo una web con 5 idiomas y en la que quiero meter 5 newsletters separadas para cada uno de ellos, tengo listas de dichos idiomas en mailchimp y quería saber si era posible, estuve investigando un poco, pero antes de invertir me gustaría saber si es 100% viable.

    Gracias!

    Responder
    • Max Camuñas

      Hola Erik,

      Aunque hace tiempo que no uso Mailchimp, en principio sí es viable hacer lo que comentas. Simplemente tienes que crear diferentes formularios con Bloom y vincularlos con la lista / idioma que quieras. Luego insertas el correspondiente shortcode en el lugar de la web donde quieres que aparezca cada uno de ellos y listo.

      Saludos

      Responder
  7. Mario

    Hola Max! Espero que vaya todo genial.

    Una pregunta. Con pop ups for divi se pueden automatizar correos de respuesta y mandar correos automaticos? Quiero decir, trabajan con alguna plataforma tipo mailchimp?

    El problema es que con bloom el pop up se ve mal en el movil. Se me hace muy raro ya qe deberia estar 100% optimizado con Divi. Piensas que este error puede ser por incompatibilidad con otro plug in?

    Mil gracias! 😀

    Responder
    • Max Camuñas

      Hola Mario,

      Con el plugin no puedes automatizar el envío de correos. Esa es una opción (autorespondedores) que debes configurar en la plataforma de email marketing que utilices (si no recuerdo mal, en Mailchimp es de pago). Lo único que hace el plugin es crear la funcionalidad del pop-up en la web.

      Sobre Bloom en el móvil, nunca he tenido problemas; además, puedes desactivar la imagen del pop-up para que no ocupe tanto espacio.

      PD: échale un vistazo a Mailerlite (es gratuita hasta 1000 suscriptores y esté en español).

      Saludos

      Responder
      • Mario

        Sí, lo que me refiero es, puedo integrar

        Yo hago los formularios con el divi builder (tiene una opción de añadir formulario). Luego esa sección la «convierto» en un pop up con pop ups for divi (el que tú menionas en el artículo). Me funciona perfecto.

        Lo que querría saber ahora es si esos datos del formulario que me llegan al correo que tengo configurado puedo hacer que vayan a mailchimp o alguna plataforma similar, para poder hacer email marketing.

        Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Para cumplir con el nuevo RGPD y que tus datos estén a salvo, debes leer y aceptar mi política de privacidad. Tus datos serán guardados en SiteGround y WordPress, mi proveedor de hosting y el CMS que utilizo en esta web.

Soy Max Camuñas y te doy la bienvenida a mi blog (mi casa).

Por aquí hablo sobre los temas que me apasionan: WordPress, Marketing, Social Media o Blogging.

Me encanta ayudar a otras empresas a marcas a crear el diseño de su web desde cero.

¡MÁS SOBRE MÍ!

masterclass
CÓMO PLANIFICAR TU PÁGINA WEB PARA QUE TU NEGOCIO BRILLE
¡accede gratis!