El módulo Email Optin de Divi, en su configuración por defecto, apila el campo de email y el botón en columna vertical. Funciona, pero ocupa bastante espacio vertical y en páginas de aterrizaje o secciones con poco espacio ese stack se ve desproporcionado. La versión en una sola línea — campo de email a la izquierda, botón a la derecha — es más compacta, tiene un look más moderno y convierte bien en landing pages minimalistas donde quieres capturar el email sin interrumpir el flujo visual de la página.
La buena noticia es que no hay que tocar el módulo con código PHP ni instalar nada — basta con un pequeño CSS con media query para que el campo y el botón queden en la misma línea. En esta guía te explico el CSS, por qué cada propiedad hace lo que hace, y las variaciones que puedes aplicar para darle más personalidad. Si quieres ver el resultado antes de empezar, puedes revisar la demo en test.uxdividemos.com.
¿Cuándo usar el Email Optin en línea vs. en columna?
La respuesta corta: depende del contexto de la página y de cuánto espacio tienes disponible.
El formato en una línea funciona mejor cuando el optin es el elemento principal de una sección hero o de una landing page minimalista, cuando quieres que el formulario sea discreto y no interrumpa el diseño, y cuando tienes suficiente ancho de contenedor para que el campo y el botón tengan espacio respirable. También funciona especialmente bien en secciones de newsletter dentro del cuerpo de un blog post, donde no quieres que el formulario ocupe demasiado espacio vertical.
El formato en columna vertical sigue siendo mejor cuando el botón tiene texto largo (más de tres o cuatro palabras), cuando el campo necesita un label visible encima, cuando tienes múltiples campos en el formulario (nombre + email), o cuando el diseño requiere que el formulario ocupe más espacio vertical para equilibrar otros elementos visuales de la sección.
Consejo: antes de decidir el formato, pregúntate si el botón cabe visualmente en la misma línea que el campo con el texto que quieres. Un botón con "Suscríbete ahora y recibe el PDF gratis" no cabe cómodamente en una línea junto al campo. "Suscribirme" o "Descargar gratis" sí.
Configuración del módulo Email Optin antes del CSS
Antes de añadir el CSS, hay una configuración en el módulo que afecta el resultado visual. En las opciones del módulo Email Optin de Divi, ve a la pestaña Diseño y busca la opción de Disposición del formulario. Asegúrate de que esté en la opción que pone el cuerpo (título/descripción) en la parte superior y el formulario en la parte inferior. Esto garantiza que la estructura del HTML sea la que el CSS espera.
También te recomiendo simplificar el módulo al máximo: desactiva el campo de nombre si no lo necesitas, deja solo el campo de email. El layout en una línea funciona mejor con un solo campo — dos campos en la misma línea con el botón empieza a verse apretado en pantallas medianas.
El CSS que pone campo y botón en una sola línea
Este es el CSS esencial. Puedes añadirlo en Divi → Opciones del tema → CSS personalizado (si quieres que aplique en todo el sitio) o en el CSS de la página específica desde las opciones de página de Divi:
@media (min-width: 767px) {
.et_pb_newsletter_fields .et_pb_newsletter_field {
flex-basis: calc(100% - 255px) !important;
}
.et_pb_newsletter_fields .et_pb_newsletter_button_wrap {
flex-basis: 240px !important;
}
}Voy a explicar exactamente qué hace cada parte para que puedas ajustarlo según tus necesidades. El selector .et_pb_newsletter_fields es el contenedor flex que Divi ya tiene configurado con display: flex — el módulo Email Optin ya usa flexbox internamente, así que no tenemos que activar nada, solo ajustar las proporciones de los hijos.
El flex-basis: calc(100% - 255px) en el campo de email le dice que ocupe todo el ancho disponible menos 255px — que es el espacio que necesita el botón. El flex-basis: 240px en el botón le asigna un ancho fijo de 240px (con 15px de gap entre campo y botón, de ahí el 255 en el cálculo). El !important es necesario porque Divi tiene estilos inline que hay que sobreescribir.
El @media (min-width: 767px) es la clave para que esto no rompa en móvil. En pantallas menores a 767px, el CSS no aplica y el módulo vuelve al stack vertical por defecto — que es exactamente lo correcto para pantallas pequeñas donde una línea horizontal con campo y botón quedaría demasiado apretada.
Consejo: si quieres un botón más angosto (por ejemplo 180px en lugar de 240px), cambia el
flex-basisdel botón a180pxy el cálculo del campo acalc(100% - 195px). El margen de 15px entre campo y botón queda implícito en ese gap.
Variaciones para personalizar el diseño
Con el layout en línea funcionando, hay varias variaciones de detalle que puedes aplicar para darle más carácter al formulario.
Cambiar el color de fondo del campo de email
Por defecto el campo de email tiene fondo blanco. Para cambiarlo, añade al CSS:
.et_pb_newsletter_fields .et_pb_newsletter_field input[type="email"] {
background-color: #f5f5f5;
color: #333333;
}Cambiar el placeholder del campo
El placeholder del campo de email se configura directamente en las opciones del módulo de Divi, en el campo de texto del formulario. No necesitas CSS para esto — es una opción nativa del módulo.
Bordes redondeados en el conjunto
Para un look más moderno con esquinas redondeadas que envuelvan tanto el campo como el botón como si fueran una sola unidad:
/* Redondear solo la esquina izquierda del campo */
.et_pb_newsletter_fields .et_pb_newsletter_field input[type="email"] {
border-radius: 50px 0 0 50px !important;
}
/* Redondear solo la esquina derecha del botón */
.et_pb_newsletter_fields .et_pb_newsletter_button_wrap .et_pb_button {
border-radius: 0 50px 50px 0 !important;
}El truco es redondear solo las esquinas exteriores de cada elemento: izquierda en el campo, derecha en el botón. Así los dos elementos forman visualmente una sola cápsula redondeada.
Añadir un icono de sobre antes del campo
Para añadir un ícono dentro del campo de email, la forma más limpia es usando CSS con un pseudo-elemento y un carácter Unicode o un SVG de fondo. En la práctica, para la mayoría de proyectos de cliente yo opto por simplificar el formulario y usar el botón bien diseñado como único elemento visual destacado — el ícono dentro del campo añade complejidad CSS que puede romper en algunos contextos.
🎓 ¿Quieres dominar la personalización avanzada de módulos en Divi?
El Curso Divi 5 Completo cubre técnicas de CSS avanzado aplicadas a módulos nativos de Divi para conseguir diseños que van más allá de las opciones del constructor visual.
Integración con servicios de email marketing
El módulo Email Optin de Divi se conecta nativamente con los principales servicios de email marketing. La personalización CSS que acabamos de hacer es completamente independiente de la integración — el layout en línea funciona igual sin importar qué servicio uses.
MailerLite es el servicio que yo uso en UXDivi y que recomiendo para la mayoría de proyectos por su relación calidad-precio y su interfaz limpia. La integración con Divi es directa: en las opciones del módulo Email Optin seleccionas MailerLite, autorizas la cuenta y seleccionas el grupo al que quieres añadir los suscriptores.
ActiveCampaign es la opción cuando necesitas automatizaciones más complejas — segmentación avanzada, scoring de leads, integraciones con CRM. La integración con Divi también es nativa. La curva de aprendizaje es mayor que MailerLite, pero si el proyecto lo requiere vale la pena.
Mailchimp es quizás el servicio más conocido. Divi también lo soporta de forma nativa. En mi experiencia lo recomiendo menos que MailerLite para proyectos nuevos por su modelo de precios, pero si el cliente ya lo usa no hay razón para migrar.
Preguntas frecuentes
¿Funciona bien en móvil?
Sí, precisamente por eso el CSS usa una media query con min-width: 767px. En pantallas menores a 767px el CSS no aplica y el módulo vuelve al stack vertical por defecto, que es más cómodo de usar en pantallas pequeñas con teclado virtual. El layout en línea solo se activa en tablet y desktop donde hay espacio suficiente para que campo y botón quepan en la misma fila.
¿Puedo tener múltiples campos en una línea?
Técnicamente sí, pero la experiencia de usuario en tablet empieza a sufrir cuando tienes más de dos campos más el botón en la misma línea. Si necesitas nombre y email en el formulario, el stack vertical suele ser más cómodo. Si quieres probar el layout en línea con dos campos, tendrías que ajustar el flex-basis de cada campo para que los tres elementos (campo nombre, campo email, botón) quepan proporcialmente en el ancho disponible.
¿Funciona con Divi 5?
Los selectores CSS que usa este snippet apuntan a clases del módulo Email Optin que Divi ha mantenido consistentes entre versiones. En Divi 5 el módulo Email Optin existe y las clases base son compatibles, aunque es posible que algunas clases específicas hayan cambiado. Si al aplicar el CSS en Divi 5 no ves el efecto, inspecciona el HTML generado con las DevTools del navegador para confirmar los nombres de clase actuales y actualizar los selectores.
Puedes descargar acá un layout de un módulo de suscripción con estilo lineal siendo premium:
Layout formulario de suscripción lineal
Conclusión
El layout en línea para el módulo Email Optin de Divi es una de esas personalizaciones que parecen complejas pero se resuelven con menos de 10 líneas de CSS. El truco está en entender que el módulo ya usa flexbox internamente y que solo necesitas ajustar el flex-basis del campo y del botón para que queden en la misma fila, envuelto en una media query para que no rompa en móvil. Una vez que tienes esto claro, puedes adaptar el CSS a cualquier proporciones que necesites para cada proyecto.
🎓 ¿Quieres dominar Divi 5 de forma completa?
El Curso Divi 5 Completo cubre personalización CSS avanzada, módulos nativos y técnicas de diseño profesional para que puedas construir cualquier layout que tengas en mente.
Comentarios
Para dejar un comentario, accede a tu cuenta de UXDivi.
Acceder a mi cuenta →