Cómo alinear verticalmente el contenido en Divi

La capacidad de alinear contenido verticalmente al construir un sitio con Divi puede ser una adición conveniente a su cinturón de herramientas de diseño. A veces, un diseño determinado requiere que el contenido se alinee verticalmente de diferentes maneras (centrado, inferior, superior). La necesidad más común es tener su contenido centrado verticalmente. Proporciona un toque delicioso de espaciado simétrico que realmente resulta útil cuando se utilizan diseños de múltiples columnas para su contenido. Además, el contenido centrado verticalmente permanece centrado en diferentes anchos de navegador, lo que elimina el trabajo duro de aplicar relleno o márgenes personalizados para obtener una capacidad de respuesta similar.

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

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” al tamaño del contenido que contiene.

Divi usa la propiedad flex siempre que selecciona "Equalize Column Heights" como su configuración de fila. Esto simplemente asegura que el tamaño de sus columnas se ajustará 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 "margin: auto" a cualquier columna de 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 un espaciado personalizado (relleno y margen). Por ejemplo, puede usar las opciones de espaciado de Divi para dar a una columna el mismo relleno superior e inferior para centrar el (los) módulo (s) verticalmente dentro de la columna. O puede agregar solo relleno superior a una columna para alinear el contenido en la parte 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.

Por lo tanto, 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 prediseñado en su página

Para empezar, voy a utilizar el diseño de página del portafolio 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 prediseñado". A continuación, seleccione el paquete 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".

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

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

Abra la configuración de la 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 de Tamaño y observe que "Equalize Column Heights" ya está activo. Esto significa que la fila ahora tiene la propiedad flex ("display: flex;") agregada.

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.

margin: auto;

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 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:

margin: auto auto 0;

Alinear contenido verticalmente 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 la fila.

align-items: center;

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

align-items: flex-end;

Y no olvide que puede aprovechar la función Extender estilos de Divi haciendo clic con el botón 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 abarca toda la altura de la fila. Esto se debe a que agregamos "margin: auto" 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 cambio, le mostraré una forma de centrar el contenido de su columna sin cambiar el margen.

Método 2: alineación vertical de contenido mediante la dirección de flexión de columna

En el primer método, aprovechamos la propiedad flex que se agregó 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 "Equalize Column Height" que mantiene nuestras columnas (y fondos de columna) del mismo tamaño. Para hacer esto, simplemente vamos a agregar 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 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 en el elemento principal de la columna 2:

display: flex;
flex-direction: column;
justify-content: center;

O si quisiera alinear el contenido hacia abajo, 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 la fila de ancho completo, el contenido permanece centrado.

Realización de 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 borradores. Como sabe, no todas las propagandas tendrán la cantidad exacta de texto utilizada para describir la función o el servicio. Hacer estos desenfoques centrados verticalmente puede crear un diseño agradable para su diseño.

Para este ejemplo, alinearé verticalmente los anuncios 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 para dar una representación más realista de cómo se vería un sitio.

Ahora, necesito ir a la configuración de filas 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:

align-items: center;

O cámbielo a lo siguiente para alinearlos hacia abajo.

align-items: flex-end;

O puede restablecer sus estilos CSS personalizados y agregar los siguientes márgenes personalizados para alinear la primera columna hacia abajo y alinear la tercera columna hacia arriba.

Columna 1 Elemento principal CSS:

margin: auto auto 0;

Columna 3 Elemento principal CSS:

margin: 0 auto auto;

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

Técnicamente, no necesita un fragmento de CSS o flex para obtener el contenido de una columna 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 su contenido en Divi. Esto sería útil para los 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 centrar los logotipos 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 conocer otros ejemplos en los que esto pueda resultar útil.

No dude en compartir sus ideas y comentarios a continuación.

¡Salud!