Alinear botones uno al lado del otro en Divi: fácil y rápido
Este tutorial te permitirá alinear dos botones en Divi uno al lado del otro, de forma fácil y rápida, utilizando algunos Snippets de CSS que podrás conseguir en la parte inferior de este tutorial.
Dentro de las aplicaciones que podrás darle a esta personalización se encuentra la alineación de elementos como:
- Botones CTA.
- Imágenes en miniatura.
- Distintos elementos en una sola línea.
Índice
Vamos a centrarnos en los CTA, ya que es el caso más común. Tus botones de llamada a la acción o call to action (CTA) son de suma relevancia en las páginas web. Estos indican cuál es el siguiente paso que debe seguir el usuario.
Este snippet debes agregarlo en el archivo style.css si usas un child theme. Si usas un tema padre, debes agregarlo en CSS personalizado, en la pestaña de “Avanzado” en la configuración de Divi. Únicamente debes editar “left” o “right” si deseas cambiar la alineación de los botones.
Asignar la clase
En el Divi Builder, los módulos de texto toman el 100% del espacio en la columna donde los agregamos, y los siguientes módulos que agreguemos se verán debajo.
Para poder realizar esta acción es necesario añadir una clase a la columna con la que vas a trabajar ajustes de la columna>Fila>Configuración> Opciones de la columna>Avanzado>Clase CSS inline-buttons.
Para una fila con una sola columna, escribe la siguiente clase CSS en CSS ID: inline-buttons.
Para una fila con múltiples columnas debes escribir inline-buttons
en cada una de las columnas en las que necesites los botones.
Una vez que efectúes este paso, no verás ninguna modificación en la forma en que se encuentran colocados tus botones.
Añadir código CSS personalizado
Para el siguiente paso existen dos rutas. Puedes elegir entre personalizar todo el sitio web o solo la página en la que estás trabajando.
Alinear botones en todo el sitio web:
Para este caso, el fragmento CSS debe insertarse en Divi a través de Escritorio > Divi > Opciones del tema.
Una vez en opciones del tema se inserta el snippet en la parte de abajo.
Alinear botones en una página específica:
Para realizar esto, debes seguir los siguientes pasos: Ventana de la página > Avanzado > CSS personalizado
Una vez que realices cualquiera de las dos opciones verás el cambio de manera automática.
Para cambiar la alineación de los botones solo debes editar «left» o «right». También puedes cambiar el margen y la manera en que se despliegan.
.inline-buttons .et_pb_button_module_wrapper {
display: inline-block;
margin: 0 10px;
}
.inline-buttons {
text-align: center !important; /* cambia"Center" a "left" o "right" si quieres la que alineación sea a la izquierda o derecha */
}
Si deseas otras modificaciones a los botones como color de fondo, texto del botón, borde, espacio entre letras y otros, puedes hacerlo directamente en: botón configuración.
Dudas que pueden surgir
¿Esto funciona en el móvil?
R: Sí. Si no ves el cambio, puede ser a causa del tamaño de los botones y necesites modificarlos. También puedes disminuir la separación entre ellos.
¿Cómo puedo colocar imágenes en miniatura?
R: Se debe reemplazar la clase del botón por una clase CSS personalizada para cada imagen.
Tips adicionales para botones de call to action
- Sé breve. No es mucho el texto que cabe en un botón, así que aprovéchalo al máximo.
- Usa un verbo. Sobre todo los verbos de acción que incitan al lector a realizar algo que deseas que hagan. Ejemplos: Regístrate, comienza, aplica, compra, descarga, únete.
- Haz que el botón tenga suficiente contraste con el diseño. Esto evitará confusiones y además llamará la atención del usuario. ¿Cómo voy a hacer clic en un botón si no puedo notar que es un botón?
- Asegúrate de que la o las palabras del CTA sean consistentes con la oferta, que cumpla con lo que promete.
- Suelen funcionar bien las frases escritas en imperativo, es decir, “mandando” al usuario, por ejemplo: Descarga ya la guía, Obtén el libro, etc.
- El botón no debe interrumpir el diseño, pero sí debe estar bien ubicado para que llame la atención y siga el flujo natural de lectura del usuario.
¿Te sirvió este tutorial? ¿Tienes alguna duda o inquietud? ¡Coméntanos!
¿Cómo puedes hacer esto si uno de los botones es el de Añadir Al Carrito?
Gracias
Al ser una clase CSS diferente no se puede aplicar este tutorial. En este caso puedes probar con la clase particular del botón de añadir a carrito que es: .single_add_to_cart_button
En celular no funciona.
Hola Oriol, de hecho si funciona, solo debes cambiar el relleno en altura y ancho de ambos botones a 10px y 20px respectivamente, con eso verás los botones uno al lado del otro en móvil.
Excelente aporte Muchísimas gracias por este espacio informativo
¡Un gusto!
Muchas Gracias, me sirvió muchísimo
¡Un placer ayudar!
Muchas gracias Jefferson. Solo una duda, en el caso que sean iconos en vez de botones, que cambio debo realizar en el CSS.
De antemano muchas gracias!!!
Que tal Carlos, en ese caso sería bueno usar la propiedad flex para colocar los elementos uno al lado del otro. Puedes ver como la usamos en una de las columnas en este tutorial: https://uxdivi.com/tutorial-premium/theme-builder/menus/menu-7-theme-builder-de-divi-ecommerce-menu