29 Ene 2019
27 comentariosHoy 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 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:
- Pop-up automático
- Ventana lateral emergente
- Formularios insertados dentro de tu contenido
- Formulario al final de tus posts
- Formularios como widgets
- Formularios para desbloquear contenido
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
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.
Paso 1: el usuario elige la modalidad de servicio que más le interesa y hace clic en "solicitar".
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":
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 Popups for 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 con 10 claves para que tu web brille con luz propia.
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.
Paso 1: el usuario clic en el botón
Paso 2: inmediatamente aparece el pop-up que contiene el formulario de suscripción
Aquí puedes ver su funcionamiento:
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 🙂
Muchas gracias Max!!
Me preguntaba cómo habías hecho el tuyo porque me parece muy chulo!!
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
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
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
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
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
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!
Hola Mario,
Eso es, con la clase y el identificador CSS debería funcionarte sin problemas.
Saludos
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!
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
Hola Monste,
¿Te refieres a CSS para modificar el aspecto del botón que incluye el pop-up?
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!
Hola Montse,
Eso se configura en Display Settings > Trigger On Click. Debes configurar un selector CSS que dé la orden al pop-up.
Saludos
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!
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
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! 😀
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
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.
Hola Max
Gran artículo.
Estoy utilizando Popup for Divi pero en el móvil si el popup es mas largo que la pantalla no se ve entero y no hace scroll la intentar subirlo con el dedo. He visto que el tuyo si lo hace ya que también es mas largo que el largo de la pantalla del móvil pero te deja desplazarlo. ¿Como lo has hecho? Me estoy volviendo loco y seguro que es algo de configuración o tal vez algún código css.
Please te lo agradecería mucho... Mil gracias.
Hola Eduardo,
Sí, a mí también me ha pasado. Es un pequeño fallo de la última versión del plugin (1.7.0), que se soluciona volviendo a al anterior (1.6.3).
Saludos
Felicitaciones Max:
Es uno de los videos mas claros que he visto, sigue así.
Xavier
Hola, Max. Muy útil tu artículo. He instalado popups for divi y el único problema que tengo es que para que salga sin hacer clic tengo que poner la opción exit. Es decir, que yo querría que al entrar en una página saltase el popup el solo, sin que yo tuviera que hacer clic. ¿Es eso posible?
Gracias! 😉
Hola Tom. Creo que con Popups for Divi no vas a poder hacerlo, pues su principal funcionalidad es habilitar ventanas emergentes al hacer clic convirtiendo secciones en pop-ups.
Si quieres hacerlo de forma automática, te recomiendo usar Bloom, que se integra perfectamente con Divi, pues es de la casa Elegant Themes.
Saludos
Muchas gracias, Max., por lo rápido y claro que me has respondido.
Debo desinstalar Popups for divi para poner Bloom, ¿no?
Bloom parece ser solo para captar emails. ¿Si quiero mandar usuarios hacia una landing page o un servicio habitual, me sirve Bloom? ¿Existe la felicidad completa? 🙂
Así es. Si no lo vas a usar, lo mejor es desactivarlo y eliminarlo. Los formularios de Bloom también se pueden insertar en otras partes de la web: widgets, entradas, páginas, landings, etc.
De todas formas, si lo que quieres es captar suscriptores en una landing, no necesitas ningún plugin; puedes hacerlo con el módulo opt-in de Divi directamente 😉
Hola Max,
Me encanta tu post, me ha sido de mucha ayuda.
He descargado popups for Divi, pero no consigo que me aparezca en el escritorio. En el "Cómo funciona" del plugin dice que la versión no ha sido probada con mi versión de WordPress. Será que la versión no es compatible?
Estoy probando el popup Maker, pero veo que no puedo hacer un formulario con la versión gratuita. Me han recomendado instalar Elementor para poder hacerlo. Qué me podrías sugerir?
Muchísimas gracias!
Hola Fabiola,
Puedes usar popups for Divi sin problema; yo lo uso en muchas de mis webs.
Popup Maker es el que tengo instalado ahora mismo en esta web para mostrar los formularios de suscripción (con la versión gratuita).
Sobre Elementor no puedo decirte porque yo uso Divi.
¡Gracias por tu comentario!