Crear banner de suscripción flotante en Divi

La inspiración viene de esa cajita flotante que tiene Elegant Themes en su sitio: aparece unos segundos después de cargar la página, te acompaña mientras navegas, y se cierra cuando el usuario no está interesado. Vamos a recrear esa experiencia usando solo el constructor de Divi más un par de fragmentos de código, y funcionará perfectamente también en móvil.

Para esto usaremos todo el poder de Lottiefiles. Recuerda que antes ya hicimos un tutorial donde te explicamos como integrar animaciones de Lottiefiles en Divi, y además en ese mismo tutorial te damos el plugin para que lo logres.

Objetivo de tutorial:

En este tutorial prémium lo que queremos es lograr crear un Banner flotante en Divi con un CTA definido, en este caso estamos usando el ejemplo de una caja de suscripción, pero la realidad es que puedes usar el CTA que quieras. Lo haremos a través de la adición algunos códigos personalizados y unos JavaScript que generarán la funcionalidad.

Ver resultado:

En la parte inferior, en los recursos de este tutorial encontrarás los códigos que necesitas para que todo funcione, y además podrás descargar el banner flotante que hicimos en el tutorial para que lo puedas usar en todas las instalaciones que quieras.

Paso 1: Crear la sección dentro del footer global

Lo primero es trabajar dentro de un pie de página global en el Theme Builder. Ve a "Divi > Generador de temas" y, si no tienes un footer global, créalo; si ya lo tienes, entra a editarlo. El footer es el lugar perfecto para esta funcionalidad porque se carga en todas las páginas, lo que hace que el banner aparezca consistentemente sin importar dónde navegue el usuario.

Dentro del footer creamos una nueva sección y, dentro de ella, una nueva fila de ancho completo. Esta fila es la que vamos a convertir en flotante. Lo más importante de este paso es asignarle un identificador, porque el código que añadiremos después hace referencia a ese ID. Entra a las opciones de la fila, ve a "Avanzado", y en "ID y clases CSS" coloca como identificador la palabra banner.

Paso 2: Darle estilo y posición flotante a la fila

Ahora le damos el aspecto de tarjeta flotante. Agrégale a la fila un fondo blanco, un borde redondeado de unos 8 píxeles, y una sombra de caja suave. Para la sombra, sube la suavidad (el "blur") y baja la intensidad, de modo que quede sutil y elegante, no dura ni marcada.

El paso clave para que flote es la posición. Ve a "Avanzado > Posición" y, donde dice "Relativo", cámbialo a "Fijo" ("Fixed"); así la fila se ancla a una esquina de la pantalla. En este ejemplo la coloco en la parte inferior derecha, pero puedes elegir la inferior izquierda. Para que no quede pegada al borde, dale un desplazamiento de unos 30 píxeles vertical y 30 horizontal.

Finalmente, controla el tamaño: ponle una anchura máxima de 300 píxeles para que la caja no se haga gigante, y agrégale un relleno superior de unos 20 píxeles y uno izquierdo y derecho de 15 píxeles, creando un margen interno cómodo para los elementos que colocaremos dentro.

Consejo: Un detalle fácil de olvidar pero crítico es el índice Z. Con la posición fija, dale a la fila un índice Z muy alto, como 99999. Sin esto, el banner puede quedar tapado por otros elementos o traslaparse con el footer en móvil. Ese valor garantiza que la cajita siempre esté por encima de todo.

Paso 3: El icono de cierre

El primer elemento dentro de la fila es un módulo de código que servirá como botón de cierre, esa "X" que permite descartar el banner. Dentro del módulo colocamos un fragmento HTML que genera un icono nativo de Elegant Themes (lo tienes en los recursos al final), con un tamaño de unos 20 píxeles. Para que cambie a una manita al pasar el cursor, le añadimos al elemento principal un CSS personalizado con la propiedad cursor: pointer;.

Hay dos configuraciones imprescindibles aquí. La primera: en "Avanzado > Posición" lo ponemos en "Absoluto", anclado a la parte superior izquierda de la caja, con un índice Z de 99999 para que siempre se vea por encima del contenido. La segunda, la más fácil de olvidar: en "Avanzado > ID y clases CSS" le asignamos la clase CSS personalizada close. Esto es crítico, porque el JavaScript actúa específicamente sobre esa clase para cerrar el banner.

Paso 4: Animación Lottie y módulo de suscripción

Para darle vida a la caja añadimos una animación de LottieFiles. Con el plugin de Lottie para Divi ya instalado (te dejamos el enlace al tutorial original arriba), agregamos un nuevo módulo de Lottie y pegamos la URL de la animación que elijas. Un buen truco es buscar "gift" en LottieFiles y filtrar por las gratuitas, eligiendo una cajita de regalo que refuerce visualmente el llamado a la acción. Pon la velocidad en 1 para que corra a su ritmo original.

El corazón del banner es el módulo de correo electrónico (Optin) de Divi, del cual también tenemos un tutorial dedicado. Aparece enorme por defecto, así que vamos a domarlo: quítale el color de fondo, cambia el esquema de texto de claro a oscuro, y, muy importante, cambia la orientación del formulario de "izquierda a derecha" a "arriba hacia abajo", para que los campos se apilen verticalmente y quepan en una caja angosta.

A partir de ahí es cuestión de afinar el diseño a tu gusto: edita el título con una tipografía como Montserrat pequeña y centrada, dale a los campos un fondo gris claro, deja visible únicamente el campo de correo electrónico, y estiliza el botón con un degradado, bordes redondeados y un texto como "Descargar ahora". No olvides el pie del módulo para el aviso de privacidad, con un enlace discreto.

Consejo: No te enganches en lo estético antes de tiempo. Lo verdaderamente valioso de este tutorial es la mecánica de aparición y cierre; el contenido de adentro es totalmente intercambiable. En lugar del módulo de suscripción puedes poner un botón de WhatsApp, un CTA de contacto o cualquier otro elemento: tienes todo el poder del Divi Builder dentro de esa cajita flotante.

Paso 5: Inyectar el CSS y el JavaScript

Con el diseño listo, llega el momento de darle funcionalidad. Añadimos dos módulos de código más dentro de la fila, usando la vista de wireframe o de capas para manejarlos con comodidad. En el primero pegamos el CSS, que oculta y muestra el banner y lo mantiene visible mientras editas. En el segundo pegamos el JavaScript que genera la lógica de aparición temporizada y de cierre con cookie.

Antes de probar, verifica tres cosas: que la fila tenga el ID banner, que el icono de cierre tenga la clase close, y que ambos códigos estén pegados sin errores. Al recargar la página, el banner aparece cinco segundos después y te acompaña mientras navegas; si haces clic en la "X", se cierra y no vuelve hasta que pase el tiempo definido en la cookie.

Cómo personalizar el tiempo y la cookie

El JavaScript tiene dos valores que conviene conocer. El primero es la duración de la cookie de cierre: cuando un usuario cierra el banner, se guarda una cookie para que no vuelva a aparecer. Por defecto está en 1 día, pero puedes cambiar ese número a los días que quieras o usar fracciones para horas (0.5 equivale a 12 horas). El segundo es el retardo de aparición, en milisegundos (1000 = un segundo); por defecto viene en 5000, cinco segundos. Podrías bajarlo, pero ten cuidado: aparecer demasiado pronto se siente agresivo. Cinco segundos le da al usuario tiempo de empezar a leer antes de presentarle la oferta.

Conectar el formulario con tu email marketing

El módulo de correo electrónico de Divi necesita conectarse a tu plataforma de email marketing para funcionar; la configuración de la cuenta se explica en otro de nuestros tutoriales. El flujo ideal es conectar el módulo a tu lista y configurar una automatización que envíe el regalo o recurso descargable al suscriptor justo cuando se da de alta. En las opciones del módulo Optin también puedes definir qué pasa tras la suscripción: mostrar un mensaje de éxito o redirigir a una página de gracias mediante una URL de redirección.

Puedes ver acá el tutorial de automatizaciones con Mailerlite

También revisa este tutorial para integrar el módulo de optin a Mailerlite.

Preguntas frecuentes

¿Funciona el banner flotante en dispositivos móviles?

Sí, funciona perfectamente en móvil. El único detalle a vigilar es el traslape con el contenido del footer en pantallas pequeñas, que se resuelve asignándole a la fila un índice Z alto (99999) en la posición fija. Con eso, el banner siempre queda por encima de los demás elementos.

¿Puedo usar este banner para algo que no sea suscripción?

Por supuesto. El banner es un contenedor flotante con funcionalidad de aparecer y desaparecer; lo que pongas dentro depende de ti. Puede ser un botón de WhatsApp, un CTA de contacto, una promoción, un aviso importante o cualquier otro llamado a la acción. La mecánica es la misma; solo cambias el contenido del interior.

¿Por qué cuando cierro el banner ya no me vuelve a aparecer?

Porque al cerrarlo se genera una cookie que recuerda esa acción y evita que el banner reaparezca durante el período definido (por defecto, un día). Si quieres volver a verlo de inmediato para hacer pruebas, abre la página en una ventana de incógnito, donde no existe esa cookie, o ajusta la duración en el JavaScript.

Conclusión

Crear un banner de suscripción flotante en Divi es una de esas técnicas que elevan de inmediato la percepción de profesionalismo de tu sitio, y lo mejor es que se logra sin plugins pesados ni soluciones externas. Con una sección en el footer global, un poco de estilo, una animación de LottieFiles y dos fragmentos de código, tienes un CTA inteligente que aparece en el momento justo, respeta al usuario que lo cierra y funciona igual de bien en escritorio que en móvil.

Lo más poderoso de este enfoque es su flexibilidad: hoy es una caja de suscripción, mañana un botón de WhatsApp o una promoción de temporada. Dominar esta mecánica te abre la puerta a captar más leads sin saturar la experiencia de navegación. En los recursos de abajo te dejamos todo lo que necesitas para implementarlo.

Si te ha gustado este contenido no olvides compartirlo con tus amigos y conocidos, además recuerda que puedes compartirnos el enlace de tu creación en los comentarios de este contenido, así todos veamos los resultados maravillosos que conseguiste con este contenido prémium.

Descarga los recursos mencionados en este tutorial acá abajo 👇 siendo premium ⭐