En muchas ocasiones queremos crear un conjunto de botones en Divi, para construir un menú, por ejemplo, y si los textos de los botones tienen longitudes diferentes, queda bastante feo. Particularmente cuando la diferencia entre ellos es importante. Al ordenarlos verticalmente es cuando más se nota esta diferencia.
Para resolverlo te propongo este sencillo ajuste en CSS que igualará el tamaño de todos los botones a la dimensión que tu prefieras. Tal y como te muestro en esta ilustración.
El método consiste en añadir un par de lineas de CSS a los ajustes del botón en Divi. En concreto tendrás que aplicar este procedimiento a cada uno de los botones que quieras igualar.
Abre los ajustes del primer botón y dirígete a la pestaña de Avanzado. Después ve al apartado de CSS Personalizado. Dentro de él busca el campo Elemento Principal y añade el siguiente código CSS:
min-width: 450px;
text-align:center;
Donde he puesto min-widht: 450px; es donde debes jugar con diferentes valores para el ancho en píxeles. También puedes jugar con valores relativos como % o unidades em y rem en lugar de píxeles pero puede que te resulte algo más complejo. Te recomiendo ajustar esta dimensión con el botón del grupo que tenga una longitud mayor para que el resto se iguale con este.
Una vez identificado el valor de tamaño adecuado usa el mismo código en el resto de botones, siguiendo el mismo procedimiento, y habrás cumplido tu objetivo.
Un último consejo, recuerda verificar cómo se ve este ajuste en la versión móvil y modificarlo si fuera necesario. En algunas ocasiones puede que te sea necesario crear una sección habilitada exclusivamente para móviles con un contenido que sustituya al anterior.
En 3ymedia publicamos regularmente contenidos sobre diseño web para WordPress con Divi, te invito a echarles un vistazo. Si aun no tienes tu licencia de Divi te invitamos a adquirirla a través del siguiente enlace de afiliado. Te costará lo mismo y mi me darás una alegría 😀
