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í:
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.
Centrando el contenido horizontalmente
Lo más común será que quieras centrar el contenido de ambas columnas, así:
¡Y listo!
Alineando el contenido al borde inferior
Pero si lo que quieres es alinearlo con el borde inferior, así:
La línea de código que tienes que meter es esta (¡parece magia! pero es código ).
[css]margin: auto auto 0;[/css]
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!