La capacidad de alinear verticalmente el contenido al crear un sitio con Divi puede ser una adición útil a su herramienta de diseño. A veces, una determinada disposición exige que el contenido está alineado verticalmente de diferentes maneras (centrado, abajo, arriba). La necesidad más común es centrar su contenido verticalmente.

Proporciona un delicioso toque de espaciado simétrico que resulta útil cuando se utilizan varios diseños de columnas para su contenido. Además, el contenido centrado verticalmente permanece centrado en diferentes anchos de navegador, lo que elimina la molestia de aplicar relleno o márgenes personalizados para lograr una capacidad de respuesta similar.

En este tutorial, le mostraré cómo agregar algunos fragmentos pequeños de CSS a cualquier columna para alinear verticalmente el contenido. Voy a utilizar algunos de los diseños prefabricados de Divi para ver ejemplos de cómo hacer esto. Si no sabe mucho sobre CSS, no tiene que preocuparse. Será bastante fácil de aplicar a sus propios diseños en segundos.

Comprender Flex y Divi

La propiedad css Flex (o Flexbox) es simplemente una forma de colocar elementos en pilas horizontales y / o verticales (muy parecido a una tabla). Excepto que, a diferencia de las tablas tradicionales, la propiedad flexible le permite crear cuadros que se ajustarán al tamaño del contenido que contiene.

Divi utiliza la propiedad flex cada vez que selecciona "Ecualizar alturas de columna" como parámetro de fila. Esto simplemente garantiza que el tamaño de sus columnas se ajustará al tamaño de la columna con mayor contenido. Y dado que "Ecualizar alturas de columnas" habilita la flexibilidad para el contenedor de filas, puede aprovecharlo fácilmente agregando CSS a sus columnas para ajustar el contenido de cada columna (o área).

Por ejemplo, si agrega "margin: auto" a una 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 línea, todas sus columnas (y su contenido) se centrarán verticalmente.

Por supuesto, existen muchos otros usos para la propiedad Flex en el diseño web, así como CSS más avanzado que puede aplicar a su tema. Pero para este tutorial, quería que fuera simple.

¿Es realmente necesario?

Técnicamente, no. Puede alinear verticalmente su contenido / módulos en una columna usando un espaciado personalizado (relleno y margen). Por ejemplo, puede usar las opciones de espaciado de Divi para dar una columna igual al relleno superior e inferior para centrar los módulos verticalmente en la columna. También puede agregar solo relleno superior a una columna para alinear el contenido inferior. Sin embargo, es posible que deba ajustar el espaciado cuando actualice su página con más contenido. Además, puede resultar 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 el espaciado personalizado, creo que le resultará útil.

¡Empecemos!

Cargue el diseño predefinido en su página

Para empezar, usaré el diseño de la gama de portafolios 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 "Elija un diseño básico". A continuación, seleccione el kit de diseño de Interior Design Company 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".

plantilla divi tema wordpress.png

Una vez que el diseño se carga en su página, está listo para comenzar.

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

Abra la configuración de línea para la segunda línea de la página (la que está directamente debajo de la línea con el título de la página). En la configuración de diseño, abra el grupo de opciones de tamaño y observe que "Igualar alturas de columna" ya está activo. Esto significa que la línea ahora tiene la propiedad flex ("display: flex;") agregada.

armoniza las alturas de las columnas.png

Ahora vaya a la configuración de la pestaña Avanzado para la misma fila y agregue el siguiente fragmento de CSS debajo del cuadro de entrada del elemento principal de la columna 2.

marginauto;

automatic margin divi.png

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

Haga que el contenido más bajo esté alineado

Si desea alinear su contenido 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:

marginauto 0;

margin divi line.png

Alineación vertical del contenido para todas las columnas de su fila

En lugar de agregar "margin: auto" 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.

align-items: center;

alinear elementos divi.png

O si desea que todos los contenidos de sus columnas estén alineados en la parte inferior, puede agregar este extracto:

align-items: flex-end;

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".

extender elemento principal.png

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

expanda estilos en divi.png

Ahora todo está centrado verticalmente.

apariencia de los cambios divi.png

Sin embargo, es posible que haya notado que el color de fondo de la columna blanca ya no cubre toda la altura de la fila. Esto se debe a que agregamos "margin: auto" a la columna. Para resolver este problema, puede cambiar el color de fondo de la línea a blanco y quitar el relleno de la línea. Pero en cambio, le mostraré una forma de centrar el contenido de su columna sin cambiar el margen.

Método 2: alinear el contenido verticalmente usando la dirección de flexión de la columna

En el primer método, aprovechamos la propiedad flex agregada a la fila. Esto hizo que cada una de nuestras columnas fuera una “caja flexible” que se podía alinear verticalmente simplemente ajustando el margen.

Pero también hay una forma flexible de alinear el contenido de nuestra columna sin perder el efecto "Equalize Column Height" 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 en la columna se apilen verticalmente y luego se centren.

Volvamos a nuestra línea del 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 debajo de la columna 2, elemento principal:

pantalla: flex; dirección flexible: columna; justificar-contenido: centro;

Dirección flex-column.png

O, si quisiera alinear el contenido en la parte inferior, simplemente reemplace "Justificar el contenido: centro" con "justifique el contenido: flex-end".

flex alineación end.png

Lo bueno de esta configuración es que si mi contenido está centrado verticalmente y se alcanza el ancho de la fila, el contenido permanece centrado.

apariencia de boxes.png

Hacer desenfoques (Resumen) con diferentes 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 contendrán la cantidad exacta de texto que se usa para describir función o servicio. Centrar estos anuncios publicitarios verticalmente puede crear un hermoso diseño para su diseño.

Para este ejemplo, alinearé verticalmente los anuncios publicitarios con el diseño de la página de inicio de Pagos digitales.

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

alineación de blorbds.png

Ahora tengo que ir a la configuración de línea y "Armonizar alturas de columna".

harmonize columns.png

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

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

align-items: center;

Modificar la alineación del contenido divi.png

O cámbialo siguiendo para alinearlos.

align-items: flex-end;

alineación en la parte inferior divi.png

También puede restablecer sus estilos CSS personalizados y agregar los siguientes márgenes personalizados para alinear la primera parte inferior de la columna y la tercera parte superior alineada.

Elemento principal de CSS de la columna 1:

marginauto auto 0;

Elemento principal de CSS de la columna 3:

margin0 auto auto;

personalizar la alineación de resúmenes divi.png

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

Técnicamente, no necesita ningún CSS o fragmento flexible para centrar verticalmente el contenido de su columna. 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, los usuarios necesitan contenido vertical centrado en diseños con múltiples columnas porque quieren que el contenido adyacente se alinee perfectamente.

Eso es todo por este tutorial que le muestra cómo alinear elementos en la misma línea en Divi.