Cómo alinear secciones, filas, columnas y módulos vertical y horizontalmente 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 kit de herramientas de diseño. Dependiendo del diseño, es posible que el contenido deba alinearse verticalmente de varias maneras (centrado, inferior, superior). La necesidad más común es que su material esté alineado verticalmente. Agrega un toque encantador de espaciado simétrico a su contenido, que es muy útil cuando se utilizan diseños de múltiples columnas. Además, el contenido centrado verticalmente permanece centrado a lo largo de los anchos del navegador, lo que elimina la necesidad de un relleno o márgenes personalizados para lograr una capacidad de respuesta similar.

En esta lección, le enseñaré cómo alinear verticalmente el contenido en cualquier columna usando unas pocas líneas simples 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á aplicar esto a su diseño.

• Comprender la diferencia entre Flex y Divi
• ¿Es esto necesario?
• Agregue el diseño preconfigurado a su página.
• Método 1: alineación vertical de contenido con margen flexible y automático
• Alinear el contenido en la parte inferior
• Alineación de contenido vertical para las columnas de su fila
• Método 2: alinear contenido verticalmente mediante 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 cajas que se "flexionan" al tamaño del contenido que contienen.

Divi usa el atributo flex cuando elige "Equalize Column Heights" como su configuración de fila. En pocas palabras, esto asegura que el tamaño de todas sus columnas se ajusta al tamaño de la columna con la mayor cantidad de información. Debido a que "Equalize Column Heights" activa la flexibilidad para el contenedor de filas, puede usarlo agregando CSS a sus columnas para alterar el contenido de cada columna (o cuadro).

Si se agrega “margen: auto” a cualquier columna de una fila, por ej amp le, el contenido de esa columna (si se trata de uno o varios módulos) estarán centradas 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 puede utilizar en su tema. Sin embargo, quería simplificar las cosas para este tutorial.

¿Es esto necesario?

En un sentido técnico, no. Puede usar un espaciado personalizado para colocar su contenido / módulos verticalmente dentro de una columna (relleno y margen). Para ex amp le, puede utilizar opciones de espaciado de Divi para centrar el módulo (s) verticalmente dentro de la cola para dar una columna equivalente superior y el relleno inferior. También puede alinear el contenido en la parte inferior 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.

Por lo tanto, si está buscando una forma de alinear la información verticalmente sin tener que preocuparse por el espaciado específico, creo que lo encontrará beneficioso.

¡Vamos a empezar esta fiesta!

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

Comenzaré con el diseño de la 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 Interior Design Company en la ventana Cargar desde biblioteca. Finalmente, desde la selección de 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: alineación vertical de contenido con margen flexible y automático

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 de Tamaño en las opciones de diseño y observe que "Equalize Column Heights" 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 que esté centrado verticalmente.

Alinear el contenido en la parte inferior

Puede modificar el valor del margen de la siguiente manera para que su contenido se alinee en la parte inferior 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 en su fila agregando el siguiente fragmento al elemento principal de la configuración de la fila, en lugar de agregar "margin: auto" a cada columna individualmente.

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

Recuerde que puede usar la función Extender estilos de Divi haciendo clic con el botón derecho en el elemento principal con su fragmento de 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 la columna de "margin: auto". Puede remediar esto cambiando el color de fondo de la fila a blanco y quitando el relleno de la fila. En cambio, le enseñaré cómo centrar el contenido de su columna sin tener que cambiar el margen.

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

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

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

Volvamos a la ex anterior amp fila del archivo. Al hacer clic con el botón 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 en la parte inferior.

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

Realización de desenfoques alineados verticalmente con distintas cantidades de texto

Hacer que el contenido de sus columnas esté centrado verticalmente también puede ayudar con los borradores. Como ya sabrá, no todas las propagandas tendrán la misma cantidad de texto para describir una función o servicio. Hacer estos desenfoques centrados verticalmente puede ayudar a que su diseño se vea hermoso.

Los pagos para el Hogar Digital Diseño de página, voy a alinear verticalmente las propagandas de este ex amp le.

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

Ahora necesito "Ecualizar las alturas de las columnas" en la configuración de las filas.

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

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

También puede hacer que la primera columna esté alineada en la parte inferior y la tercera columna en la parte superior restableciendo sus estilos CSS personalizados y agregando los siguientes márgenes personalizados.

 Columna 1 Elemento principal CSS:

 Columna 3 Elemento principal CSS:

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

No necesita un fragmento de CSS o flex para obtener su contenido de una columna centrado verticalmente. Todo lo que tienes que hacer es asegurarte de que tu texto tenga el mismo espaciado 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 pequeños fragmentos 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 amp de cómo le ha ahorrado tiempo y esfuerzo en el pasado.