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:

Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros. Accede a todo nuestro contenido desde $12/mes*
Transforma tu carrera con UXDIVI
Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros

Accede a todo nuestro contenido desde US $12/mes*
Transforma tu carrera con UXDIVI
  • 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!

Artículos relacionados

Comentarios

¡Registrate en nuestro próximo Live!
12 de ENERO de 2024 9:30 hrs (CDMX)
En este evento exclusivo, abordaremos las preguntas sobre ecommerce en Divi, además de responder a cualquier otra pregunta que nuestros suscriptores de la academia tengan en mente.
0
días
0
horas
0
minutos
0
segundos
¡Registrate en nuestro próximo Live!
12 DE ENERO DE 2024 9:30 HRS (CDMX)
0
días
0
hrs
0
min
0
seg
25% OFF BLACK FRIDAY SALE!
Del 24 al 30 de noviembre 2023 descuentos por:
¿Aún no eres miembro Premium ⭐ de UXDivi? ¡Esta es tu oportunidad de oro! Únete a nuestra comunidad de expertos en Divi y disfruta de recursos exclusivos, tutoriales avanzados, y una red de profesionales al alcance de tu mano.
0
días
0
horas
0
minutos
0
segundos
25% OFF BLACK FRIDAY SALE!
0
días
0
hrs
0
min
0
seg
Aprovecha un DESCUENTO DEL 25% en tu suscripción Premium. ¡Solo durante Black Friday!
0
días
0
hrs
0
min
0
seg
Aprovecha un DESCUENTO DEL 25% ¡Solo durante Black Friday!
¡Únete a nuestro próximo Live mensual de Preguntas y Respuestas el viernes 12 de enero de 2024! Separa tu cupo GRATIS AQUÍ →
¡Únete a nuestro próximo Live mensual de Preguntas y Respuestas el viernes 12 de enero de 2024! Separa tu cupo GRATIS AQUÍ →