Alinear botones en Divi uno al lado del otro (paso a paso)

Si alguna vez has puesto dos botones en Divi y terminaron uno encima del otro en lugar de estar en fila, ya conoces este problema. Es frustrante porque visualmente es lo que menos quieres: los botones apilados ocupan más espacio vertical, rompen el ritmo de la sección y debilitan el CTA. Lo que necesitas es que queden uno al lado del otro, como lo harías naturalmente en cualquier diseño profesional. La buena noticia es que se resuelve con un snippet de CSS de dos líneas y una clase CSS aplicada a la columna donde viven los botones.

En este tutorial te muestro paso a paso cómo alinear botones en Divi uno al lado del otro usando CSS personalizado. También te explico cómo aplicarlo solo en una página específica o en todo el sitio, y las variaciones de alineación que puedes usar según tu diseño. Puedes ver la demo en vivo en layout.uxdivi.com. Y si quieres ver más técnicas de personalización de botones, también tengo un tutorial de cómo personalizar el botón "Leer más" en el módulo de blog de Divi.

¿Por qué los botones quedan apilados en Divi?

El comportamiento por defecto del módulo Button de Divi es que cada botón ocupa su propia línea — técnicamente, el div que lo envuelve tiene display: block, lo que hace que el siguiente elemento empiece en una línea nueva. Esto tiene sentido para el caso de un solo botón, pero cuando pones dos o más en la misma columna, quedan apilados verticalmente aunque haya espacio horizontal de sobra. El truco está en cambiar ese comportamiento a display: inline-block usando una clase CSS que tú controlas, sin tocar los estilos globales del tema.

Para qué sirve alinear botones en una sola fila

Más allá de la estética, alinear los botones en horizontal tiene un impacto directo en la experiencia del usuario. Cuando tienes dos CTAs en una sección de héroe — por ejemplo, "Ver demo" y "Comprar ahora" — el lector los percibe como opciones equivalentes que puede comparar de un vistazo. Si los apistas, el segundo botón parece menos importante, o peor, parece un paso secundario obligatorio.

También hay un beneficio práctico: menos scroll. Dos botones en fila ocupan el mismo espacio vertical que uno solo, lo cual es especialmente valioso en secciones de héroe o en bloques de conversión donde cada píxel importa. En móvil, sí puede tener sentido que vuelvan a apilarse — y más adelante te muestro cómo manejarlo.

Paso 1: asigna la clase CSS a la columna

El CSS que usamos no apunta directamente a los botones sino a la columna que los contiene. Por eso el primer paso es asignarle una clase identificadora a esa columna.

1. Abre el Divi Builder en la página donde tienes los botones.
2. Haz clic en la columna que contiene los dos botones para abrir su configuración.
3. Ve a la pestaña Avanzado → CSS ID & Clases.
4. En el campo Clase CSS, ingresa: inline-buttons
5. Guarda los cambios.

Consejo: la clase inline-buttons es solo un nombre conveniente — puedes llamarla como quieras. Lo importante es que el nombre que uses aquí sea exactamente el mismo que escribas en el CSS del paso siguiente.

Paso 2: agrega el snippet de CSS

Ahora tienes dos opciones según dónde quieras que aplique el efecto: en todo el sitio o solo en esa página específica.

Para aplicarlo en todo el sitio

Ve a Divi → Opciones de Tema → CSS Personalizado y agrega el siguiente código:

.inline-buttons .et_pb_button_module_wrapper { display: inline-block; margin: 0 10px; }
.inline-buttons { text-align: center !important; }

Para aplicarlo solo en una página específica

En el editor de la página, ve a Configuración de la Página → CSS Personalizado (aparece en el panel de ajustes del Divi Builder o en la barra lateral de WordPress) y pega el mismo código. De esta manera el estilo solo aplica en esa página y no afecta el resto del sitio.

Consejo: si usas Divi 5, también puedes agregar el CSS directamente en el módulo de columna desde la pestaña "Estilos → CSS personalizado del elemento". Esto lo mantiene encapsulado en el módulo y es más fácil de encontrar si en el futuro necesitas modificarlo.

🎓 ¿Quieres aprender más trucos de CSS y personalización en Divi 5?
El Curso de Divi 5 completo en español cubre el sistema de diseño completo, incluyendo cómo trabajar con CSS personalizado de forma profesional y ordenada.

Variaciones de alineación

El snippet base centra los botones. Si tu diseño requiere otra alineación, solo cambia el valor de text-align:

Alineados a la izquierda

.inline-buttons .et_pb_button_module_wrapper { display: inline-block; margin: 0 10px 0 0; }
.inline-buttons { text-align: left !important; }

Alineados a la derecha

.inline-buttons .et_pb_button_module_wrapper { display: inline-block; margin: 0 0 0 10px; }
.inline-buttons { text-align: right !important; }

Con espaciado personalizado entre botones

El valor 0 10px en el margin agrega 10px a cada lado de cada botón. Si quieres más separación entre ellos, aumenta ese número. Si los botones son grandes y quieres menos espacio, redúcelo. Para diseños donde quieres que los botones se expandan para cubrir el ancho disponible, puedes usar display: flex en la columna en lugar de inline-block:

.inline-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.inline-buttons .et_pb_button_module_wrapper { flex: 1; min-width: 160px; }

Esta variante con Flexbox es más robusta para diseños donde los botones tienen textos de longitud variable, porque distribuye el espacio automáticamente.

Cómo adaptar esto para Divi 5

En Divi 5 el sistema de diseño cambió significativamente. Ahora tienes acceso a variables globales, presets y controles de layout mucho más granulares desde el propio builder, sin necesidad de CSS manual para muchos casos. Sin embargo, el truco de inline-buttons sigue funcionando perfectamente en Divi 5 porque el selector apunta a clases CSS estándar que no cambiaron.

Lo que sí cambió es dónde agregas el CSS personalizado. En Divi 5 puedes hacerlo desde tres lugares: las Opciones de Tema globales (igual que antes), el panel de CSS del módulo específico, o el nuevo Global Styles. Mi recomendación para Divi 5 es usar el CSS a nivel de módulo cuando el efecto aplica solo a ese lugar, y las Opciones de Tema cuando lo necesitas en múltiples páginas. Si quieres entender mejor cómo funciona el sistema de diseño de Divi 5, te lo explico en detalle en el post sobre el sistema de diseño en Divi 5.

🎓 ¿Quieres dominar los botones y el diseño visual en Divi 5?
En el Curso de Divi 5 completo en español tienes un sistema paso a paso para crear secciones de héroe, CTAs y layouts profesionales con Divi 5 desde cero.

Preguntas frecuentes

¿Funciona en móvil?

Sí, los botones se mostrarán en línea en móvil también. Si prefieres que en pantallas pequeñas vuelvan a apilarse (que es a menudo la mejor opción UX en móvil), agrega un media query para revertirlo: @media (max-width: 767px) { .inline-buttons { text-align: center !important; } .inline-buttons .et_pb_button_module_wrapper { display: block; margin: 0 0 10px 0; } }

¿Funciona con más de 2 botones?

Sí. El CSS aplica a todos los wrappers de botones dentro de la columna con la clase inline-buttons, sin importar cuántos sean. Tres o cuatro botones también quedarán en línea. Solo considera que en pantallas pequeñas muchos botones en fila pueden verse apretados — en ese caso el media query del punto anterior te ayuda a controlar el comportamiento en móvil.

¿Qué pasa si los botones están en columnas diferentes?

El CSS no aplica entre columnas — opera solo dentro de la columna que tiene la clase asignada. Si tienes los botones en columnas distintas de la misma fila, ya quedan uno al lado del otro naturalmente por el layout de columnas de Divi. Este truco es específicamente para cuando tienes dos o más botones dentro de la misma columna.

¿Puedo aplicar esto solo en una sección, no en toda la página?

Sí. La clase inline-buttons que asignas a la columna actúa como un scope: el CSS solo aplica dentro de esa columna específica. Puedes tener múltiples columnas en la misma página, algunas con la clase y otras sin ella, y el efecto solo aplica donde pusiste la clase.

¿Cómo pongo imágenes en miniatura en línea con este mismo método?

El mismo principio aplica: reemplaza .et_pb_button_module_wrapper por el selector del módulo que contiene tus imágenes (por ejemplo .et_pb_image) y usa la misma clase inline-buttons en la columna. El comportamiento será el mismo.

Conclusión

Alinear botones en Divi uno al lado del otro es uno de esos ajustes pequeños que tienen un impacto visual grande. Con dos líneas de CSS y una clase en la columna, pasas de botones apilados a un layout en fila profesional. El snippet es sencillo, controlado y fácil de reutilizar en cualquier proyecto. Si tienes varios sitios con Divi, guarda ese snippet en algún lugar accesible — lo vas a usar más de una vez.

🎓 ¿Quieres dominar el diseño con Divi 5 de punta a punta?
El Curso de Divi 5 completo en español te da el sistema completo paso a paso: módulos, layouts, CSS personalizado y flujo de trabajo profesional.