Cómo alinearse verticalmente con el sistema de diseño FlexBox de Divi 5

Crear diseños visualmente equilibrados y receptivos es esencial en el diseño web moderno, y el nuevo sistema de diseño FlexBox de Divi 5 hace que sea más fácil que nunca lograr la alineación vertical. Esta nueva y poderosa característica permite a los usuarios de Divi diseñar diseños dinámicos flexibles, que ofrecen un control completo sobre el posicionamiento vertical. Ya sea alinear el texto dentro de una sección, equilibrar el contenido en filas de múltiples columnas o crear diseños receptivos, Divi 5 simplifica el proceso con controles intuitivos incorporados directamente en el Visual Builder.

En esta publicación, lo guiaremos a través de los pasos para dominar la alineación vertical, proporcionaremos ejemplos del mundo real y ofreceremos consejos para crear diseños receptivos y pulidos. Exploremos cómo el sistema de diseño FlexBox de Divi 5 puede transformar su enfoque para la alineación vertical.

Comprender el sistema de diseño FlexBox de Divi 5

Flexbox, o diseño de caja flexible, es un modelo de diseño CSS diseñado para simplificar la disposición de elementos dentro de un contenedor, lo que lo hace ideal para la alineación horizontal y vertical. A diferencia de los métodos tradicionales como flotadores o márgenes, Flexbox proporciona un enfoque directo para organizar el contenido. Permite que los elementos ajusten dinámicamente su tamaño, orden y alineación en función de las dimensiones del contenedor y la ventana gráfica, asegurando que los diseños sean consistentes y receptivos en todos los tamaños de pantalla.

Con FlexBox, puede centrar el contenido sin esfuerzo, distribuir espacio de manera uniforme o acumular elementos en un orden específico. Esta flexibilidad lo hace imprescindible para los diseñadores web, y Divi 5 aprovecha su poder para permitir a los usuarios crear diseños sofisticados sin necesidad de conocimiento avanzado de CSS.

Cómo Divi 5 integra flexbox

Divi 5 ha introducido recientemente su sistema de diseño FlexBox. Este sistema integra FlexBox directamente en el Visual Builder, lo que permite a los usuarios controlar las disposiciones de sección, fila, columna y módulo con configuraciones intuitivas.

Las características clave incluyen una variedad de nuevas plantillas de fila, desde columnas individuales hasta secciones de múltiples filas, lo que hace que sea más fácil que nunca construir diseños en Divi.

Los controles Flexbox de Divi 5 le permiten controlar la dirección de sus diseños, ajustar los huecos horizontales y verticales, justificar el contenido al inicio, el centro o el extremo, habilitar envoltura y más.

La característica de estructura de la columna New Change de Divi 5 le brinda más control sobre cómo se comportan las columnas en dispositivos más pequeños. Puede cambiar fácilmente la cantidad de columnas o reordenarlas, haciendo que los diseños se vean muy bien en cualquier tamaño de pantalla.

Divi 5 se aleja de las secciones especializadas y de ancho completo, ya que las filas ahora pueden anidarse entre sí para crear diseños complejos y receptivos sin depender de tipos de sección obsoletos. Estos avances hacen que el sistema de diseño FlexBox de Divi 5 sea una herramienta poderosa para construir diseños modernos y adaptables directamente dentro del constructor.

Establecer alineación vertical en Divi 5

El sistema de diseño FlexBox de Divi 5 está integrado sin problemas en el Visual Builder, lo que hace que sea accesible para que los usuarios creen diseños flexibles y receptivos. Para comenzar, abra el Visual Builder en una página nueva o existente y agregue una sección y fila. Hemos creado un diseño completo para que podamos recorrer los pasos para alinear los elementos verticalmente en varios escenarios.

Alineación vertical en una sección

En la configuración de la sección, navegue hasta la pestaña de diseño y ubique las opciones de diseño , donde encontrará los controles FlexBox.

Asegúrese de que Flex se seleccione bajo estilo de diseño . Esto asegura que Flexbox esté habilitado para la sección.

Por defecto, Start (Flex-Start) se selecciona en Justify Content . Esto alinea todos los elementos al comienzo del contenedor. En este ejemplo, cuando desea centrar elementos verticalmente, puede optar por alinearlos con el centro , el espacio alrededor o el espacio de manera uniforme . Dado que tenemos una sola fila con una fila anidada incluida, todos los elementos de diseño en nuestra sección se centrarán verticalmente con cualquier opción mencionada anteriormente.

Alineación vertical en una fila

También puede alinear verticalmente el contenido en el nivel de fila. Sin embargo, en este ejemplo, usaremos elementos alineados en lugar de justificar el contenido para alinear verticalmente los módulos dentro de la fila. En la pestaña de diseño para la fila, ubique la configuración de diseño . Asegúrese de habilitar Flex y encontrar la configuración de alineación de elementos . Por defecto, se selecciona Start , y esto alinea todos los módulos en la fila a la parte superior del contenedor.

Hay algunas opciones dependiendo de cómo desee alinear los elementos. Elija Center si desea que los artículos en la fila se centren verticalmente. Al elegir Fin, todos los elementos se alinearán hasta la parte inferior de la fila. El estiramiento hace que todos los artículos llenen la altura de la fila.

Alineación vertical en secciones de múltiples filas

En este escenario, tenemos tres filas en una sección, incluida una fila de una sola columna y dos filas de tres columnas. Utilizaremos la configuración de contenido de Justify para alinear verticalmente todo el contenido dentro de las filas.

Cuando una sección usa columnas como dirección de diseño, Justify Content alineará verticalmente sus filas. El inicio se selecciona de forma predeterminada. Alinea todas las filas a la parte superior de la sección. Las filas se empacarán, comenzando desde el borde superior. El centro alinea todas las filas en la sección verticalmente. Las filas se empacarán juntas desde el borde inferior. Cuando elige el final , todas las filas se alinean hasta la parte inferior de la sección. Las filas se unirán, comenzando desde el borde inferior.

El espacio entre distribuye las filas uniformemente a lo largo del eje principal (vertical). La primera fila será al ras contra la parte superior de la sección, la última fila contra la parte inferior, y cualquier fila en el medio tendrá una cantidad igual de espacio que los separa. El espacio alrededor distribuye las filas con el mismo espacio alrededor de cada elemento.

El espacio entre las filas adyacentes será el doble del espacio en los extremos de las filas (el espacio entre la primera fila y la parte superior de la sección, y el espacio entre la última fila y la parte inferior de la sección). Finalmente, el espacio de manera uniforme es similar al espacio alrededor, pero asegura que el espacio entre cada fila sea el mismo, y el espacio al principio y al final de la sección también es igual a ese espacio.

Alineación vertical en grupos de módulos

El sistema FlexBox de Divi 5 también simplifica la alineación vertical dentro de los grupos de módulos, especialmente cuando se usa características como el buque de bucle para contenido dinámico. Considere un grupo de módulos que muestra publicaciones de blog con una imagen, título de publicación, extracto de publicación y un botón. Sin una alineación adecuada, los elementos como los botones pueden parecer desalineados en las columnas. En versiones Divi anteriores, esto requirió alturas de columna iguales y CSS personalizados. Divi 5 optimiza este proceso con FlexBox.

Para alinear elementos, haga clic en la primera columna del grupo de módulos, navegue hasta la pestaña de diseño y ubique la configuración Flex. Establezca el contenido de Justify en el espacio entre . Esto distribuye uniformemente los módulos dentro de la columna, alineando perfectamente las lecturas más botones en todas las columnas sin CSS personalizados. Este enfoque garantiza diseños consistentes y profesionales para contenido dinámico como cuadrículas de blogs o listados de productos.

Descargar los archivos

Descargar gratis

Únase al boletín Divi y le enviaremos una copia del último paquete de diseño de la página de destino de Divi, además de toneladas de otros recursos, consejos y trucos de Divi increíbles y increíbles. Sigue y serás un Divi Master en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en Descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscrito con éxito. ¡Consulte su dirección de correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales de Divi gratuitos!

Consejos para la alineación vertical receptiva

El sistema de diseño FlexBox de Divi 5 facilita el contenido de alineación vertical, pero hay algunos consejos a considerar. Divi 5 ofrece herramientas robustas para un diseño receptivo, lo que le permite ajustar la alineación vertical en todos los dispositivos. Ya sea que esté centrando contenido en una sección de héroes o alineando botones en un diseño de múltiples columnas, los siguientes consejos lo ayudarán a aprovechar las características de Divi 5 para mantener diseños consistentes y profesionales.

Utilice los puntos de interrupción sensibles de Divi 5

El sistema FlexBox de Divi 5 le permite personalizar el pedido y la alineación de los módulos para diferentes tamaños de pantalla, asegurando que sus diseños se adapten a todos los tamaños de pantalla. En Visual Builder, puede usar siete puntos de interrupción sensibles a personalizables para controlar cómo aparecen los diseños en los dispositivos.

Para optimizar la alineación vertical, puede ajustar las estructuras de columnas en la tableta y los dispositivos móviles. Esto garantiza que sus diseños se vean perfectos en cada tamaño de pantalla. Por ejemplo, es posible que desee dos columnas en una tableta y solo una en dispositivos móviles.

El sistema de diseño FlexBox de Divi 5 también le permite cambiar el orden de sus columnas en dispositivos móviles, controlando lo que los usuarios móviles ven primero en una sección o fila.

Use las variables de diseño de Divi 5

La característica de variables de diseño de Divi 5 es perfecta para mantener un espaciado y alineación consistentes en las vistas receptivas. Las variables de diseño le permiten definir valores reutilizables para propiedades como relleno, márgenes y tamaños de fuente, asegurando la uniformidad en sus diseños. Para la alineación vertical, puede crear una variable para el relleno vertical para estandarizar el espacio dentro de las filas o secciones. Por ejemplo, establezca una variable de diseño llamada Padding vertical a 30px en el Administrador de variables de Divi.

Para aplicar la variable a una fila, navegue a la pestaña de diseño, haga clic en el menú desplegable de espacios y haga clic en el icono de contenido dinámico para usarla.

Flexbox facilita la alineación vertical

El sistema de diseño Flexbox de Divi 5 facilita la alineación vertical, ofreciendo una solución flexible y receptiva para crear diseños pulidos. Al integrar FlexBox en el Visual Builder, Divi 5 permite a los usuarios controlar la alineación de secciones, filas, columnas y grupos de módulos con precisión, todo sin necesidad de conocimiento avanzado de CSS. Sus características aseguran diseños profesionales consistentes en todos los dispositivos. Ya sea que esté centrando contenido, alineando grupos de módulos dinámicos o construyendo diseños de múltiples filas, Divi 5 simplifica el proceso mientras se entrega los resultados.

Descargue el último Alpha Divi 5 y experimente con el sistema de diseño FlexBox en un nuevo proyecto.