El blog de | Pixel in love

Cómo alinear verticalmente el contenido de las columnas en Divi

02/05/2021 | CSS, Divi

Cómo alinea por defecto Divi

En esta entrada vamos a aprender cómo modificar la alineación vertical en Divi

Antes de nada, entendamos cómo funciona Divi. Divi funciona con cajas. Y esas cajas son estancas, se puede modificar su tamaño jugando con márgenes y rellenos, pero al cambiar el ancho del navegador podemos encontrar problemas de alineación y necesitar reajustes.

Para quitarnos ese problema de encima, vamos a enseñarte a cómo solucionarlo simplemente insertando algunas líneas de código.

Un símil para entenderlo más fácilmente, por si te puede ayudar: Cuando en word insertas una imagen automáticamente se incrusta a continuación del texto. Si quieres poder moverla, tienes que cambiar las opciones de diseño, de ese modo podrás hacer lo que decidas con esa imagen.

Esto es similar. Por defecto, el contenido que añadas a una columna automáticamente se alineará con el borde superior, así:

Alineación por defecto en Divi

Paso previo: igualar las columnas en las opciones de fila

Para poder cambiar las opciones que tienes con las columnas de tu fila, lo primero que tienes que hacer es marcar la opción Igualar la altura de las columnas en Opciones de fila > Diseño > Tamaño. De este modo le estás dando la propiedad CSS Flex (o Flexbox) a la fila y podremos modificar las propiedad de cada columna de esa fila.

Igualando la altura de las columnas en Divi

Centrando el contenido horizontalmente

Bien, ya has igualado el alto de las columnas, pero no ha pasado nada, verdad? Ahora tienes varias opciones para alinear verticalmente el contenido de tus columnas.

Lo más común será que quieras centrar el contenido de ambas columnas, así:

Columnas centradas verticalmente en Divi
Para ello, entra en los ajustes de la fila y después en los ajustes de la columna a la que quieres aplicar el centrado. Ve a la pestaña de Avanzado >  CSS personalizado, y en Elemento principal añade esta línea de código con sus espacios, sus puntos y comas…. ¡no te dejes nada!

¡Y listo!

margin: auto;
Código para centrar verticalmente en Divi

Alineando el contenido al borde inferior

Pero si lo que quieres es alinearlo con el borde inferior, así:

Contenido alineado al borde inferior en Divi

La línea de código que tienes que meter es esta (¡parece magia! pero es código  cool).

margin: auto auto 0;

Código para alinear al borde inferior en Divi

Conclusión

Si ya llevas tiempo utilizando Divi, ya sabrás que te ofrece un sinfín de posibilidades para personalizar tu diseño. Pero aun así, y pese a que los chicos de Elegant Themes siempre están añadiendo funcionalidades, a veces hay casos en los los que queremos que nuestro diseño tenga un aspecto concreto que no podemos conseguir con las opciones de Divi. Por eso siempre es útil conocer estos fragmentos de código que nos hacen la vida mas fácil y cambiar el aspecto sin recurrir a personalizaciones de código mas complejas.

¡Espero que os haya resultado de utilidad!

 

Abrir chat