Seleccionar página

Alinear botones uno al lado del otro en Divi: fácil y rápido

En este tutorial aprenderás a alinear dos botones en Divi uno al lado del otro, de una manera sencilla y rápida con algunos Snippets de CSS...

Por Jefferson M.

Ago 12, 2020

Bienvenido. 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.

Tiempo de lectura estimado: 4 minutos

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. 

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.

botones alineados uno al lado del otro en divi
botImagen: Nelson Miller.

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. Solo 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.

botones

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 realices 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 forma en que se despliegan.

.inline-buttons .et_pb_button_module_wrapper {
    display: inline-block;
    margin: 0 10px;
}

.inline-buttons {
    text-align: center !important; 
    /* Change "Center" to left or right as you need, 
    to align the buttons to the sides rather than the 
    center of the column */
}

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!

¿AÚN NO PERTENECES A NUESTRA COMUNIDAD?

Suscríbete a nuestro contenido premium y accede a cientos de recursos para aprender a diseñar web’s fantásticas con Divi

APRENDE DIVI

Accede a más de 700 contenidos especializados en Diseño web con Divi por menos de $10 USD/mes

8 Comentarios

  1. Xana

    ¿Cómo puedes hacer esto si uno de los botones es el de Añadir Al Carrito?

    Gracias

    Responder
    • Jefferson M.

      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

      Responder
  2. Oriol Carrero

    En celular no funciona.

    Responder
    • Jefferson M.

      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.

      Responder
  3. auricel coronado

    Excelente aporte Muchísimas gracias por este espacio informativo

    Responder
    • Jefferson M.

      ¡Un gusto!

      Responder
  4. Jossue

    Muchas Gracias, me sirvió muchísimo

    Responder
    • Jefferson M.

      ¡Un placer ayudar!

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *