Popup en Divi con plugin gratuito: tutorial paso a paso

En este tutorial te voy a enseñar cómo crear un popup en Divi usando el plugin gratuito Popup for Divi de Divimode. La gracia de este plugin es que convierte cualquier sección que diseñes en el constructor de Divi en una ventana emergente, sin que tengas que pelearte con código ni con configuraciones interminables. Diseñas la sección como lo harías normalmente, le pones un disparador y listo: ya tienes un popup totalmente personalizado funcionando en tu sitio.

Antes de empezar quiero ser honesto contigo, porque esto importa: no soy fan de los popups agresivos. Esos que te saltan a la cara apenas entras a una página, que tapan todo el contenido y que tienen una "X" diminuta escondida en una esquina. Ese tipo de popup espanta visitantes y, peor aún, Google los penaliza en móvil. Pero usado con criterio, un popup es una de las herramientas de conversión más efectivas que existen. Todo está en el "cómo" y en el "cuándo", y de eso también vamos a hablar acá.

Si quieres aprender a crear un video popup en Divi sin plugins, checa este tutorial premium donde te muestro la técnica nativa, sin depender de plugins de terceros.

¿Qué es Popup for Divi y por qué lo recomiendo?

Popup for Divi es un plugin desarrollado por la gente de Divimode, uno de los equipos más respetados dentro del ecosistema de Divi. Su filosofía es simple y elegante: en lugar de obligarte a aprender un constructor de popups aparte, te deja usar el constructor que ya conoces (el Divi Builder) para diseñar la ventana emergente. Cualquier sección de Divi se vuelve "popeable" con un selector. Eso significa que toda la potencia del constructor (animaciones, efectos hover, fondos en degradado, módulos de formulario, videos, lo que quieras) está disponible dentro de tu popup.

La razón por la que lo recomiendo sobre otras soluciones es la curva de aprendizaje, que es prácticamente nula. Si ya sabes mover módulos y configurar secciones en Divi, ya sabes crear un popup. No hay un editor nuevo, no hay una interfaz separada, no hay que exportar e importar nada. El plugin se mete dentro del flujo de trabajo que ya tienes y lo amplía. Para diseñadores que vienen llegando a Divi, esto es oro puro: una funcionalidad avanzada que se siente nativa desde el primer minuto.

Otro punto a favor es que el plugin está optimizado en su código. No carga librerías pesadas ni ralentiza tu sitio, algo que sí pasa con muchos plugins de popups comerciales que vienen cargados de funciones que nunca vas a usar. Acá tienes lo esencial, bien hecho, y nada más.

Cómo crear un popup en Divi paso a paso

Vamos a la parte práctica. Te dejo el proceso completo dividido en pasos claros, desde la instalación hasta verlo funcionar en vivo. Te recomiendo que sigas también el video del tutorial para ver cada detalle en movimiento, pero con estos pasos tienes todo lo necesario para hacerlo por tu cuenta.

1. Instala el plugin Popup for Divi desde el instalador de plugins de WordPress. Solo busca "Popup for Divi" en Plugins > Añadir nuevo, instálalo y actívalo.
2. Abre el editor visual de Divi en la página donde quieras el popup, y crea una sección con todos los elementos que quieres que aparezcan dentro de la ventana emergente (textos, imágenes, formularios, botones, lo que necesites).
3. Abre las opciones de configuración de esa sección y verás una pestaña nueva llamada "Ventana emergente" o "Popup". Accede a ella.
4. Activa la opción "Esto es un popup" y asígnale un "ID" o identificador único a la ventana. Es importante que sea un texto único, sin espacios y que sea claro, porque te va a funcionar como enlace ancla o disparador (trigger) para activar el popup. Por ejemplo: newsletter-optin. Cierra la configuración de la sección.
5. Agrega un módulo de botón en cualquier lugar de la página donde quieras que se active el popup, y coloca en la "URL del enlace" el ID que definiste, con un hashtag «#» al inicio. Siguiendo el ejemplo, sería: #newsletter-optin
6. Y eso es todo. Guarda la página, sal del editor visual y haz clic en el botón. Vas a ver tu popup funcionando. ¡WOOHOO!

Lo poderoso de este método es que el disparador no tiene por qué ser un botón. Cualquier elemento al que le puedas asignar un enlace sirve: un texto, una imagen, un ícono, un ítem de menú. Si pones el ancla #newsletter-optin en cualquiera de esos elementos, todos abrirán el mismo popup. Esto te da una flexibilidad enorme para decidir desde dónde quieres invitar al usuario a abrir la ventana.

Consejo: Usa nombres de ID descriptivos y consistentes. Si tienes varios popups en el sitio, nombres como popup-descuento, popup-newsletter o popup-contacto te van a ahorrar dolores de cabeza cuando tengas que volver a editarlos meses después. Un ID genérico como popup1 no le dice nada a nadie, ni a ti mismo.

Disparadores automáticos: tiempo, scroll y salida

Más allá del clic manual en un botón, el plugin te permite configurar disparadores automáticos, que es donde realmente empieza la magia para conversión. Puedes hacer que el popup aparezca después de cierto número de segundos en la página, cuando el usuario llega a un porcentaje determinado de scroll, o incluso cuando detecta intención de salida (exit intent), es decir, cuando el cursor se mueve hacia la barra de direcciones o el botón de cerrar pestaña.

Mi recomendación es ser quirúrgico con esto. El disparador de exit intent suele ser el menos invasivo, porque solo aparece cuando el usuario ya estaba por irse de todas formas: no interrumpes su lectura, le das una última oferta justo antes de que se vaya. El disparador por tiempo funciona bien si lo configuras con calma (espera al menos 20 o 30 segundos, no 3), y el de scroll es ideal para contenido largo, donde dispararlo al 60-70% indica que la persona realmente está interesada en lo que leyó.

Características del plugin Popup for Divi

Para que tengas una visión completa de lo que ofrece esta herramienta, acá te dejo el resumen de sus características principales. Es un plugin sencillo en apariencia, pero con una base muy sólida por debajo:

• Simple de usar, prácticamente no requiere configuración para empezar.
• Es flexible: se adapta a cualquier tipo de contenido que diseñes en Divi.
• Es rápido, tiene el código optimizado y no penaliza el rendimiento del sitio.
• La creatividad es el límite. Puedes diseñar cualquier elemento con Divi y convertirlo en popup.
• Es totalmente responsive, se ve bien en escritorio, tablet y móvil.
• Los desarrolladores lo aprecian por su estable API de JavaScript, que permite control avanzado por código.
• El equipo creador responde dudas de forma constante en el foro de soporte.
• Y lo mejor, según el propio autor: "Gratis para siempre".

Casos de uso reales para popups en tu sitio

Una cosa es saber crear un popup y otra muy distinta es saber para qué usarlo bien. He visto muchos sitios en LatAm que ponen popups "porque sí", sin un objetivo claro, y terminan molestando al visitante sin ganar nada a cambio. Para que eso no te pase, acá te dejo los casos de uso que de verdad funcionan y que justifican usar esta funcionalidad.

El primero, y el más clásico, es la captura de suscriptores para tu lista de correo. Un popup con un lead magnet (un PDF gratis, una plantilla, un mini-curso) a cambio del email es de las formas más efectivas de hacer crecer tu lista. La clave acá es ofrecer algo de valor real, no un genérico "suscríbete a nuestro newsletter". Dale al usuario una razón concreta para dejarte su correo.

El segundo caso es el de ofertas y descuentos por tiempo limitado. Para tiendas en línea, un popup de exit intent con un código de descuento del 10% puede recuperar ventas que de otra manera se perderían. El visitante estaba por irse sin comprar, y ese pequeño empujón muchas veces es lo que cierra la venta. Funciona especialmente bien combinado con un contador de urgencia.

El tercer caso, muy útil para sitios de servicios o agencias, es el popup de contacto rápido. En lugar de mandar al usuario a una página de contacto aparte, un botón flotante "Hablemos" abre un popup con un formulario corto sin que la persona pierda el contexto de lo que estaba viendo. Esto reduce la fricción y aumenta las consultas. Es una técnica que combino seguido con los botones flotantes de llamada y WhatsApp para móvil.

Consejo: Nunca dispares un popup de captura de email en la primera visita y de inmediato. Dale al usuario al menos unos segundos para que conozca tu contenido y entienda quién eres. Pedirle el correo a alguien que llegó hace 2 segundos es como pedirle el teléfono a alguien que acabas de conocer en la calle: la respuesta casi siempre es no.

Buenas prácticas para que tus popups no molesten

Como te dije al principio, la línea entre un popup útil y uno molesto es muy fina. Acá van las reglas que yo sigo para asegurarme de quedar del lado bueno de esa línea. Aplicarlas marca la diferencia entre una herramienta que convierte y una que ahuyenta.

Lo primero: la "X" para cerrar tiene que ser obvia y grande. Nada de botones de cierre escondidos o de bajo contraste. Si el usuario no puede cerrar el popup en menos de un segundo, ya perdiste su confianza. Un popup que se siente como una trampa genera rechazo inmediato hacia tu marca, por muy buena que sea tu oferta.

Lo segundo: respeta la experiencia móvil. Google penaliza los intersticiales intrusivos en dispositivos móviles, así que en pantallas pequeñas sé especialmente conservador. Un popup que ocupa toda la pantalla del celular justo al entrar puede costarte posiciones en buscadores. En móvil, prefiere banners discretos en la parte inferior o popups que solo se disparen con interacción explícita del usuario.

Lo tercero: usa cookies para no mostrar el mismo popup una y otra vez. Si un usuario ya cerró tu popup o ya se suscribió, mostrárselo de nuevo en cada visita es la forma más rápida de irritarlo. Configura una frecuencia razonable, por ejemplo, que el popup no vuelva a aparecer en los próximos 7 o 30 días para quien ya interactuó con él.

Y lo cuarto: que el diseño del popup sea coherente con el resto de tu sitio. Mismos colores, misma tipografía, mismo estilo. Un popup que parece sacado de otra web genera desconfianza. Como lo diseñas con el propio Divi, no tienes excusa para que desentone: usa tu paleta de marca y mantén la consistencia visual.

Preguntas frecuentes sobre popups en Divi

¿Popup for Divi es realmente gratis?

Sí. La versión que usamos en este tutorial es completamente gratuita y, según el propio autor, lo será para siempre. Existe una versión Pro con funciones avanzadas adicionales (más tipos de disparadores, control granular de cookies, integraciones extra), pero para la mayoría de los casos de uso que vimos acá, la versión gratuita cumple de sobra. Te recomiendo empezar con la gratuita y solo considerar la Pro si tus necesidades crecen.

¿Puedo poner un formulario dentro del popup?

Por supuesto. Como el popup es simplemente una sección de Divi, puedes meter dentro cualquier módulo, incluido el módulo de formulario de contacto, el de suscripción por email o incluso formularios de plugins de terceros como un shortcode. De hecho, este es uno de los usos más comunes: un popup con un formulario de captura conectado a tu plataforma de email marketing. Diseñas la sección con el formulario adentro y la conviertes en popup, así de simple.

¿El popup funciona en páginas y entradas del blog?

Funciona en cualquier lugar donde puedas usar el Divi Builder. Para que un mismo popup aparezca en todo el sitio (por ejemplo, un popup global de suscripción), la mejor práctica es construirlo en una plantilla del Theme Builder de Divi, o en una página específica, y luego disparar el ancla desde donde lo necesites. Si solo lo quieres en una página puntual, lo construyes directamente en esa página y listo.

¿Los popups afectan el SEO de mi sitio?

Pueden afectarlo si los usas mal. Google penaliza específicamente los popups intrusivos que aparecen de inmediato en móvil y tapan el contenido principal, lo que afecta la experiencia de usuario. Pero un popup bien configurado, que respeta la experiencia móvil y que se dispara con interacción o exit intent, no te va a perjudicar. La clave está en seguir las buenas prácticas que vimos: cierre obvio, conservador en móvil, y nunca de inmediato al entrar.

Conclusión

Siempre he insistido en que hay que ir con cuidado con los popups, pero usados con criterio son una herramienta de conversión potentísima. Con Popup for Divi puedes crear un popup totalmente personalizado dentro de Divi, de forma muy sencilla y en menos de 60 segundos, aprovechando todo lo que ya sabes del constructor. No necesitas aprender una herramienta nueva ni tocar código: diseñas, asignas un ancla y ya tienes tu ventana emergente funcionando.

Lo más valioso de este enfoque es que combina la simplicidad del plugin con la potencia del Divi Builder. Tienes la libertad creativa de diseñar lo que quieras y la disciplina de aplicar buenas prácticas para que tus popups sumen y no resten. Empieza simple, mide cómo responde tu audiencia, y ve ajustando los disparadores y el diseño según los resultados que veas.

Si quieres dominar Divi de verdad y aprender a sacarle el máximo provecho a cada herramienta del constructor, desde lo básico hasta técnicas profesionales de diseño y conversión, te invito a conocer la membresía premium y los cursos en uxdivi.com/planes. Ahí encontrarás todo lo que necesitas para llevar tus proyectos web al siguiente nivel.

¿Te gustó el plugin? ¿Qué piensas de esta funcionalidad? Déjame un comentario aquí abajo y cuéntame para qué piensas usar tus popups. Nos vemos en el próximo tutorial.