Cómo igualar el tamaño de varios botones en Divi

Cuando estás creando una página en WordPress y Divi, es muy habitual crear varios botones seguidos, especialmente si estás creando un listado de enlaces o un menú.

El problema de los botones en Divi es que, por defecto, su tamaño depende del largo de texto que contienen. Y esto provoca un efecto bastante feo si quieres añadir varios botones seguidos a tu sitio.

Y aunque solucionarlo es bastante sencillo, hay muchas personas que no conocen este truco y muestran páginas con contenido desigual como el que te enseño a continuación.

Cuando los botones en divi no están alineados

Uno de los ejemplos más evidentes para ver varios botones seguidos es en una página de enlaces para tu biografía. Si no sabes de qué te hablo en el enlace tienes un ejemplo completo.

Por defecto, al crear un bloque de botones en divi vas a tener algo así:

lista de botones visualmente desordenada

Como se puede observar a simple vista, y aunque cumpliría su finalidad, si quieres dar una buena primera impresión, no lo puedes dejar así.

Corrección con 2 líneas de CSS

Como te he dicho más arriba la solución es bien sencilla, y tan solo tendrás que añadir siguientes líneas de código en la pestaña avanzado de las opciones del botón.

min-width: 450px;
text-align:center;

Con estas dos líneas le estamos diciendo al navegador, que el botón tenga como mínimo 450px de ancho y que lo alinee al centro de la pantalla.

Ajustes del botón > Avanzado > Elemento principal

Opciones avanzadas botón divi

Como puedes observar el resultado ya ha cambiado bastante.

botones divi con anchos igualados

Cuidado con la versión móvil.

¡Ojo!

El código que te he entregado estamos indicando que el botón tenga un ancho mínimo de 450px.

Para muchos dispositivos no habrá ningún problema, pero ten en cuenta que no he añadido ninguna propiedad para móvil.

Esto hará que al ver la página en un móvil de 375px (cómo un iphone 11 pro), el contenido sobresalga por la derecha.

Para solucionarlo bastará con añadir una pequeña regla al botón para que se vea de otra forma cuando estemos visualizando el contenido desde un móvil.

En la siguiente imagen verás cómo se ha solucionado el problema del móvil dándole al botón un tamaño en % y no en px.

De esta manera el botón tendrá siempre el tamaño del 100% de la pantalla que lo contiene.

O dicho de otra manera, se adaptará a todas las pantallas de teléfonos móviles sea cual sea el tamaño de su pantalla.

Conclusión

Ya ves como es muy sencillo adaptar e igualar el tamaño de los botones en divi a las pantallas de casi todos los dispositivos del mercado.

Recuerda que en tu caso particular puede que no te sirvan las medidas que yo he utilizado y tengas que jugar para funcione en tu proyecto.

como igualar los botones en divi

Recuerda usar los tamaños en px o en % según el dispositivo o tus necesidades.

Por último puedes visitar mi página de enlaces y verás el resultado final de este ejemplo.

También la puedes ver aquí mismo.

pagina de enlaces divi

Si te ha parecido interesante este artículo estaré muy feliz de leerte en los comentarios.

Un saludo

Francisco Sánchez

Francisco Sánchez

Diseño web especializado en conversiones. Fundador Nomadwebs.com Mi propósito es acompañar a emprendedores y Pymes en la digitalización de negocios utilizando el diseño web, estrategias de marketing digital y embudos de venta.

0 comentarios

Enviar un comentario

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

Te puede interesar

Qué es Divi y como utilizarlo en tu negocio **Actualizado 2022**

Qué es Divi y como utilizarlo en tu negocio **Actualizado 2022**

Diseñar una página web nunca había sido tan fácil como ahora gracias a los constructores visuales como Divi para WordPress. (Todavía recuerdo el final de la década de los 90, cuando realicé mi primera página web). ¡Que diferente que era! Llámame viejuno si quieres 😉,...

Los 3 elementos para tener una página web de éxito

Cuando empiezas un proyecto digital, lo normal es que comiences realizando una página web. A pesar de ello, no siempre se la da la importancia que debería y los proyectos suelen no salir como a uno le gustaría. El problema más habitual que tienen la mayoría de...

Cómo crear una sección de título en pantalla completa con Divi

Cómo crear una sección de título en pantalla completa con Divi

Muchas personas me habéis preguntado cómo hago para establecer una sección a pantalla completa con Divi. Así que he decidido explicároslo con unos sencillos pasos. Te sorprenderá lo fácil que resulta hacerlo. Cuando quieres establecer una sección a pantalla completa...