Cómo alinear contenido verticalmente en Divi

Entendiendo Flex y Divi

La propiedad css Flex (o Flexbox) es simplemente una forma de colocar elementos en pilas horizontales y/o verticales (algo así como una tabla). Excepto que, a diferencia de las tablas tradicionales, la propiedad flex le permite crear cuadros que se ajustan o «flexionan» según el tamaño del contenido que contiene.

Divi usa la propiedad flex cada vez que selecciona «Ecualizar alturas de columna» como su configuración de fila. Esto simplemente asegura que el tamaño de sus columnas se ajuste al tamaño de la columna con más contenido. Y dado que «Equalize Column Heights» activa el flex para el contenedor de filas, puede aprovecharlo fácilmente agregando css a sus columnas para ajustar el contenido de cada columna (o cuadro).

Por ejemplo, si agrega «margen: automático» a cualquier columna en una fila, el contenido de esa columna (ya sea uno o más módulos) se centrará verticalmente.

Además, si agrega “align-items:center;” a su fila, todas sus columnas (y su contenido) estarán centradas verticalmente.

Por supuesto, hay muchos más usos para la propiedad flex en el diseño web junto con CSS más avanzado que puede aplicar a su tema. Pero para este tutorial, quería mantener las cosas simples.

¿Es esto realmente necesario?

Técnicamente, no. Puede alinear verticalmente su contenido/módulos dentro de una columna utilizando espacios personalizados (relleno y margen). Por ejemplo, puede usar las opciones de espaciado de Divi para dar a una columna un relleno igual en la parte superior e inferior para centrar los módulos verticalmente dentro de la columna. O bien, puede agregar solo relleno superior a una columna para que el contenido se alinee en la parte inferior. Sin embargo, es posible que deba ajustar el espacio cuando actualice su página con más contenido. Además, puede ser difícil mantener esta alineación en diferentes anchos de navegador.

Entonces, si está buscando una solución para alinear contenido verticalmente sin tener que pensar en espaciado personalizado, creo que la encontrará útil.

¡Empecemos!

Cargue el diseño prefabricado en su página

Para empezar, voy a utilizar el diseño de página de la cartera de la empresa de diseño de interiores. Para obtener este diseño en su página, cree una nueva página. Luego dale un título a tu página. Haga clic en «Usar Divi Builder» y luego en «Usar Visual Builder». Luego seleccione la opción «Elegir un diseño prefabricado». A continuación, seleccione el paquete de distribución de la empresa de diseño de interiores en la ventana emergente Cargar desde biblioteca. Finalmente, seleccione la página Portafolio de la lista de diseños y haga clic en «Usar este diseño».

Una vez que el diseño se haya cargado en su página, estará listo para comenzar.

Método 1: Cómo alinear contenido verticalmente usando Flex y Auto Margin

Abra la configuración de fila de la segunda fila de la página (la que está directamente debajo de la fila con el título de la página). En la configuración de diseño, abra el grupo de opciones Tamaño y observe que «Ecualizar alturas de columna» ya está activo. Esto significa que la fila ahora tiene la propiedad flex (“display: flex;”) añadida.

Ahora vaya a la configuración de la pestaña Avanzado para la misma fila y agregue el siguiente fragmento de css en el cuadro de entrada Elemento principal de la columna 2.

Ahora el contenido de la segunda columna se ha desplazado para centrarse verticalmente.

Hacer que el contenido esté alineado en la parte inferior

Si desea que su contenido se alinee en la parte inferior para que todos los módulos se apilen en la parte inferior de su columna, puede ajustar el valor del margen de la siguiente manera:

Alineación de contenido verticalmente para todas las columnas en su fila

En lugar de agregar «margen: automático» a cada columna individualmente, también puede centrar verticalmente el contenido de todas las columnas en su fila agregando el siguiente fragmento al elemento principal de la configuración de su Fila.

O si desea que todo el contenido de sus columnas esté alineado en la parte inferior, puede agregar este fragmento:

Y no olvide que puede aprovechar la función Extender estilos de Divi haciendo clic derecho en el elemento principal con su fragmento CSS y haciendo clic en «Extender elemento principal».

Luego extienda ese elemento principal css a todas las filas de la página (o sección) para centrar verticalmente todo el contenido de cada columna de la página.

Ahora todo está centrado verticalmente.

Sin embargo, es posible que haya notado que el color de fondo de la columna blanca ya no ocupa toda la altura de la fila. Esto se debe a que agregamos «margen: automático» a la columna. Para solucionar esto, puede cambiar el color de fondo de la fila a blanco y deshacerse del relleno de la fila. Pero en su lugar, le mostraré una forma de centrar el contenido de su columna sin cambiar el margen.

Método 2: Alineación vertical del contenido usando Column Flex Direction

En el primer método, aprovechamos que se agregó la propiedad flex a la fila. Esto convirtió a cada una de nuestras columnas en una «caja flexible» que se puede alinear verticalmente simplemente ajustando el margen.

Pero también hay una forma de usar la dirección flexible para alinear el contenido de nuestra columna sin perder el efecto «Ecualizar altura de columna» que mantiene nuestras columnas (y fondos de columna) del mismo tamaño. Para hacer esto, simplemente agregaremos algunas líneas de CSS a nuestra columna para que todos los módulos dentro de la columna se apilen verticalmente y luego se centren.

Volvamos a nuestra fila en el ejemplo anterior. Abra la Configuración de fila y elimine cualquier css personalizado que pueda tener allí haciendo clic derecho en CSS personalizado y haciendo clic en «Restablecer estilos CSS personalizados»

Luego agregue el siguiente CSS en el elemento principal de la columna 2:

O si quisiera alinear el contenido en la parte inferior, simplemente cambie «justify-content: center» a «justify-content: flex-end».

Lo bueno de esta configuración es que si tengo mi contenido centrado verticalmente y hago que la fila tenga el ancho completo, el contenido permanece centrado.

Hacer desenfoques con varias cantidades de texto alineado verticalmente

Hacer que el contenido de su columna esté centrado verticalmente también puede ser útil para los anuncios publicitarios. Como sabe, no todos los anuncios publicitarios tendrán la cantidad exacta de texto que se utiliza para describir la función o el servicio. Hacer que estos anuncios publicitarios estén centrados verticalmente puede crear un diseño agradable para su diseño.

Para este ejemplo, voy a alinear verticalmente las notas publicitarias en el diseño de la página de inicio de pagos digitales.

Primero voy a agregar algunas cantidades diferentes de cuerpo de texto a los anuncios publicitarios para dar una representación más realista de cómo se vería un sitio.

Ahora, necesito ir a la configuración de fila y «Ecualizar alturas de columna».

Ahora puedo agregar mis fragmentos de CSS para alinear mi contenido y cambiar el diseño.

En la pestaña Avanzado de su Configuración de fila, podemos centrar verticalmente el contenido de nuestras columnas agregando lo siguiente en Elemento principal:

O cámbielo a lo siguiente para que estén alineados en la parte inferior.

O puede restablecer sus estilos CSS personalizados y agregar los siguientes márgenes personalizados para hacer que la primera columna se alinee en la parte inferior y la tercera columna se alinee en la parte superior.

Columna 1 Elemento principal CSS:

Columna 3 Elemento principal CSS:

¿Qué pasa con los diseños de una columna?

Técnicamente, no necesita un fragmento de css o flex para que el contenido de una columna esté centrado verticalmente. Todo lo que necesita hacer es asegurarse de tener el mismo espacio por encima y por debajo de su contenido (o módulos). La mayoría de las veces, las personas necesitan contenido centrado verticalmente en diseños con varias columnas porque quieren que el contenido adyacente se alinee perfectamente.

Muchas aplicaciones

Hay muchas aplicaciones útiles que alinean verticalmente tu contenido en Divi. Esto sería útil para encabezados con un diseño de dos columnas con el texto del encabezado en una columna y desea asegurarse de que un CTA (botón) en la otra columna esté centrado verticalmente. También sería útil para logotipos centrados verticalmente en un diseño de seis columnas (especialmente si los logotipos tienen dimensiones ligeramente diferentes).

Pensamientos finales

Aunque este método se basa en algunos pequeños fragmentos de CSS personalizado, creo que la aplicación puede ser extremadamente útil para aquellos que buscan una solución rápida a un proceso a veces engorroso. Me encantaría saber de otros ejemplos en los que esto podría ser útil.

Siéntase libre de compartir sus ideas y comentarios a continuación.

¡Salud!