Alinear dos 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

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 que podrás obtener en la parte inferior de este tutorial.

Las llamadas a la acción o call to action tienen muchísimo uso en botones de páginas web, pero no siempre tenemos uno solo. 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. Si necesitas poner botones uno al lado de otro en la misma columna, con un poco de CSS y este tutorial lo lograrás.

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.

.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 */
}


Ahora, en la configuración de la fila que contendrá los botones, debes ir a la pestaña de Avanzado y agregar la clase que creaste. Para una una fila con una sola columna, escribe la siguiente clase CSS en CSS ID:

inline-buttons

botones

Para una fila con múltiples columnas escribe inline-buttons en cada columna en la cual necesites los botones.

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? ¡Coméntanos!

¿Te gustó? ¡Compártelo en redes sociales!

¿Quieres aprender a usar Divi de manera profesional?

Conoce nuestro contenido premium y comienza hoy mismo a llevar tu sitio web o el de tus clientes a otro nivel

¿Te gustó este contenido?

Conoce nuestro contenido premium y aprende a crear sitios web geniales, modernos y potentes.

Post relacionados:

0 comentarios

Enviar un comentario

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

Shares