Cómo alinear vertical y horizontalmente secciones, filas, columnas y módulos en DIVI Builder

Al construir un sitio con Divi, la opción de alinear el contenido verticalmente puede ser una valiosa adición a su conjunto de herramientas de diseño. Dependiendo del diseño, es posible que sea necesario alinear el contenido verticalmente de varias maneras (centrado, inferior, superior). La necesidad más común es que el material esté alineado verticalmente. Agrega un encantador toque de espaciado simétrico a su contenido, lo cual es muy útil cuando se utilizan diseños de múltiples columnas. Además, el contenido centrado verticalmente permanece centrado en todo el ancho del navegador, lo que elimina la necesidad de márgenes o rellenos personalizados para lograr una capacidad de respuesta similar.

En esta lección, te enseñaré cómo alinear verticalmente el contenido de cualquier columna usando unas simples líneas de CSS. Para fines de demostración, usaré varios de los diseños prefabricados de Divi. No necesita preocuparse si no está familiarizado con CSS. En cuestión de segundos, podrás aplicar esto a tu diseño.

• Comprender la diferencia entre Flex y Divi
• ¿Es esto necesario?
• Agregue el diseño preconfigurado a su página.
• Método 1: Alinear verticalmente el contenido con Flex y Auto Margin
• Alinear el contenido en la parte inferior
• Alineación de contenido vertical para las columnas de su fila
• Método 2: Alinear el contenido verticalmente usando la dirección de flexión de la columna
• ¿Qué pasa con los diseños con una sola columna?
• Reflexiones finales sobre la alineación vertical y horizontal de DIVI

Comprender la diferencia entre Flex y Divi

El atributo CSS Flex (o Flexbox) es solo un medio para organizar elementos en pilas horizontales y verticales (algo así como una tabla). Sin embargo, a diferencia de las tablas típicas, la función flexible le permite crear cuadros que se "flexionan" según el tamaño del contenido que contienen.

Divi usa el atributo flexible cuando eliges "Ecualizar alturas de columna" como configuración de fila. En pocas palabras, esto garantiza que el tamaño de todas sus columnas se ajuste al tamaño de la columna con más información. Debido a que "Ecualizar alturas de columnas" activa la flexibilidad para el contenedor de filas, puede utilizarlo agregando CSS a sus columnas para alterar el contenido de cada columna (o cuadro).

Si agrega "margen: automático" a cualquier columna de una fila, por amp , el contenido de esa columna (ya sea uno o varios módulos) estará centrado verticalmente.

Todas sus columnas (y su contenido) estarán centradas verticalmente si agrega "align-items: center;" a tu fila.

Por supuesto, la propiedad flex tiene muchas más aplicaciones en diseño web y CSS más avanzado que puedes utilizar en tu tema. Sin embargo, quería mantener las cosas simples para este tutorial.

¿Es esto necesario?

En un sentido técnico, no. Puede utilizar espacios personalizados para colocar su contenido/módulos verticalmente dentro de una columna (relleno y margen). Por amp , puede usar las opciones de espaciado de Divi para centrar los módulos verticalmente dentro de la cola para darle a una columna el mismo relleno superior e inferior. También puede alinear el contenido hacia abajo agregando relleno superior a una columna. Al agregar más contenido a su página, es posible que deba modificar el espaciado. Además, mantener esta alineación en varios tamaños de navegador puede resultar problemático.

Entonces, si está buscando una manera de alinear la información verticalmente sin tener que preocuparse por el espaciado específico, creo que esto le resultará beneficioso.

¡Vamos a empezar esta fiesta!

Agregue el diseño preconfigurado a su página.

Voy a comenzar con el diseño de página del portafolio de la empresa de diseño de interiores. Cree una nueva página para tener este diseño en su página. Después de eso, dale un nombre a tu página. Seleccione "Usar Divi Builder" y luego "Usar Visual Builder" en el menú desplegable. Luego elija "Elegir un diseño prediseñado" en el menú desplegable. Luego, seleccione el paquete de diseño de la empresa de diseño de interiores en la ventana Cargar desde biblioteca. Finalmente, al seleccionar diseños, elija la página Portafolio y haga clic en "Usar este diseño".

Está listo para comenzar después de que el diseño se haya cargado en su página.

Método 1: Alinear verticalmente el contenido con Flex y Auto Margin

Abra la configuración de fila para la segunda fila (la que está directamente debajo de la fila con el título de la página). Abra el grupo de opciones Tamaño en las opciones de diseño y tenga en cuenta que "Ecualizar alturas de columnas" ya está activo; Esto significa que la propiedad flex (“display: flex;”) se ha agregado a la fila.

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

El contenido de la segunda columna ahora se ha reubicado para centrarlo verticalmente.

Alinear el contenido en la parte inferior

Puede modificar el valor del margen de la siguiente manera para que su contenido esté alineado hacia abajo de modo que todos los módulos se apilen en la parte inferior de su columna:

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

Puede centrar verticalmente el contenido de todas las columnas de su fila agregando el siguiente fragmento al elemento principal de la configuración de su fila, en lugar de agregar "margen: automático" a cada columna individualmente.

También puede utilizar este fragmento si desea que toda la información de sus columnas esté alineada en la parte inferior:

Recuerde que puede utilizar la función Extender estilos de Divi haciendo clic derecho en el elemento principal con su fragmento CSS y seleccionando "Extender elemento principal".

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

Ahora todo está equilibrado verticalmente.

Sin embargo, es posible que haya observado que el color de fondo de la columna blanca ya no cubre toda la fila debido a la adición de "margen: automático" en la columna. Puede remediar esto cambiando el color de fondo de la fila a blanco y eliminando el relleno de la fila. En cambio, te enseñaré cómo centrar el contenido de tu columna sin tener que cambiar el margen.

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

Usamos la propiedad flex agregada primero a la fila. Como resultado, cada una de nuestras columnas se convirtió en una "caja flexible" que podía alinearse verticalmente alterando el margen.

Sin embargo, podemos utilizar flex-direction para alinear el texto de nuestra columna sin sacrificar el efecto "Ecualizar altura de columna", que mantiene nuestras columnas (y los fondos de las columnas) del mismo tamaño. Para lograr esto, agregaremos algunas líneas de CSS a nuestra cola, lo que hará que todos los módulos que contiene se apilen verticalmente y luego se centren.

Volvamos a la fila del amp anterior. Al hacer clic derecho en CSS personalizado y seleccionar "Restablecer estilos CSS personalizados", puede eliminar cualquier CSS personalizado que pueda tener en la Configuración de fila.

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

Cambie "justify-content: center" a "justify-content: flex-end" para alinear el contenido hacia abajo.

Me gusta esta configuración porque si coloco mi contenido verticalmente y hago que la fila tenga todo el ancho, el contenido permanece centrado.

Hacer anuncios publicitarios alineados verticalmente con varias cantidades de texto

Centrar el contenido de las columnas verticalmente también puede ayudar con los anuncios publicitarios. Como ya sabrá, no todos los anuncios tendrán la misma cantidad de texto para describir una característica o servicio. Hacer que estos anuncios estén centrados verticalmente puede ayudar a que su diseño se vea hermoso.

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

Para crear una representación más realista de la apariencia de un sitio, primero agregaré cantidades variables de contenido corporal a los anuncios.

Ahora necesito "Ecualizar alturas de columna" en la configuración de fila.

Ahora puedo alinear mi texto y ajustar el diseño usando fragmentos de CSS.

Podemos centrar verticalmente el contenido de nuestras columnas agregando lo siguiente a la sección Elemento principal de la pestaña Avanzado de nuestra Configuración de fila:

Cámbielo a lo siguiente para alinearlos en la parte inferior.

También puede alinear la primera columna hacia abajo y la tercera columna hacia arriba restableciendo sus estilos CSS personalizados y agregando los siguientes márgenes personalizados.

 Elemento principal de la columna 1 CSS:

 Columna 3 Elemento principal CSS:

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

No necesita un fragmento de CSS ni flexibilidad para centrar verticalmente su contenido de una columna. Todo lo que tienes que hacer es asegurarte de que tu texto tenga el mismo espacio arriba y abajo (o módulos). La mayoría de los consumidores requieren contenido centrado verticalmente en diseños con muchas columnas porque quieren que el material adyacente se alinee correctamente.

Reflexiones finales sobre la alineación vertical y horizontal de DIVI

Aunque esta solución se basa en algunos fragmentos menores de CSS personalizado, creo que puede ser útil para las personas que buscan una cura rápida para un procedimiento que requiere mucho tiempo. No dude en compartir sus opiniones sobre este enfoque, así como lecciones amp de cómo le ha ahorrado tiempo y esfuerzo en el pasado.