Cómo crear alturas de columnas iguales con Flexbox en Divi 5

La creación de diseños limpios y profesionales es una piedra angular de un diseño web efectivo, y las alturas de columnas igual contribuyen a un diseño equilibrado. Ya sea que esté mostrando productos, servicios o artículos de cartera, columnas que se alinean perfectamente que aumentan la experiencia del usuario. En Divi 4, fueron posibles columnas iguales, pero Divi 5 trae mucho más a la tabla.

En Divi 5, la integración de su sistema de diseño FlexBox mejora el proceso, ofreciendo una forma más simple y más flexible de crear alturas de columna iguales. Esta publicación lo guiará a través de la creación de diseños limpios y equilibrados. ¡Vamos a sumergirnos!

Alturas de columna iguales en Divi 4

En Divi 4, lograr columnas con igual altura era sencillo pero limitado. Una alternativa habilitó todas las columnas dentro de una fila para que coincida con la altura de la columna más alta. Esta característica era un salvavidas para mantener la consistencia visual, pero tenía limitaciones que a menudo requerían soluciones.

El efecto de igual altura en Divi 4 se aplicó a los contenedores de columna, lo que significa que los colores de fondo, las imágenes o los bordes debían establecerse en el nivel de la columna. Este enfoque no se extendió a los módulos dentro de las columnas, lo que podría conducir a brechas incómodas. Por ejemplo, un botón debajo de un módulo de texto corto en una columna dejaría un espacio incómodo debajo de él, mientras que un botón debajo de un módulo de texto más largo en otra columna lo llenó, creando un aspecto desequilibrado.

Cuando los diseñadores querían más control, como alinear el contenido del módulo verticalmente o ajustar el espacio, a menudo era necesario CSS personalizado. Esto planteó un desafío, especialmente para los principiantes, ya que tuvieron que sumergirse en los campos CSS personalizados de Divi para lograr resultados pulidos. Por ejemplo, si quisiera que los botones se alineen en la parte inferior de la columna en Divi 4, tendría que usar CSS para lograrlo.

Cómo Flexbox en Divi 5 aborda columnas iguales

Flexbox se integra perfectamente en Divi 5, lo que hace que la creación de alturas de columna igual sea más fácil de lograr. A diferencia de la opción basada en alternativa de Divi 4, Divi 5 aprovecha FlexBox para proporcionar controles incorporados que faciliten el diseño de páginas web.

Con FlexBox, puede estirar automáticamente las columnas para que coincida con las más altas mientras ofrece opciones de alineación precisas para columnas y su contenido. Esto elimina la necesidad de CSS personalizados, haciendo posible diseños avanzados para cada usuario de Divi, tanto para principiantes como para profesionales. El sistema de diseño FlexBox de Divi 5 permite a los diseñadores crear fácilmente diseños profesionales consistentes.

Cómo crear alturas de columna iguales en Divi 5

La creación de columnas con igual altura en Divi 5 es muy fácil gracias a su integración FlexBox. En los siguientes pasos, demostraremos cómo configurar las cosas y aseguraremos que todo se alinee perfectamente.

Paso 1: Crea tu diseño

Abra el Visual Builder en una página nueva o existente. Haga clic en el icono Black + para agregar una nueva fila .

Cuando aparezca el cuadro de diálogo de la nueva sección, seleccione el diseño de tres columnas en columnas iguales .

Agregue un módulo de grupo en la primera columna.

A continuación, agregue un módulo de icono al módulo de grupo en la primera columna.

Seleccione el icono de verificación en la pestaña Contenido.

En la pestaña de diseño , configure el color del icono en #2EA3F2 y el tamaño del icono a 36px.

A continuación, agregue un módulo de encabezado debajo del módulo de icono. Asegúrese de agregar el encabezado al módulo de grupo haciendo clic en el icono Black + en lugar del gris.

Escriba el diseño web como el título en la pestaña de contenido .

En la pestaña Diseño, elija H5 como nivel de encabezado , Inter como fuente de encabezado y medio como el peso de la fuente . Establezca el estilo de fuente de encabezado en mayúsculas , la alineación del texto de la cabeza a la izquierda , el color de texto de encabezado a #000000 , y mantenga el tamaño de texto de encabezado en el tamaño predeterminado de 16 px .

A continuación, agregue un módulo de texto debajo del encabezado dentro del módulo de grupo. Puede dejar la configuración tal como está.

Agregaremos un módulo de botón para el módulo final en la columna. Sin embargo, en lugar de agregarlo al módulo de grupo, lo agregaremos debajo. Esto nos permitirá crear alturas de columna iguales, pero alinee el botón hasta la parte inferior, haciendo que el diseño sea más cohesivo.

Haga clic en la pestaña Diseño y asigne la configuración de estilo deseada al módulo de botones. Verifique su botón para asegurarse de que esté fuera del módulo de grupo mirando la vista de capas en el menú izquierdo. Cuando se completa, el botón debe parecerse a la captura de pantalla a continuación, alineada a la izquierda con un fondo azul y un texto blanco.

Paso 2: columnas duplicadas

Una vez que la primera columna esté llena de contenido, copiaremos el contenido de la primera columna en la segunda y tercera columna y haremos algunos cambios. Puede eliminar la segunda y tercera columnas y duplicar el primero, o copiar y pegar el módulo de grupo y el botón en la segunda y tercera columnas.

A continuación, cambie el título de encabezado en la segunda columna a la codificación , y el título de encabezado en la tercera columna al marketing . También eliminaremos parte del contenido en el módulo de texto en la segunda columna para que podamos demostrar cómo Divi 5 maneja FlexBox con diferentes longitudes de contenido. Como puede ver, las columnas son desiguales.

Antes de pasar al siguiente paso, haga clic en la primera columna y agregue un espacio de 25px a todos los lados de nuestra columna.

También agregaremos un radio de borde de 15px y un ancho de borde de 1px con #666666 como color.

El último paso para diseñar nuestra fila es copiar los atributos de diseño de la primera columna y pegarlos en las columnas restantes. Haga clic derecho en la primera columna y seleccione Copiar estilos de elemento . A continuación, haga clic con el botón derecho en la segunda columna y seleccione Pegar el estilo del elemento . Repita esta acción para la tercera columna también.

Paso 3: Configurar la configuración de FlexBox para alturas iguales

A continuación, necesitaremos configurar nuestra configuración de FlexBox para la fila. Divi 5 integra los controles FlexBox en su sistema de diseño, yendo más allá de la igualdad de alternas de columna de Divi 4. Navegue a la pestaña de diseño para la fila y asegúrese de que Flex se seleccione en el diseño .

A continuación, asegúrese de que la fila se seleccione en la dirección de diseño , comience en el contenido de justificación y el estiramiento se seleccione en elementos alineados . Esto le dirá a Divi 5 que mantenga la estructura de la columna, alinee todos los elementos dentro de la fila a la izquierda y llene el espacio disponible dentro del contenedor principal.

A continuación, haga clic en la configuración para la primera columna. Haga clic en el menú desplegable de diseño para revelar su configuración en la pestaña Diseño . Por defecto, Flex se seleccionará en el diseño . En el campo Dirección de diseño , seleccione la columna . En Justify Content , seleccione espacio entre . Alinee todos los elementos al inicio (izquierda) y deje el envoltorio de diseño establecido en No Wrap .

Repita los pasos anteriores para la segunda y tercera columnas. También puede usar las funciones de copiar/pegar o extender para aplicar la misma configuración a las columnas restantes de la fila.

Todos los módulos dentro del grupo se estirarán para llenar el espacio disponible, y los botones fuera del grupo se alinearán hasta la parte inferior.

Paso 4: Capacidad de prueba

Los puntos de interrupción receptivos personalizables de Divi 5 hacen que sea fácil garantizar que sus alturas de columna iguales se vean muy bien en todos los dispositivos. Use la vista receptiva alternativa para obtener una vista previa de su diseño en el Visual Builder. Por defecto, hay tres puntos de interrupción. Sin embargo, Divi 5 ahora tiene 7, que se puede habilitar fácilmente haciendo clic en el menú Elipsis en la barra de herramientas en la parte superior del Visual Builder. Habilite los puntos de interrupción que desea y haga clic en Guardar para aplicarlos.

Haga clic para obtener una vista previa de su diseño en la vista de la tableta . Como puede ver, Flexbox mantiene las columnas apiladas de lado a lado.

Puede cambiar la estructura de la columna para permitir que las columnas se apilen verticalmente en dispositivos más pequeños. Mientras esté en el punto de interrupción de la tableta, haga clic en la pestaña Contenido para la fila . Haga clic en Cambiar la estructura de la columna .

Cuando aparezca el cuadro de diálogo, haga clic para habilitar la fila única en columnas iguales . Esto cambiará la fila de 3 columnas a una sola columna en la tableta y los dispositivos móviles, al tiempo que preservará la estructura de 3 columnas en las computadoras de escritorio.

Cuando obtenga una vista previa de los cambios en todos los puntos de interrupción, verá cómo Divi hace transición el diseño para pantallas pequeñas.

Al automatizar la alineación de la altura, los diseñadores pueden centrarse en la creatividad en lugar de las soluciones técnicas, lo que facilita la construcción de sitios profesionales en una fracción del tiempo. El sistema de diseño FlexBox de Divi 5 también admite una mejor organización de contenido a través de grupos de módulos, lo que hace que los módulos de alineación sin CSS personalizados sean más fáciles que nunca.

Casos de uso comunes

El sistema FlexBox de Divi 5 hace que la creación de alturas de columna iguales sea versátil y efectiva para varios casos de uso. A continuación se presentan algunas formas comunes en las que brilla el sistema FlexBox de Divi 5:

1. Listados de productos

En los diseños de comercio electrónico, las tarjetas de producto a menudo varían en la longitud del contenido debido a títulos o descripciones. Con Flexbox de Divi 5, puede crear una cuadrícula de tarjetas de producto donde cada columna mantiene la misma altura, asegurando una apariencia limpia y profesional. Por ejemplo, un producto con una breve descripción se alinea perfectamente con uno con una descripción más larga. El sistema FlexBox de Divi 5 le permite evitar brechas incómodas y crear una experiencia cohesiva que fomente la confianza y el compromiso del usuario.

2. Secciones destacadas

Las secciones de servicio o características son un buen ajuste para el sistema FlexBox de Divi. Flexbox en Divi 5 asegura que todos los módulos dentro de una fila tengan alturas de columna iguales, creando un aspecto equilibrado y pulido. Ya sea que muestren BIOS, servicios o destacados de características del equipo, las columnas igualadas hacen que sus páginas web sean fáciles de escanear, mejorando la experiencia del usuario.

3. Cuadrículas de cartera

Una cuadrícula de cartera es el caso de uso perfecto para FlexBox, especialmente para los trabajadores independientes que muestran su trabajo. Flexbox asegura que los elementos de la galería como imágenes se alineen uniformemente, incluso con diferentes relaciones de aspecto. Puede usar un módulo de grupo, asignarle una imagen de fondo y ajustar el espacio en consecuencia. Esto crea una cuadrícula ordenada y profesional que muestra su trabajo de manera consistente, lo que lo hace ideal para fotógrafos, diseñadores o agencias con el objetivo de impresionar a clientes potenciales.

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!

Familiarícese con la función FlexBox de Divi 5 hoy

El sistema de diseño FlexBox de Divi 5 marca un salto significativo hacia adelante desde la forma en que Divi 4 igualar las alturas de columnas, transformando cómo los usuarios de Divi crean columnas iguales. Cuando Divi 4 se basaba en un método rígido dependiente del fondo que a menudo requería CSS personalizado para el refinamiento, Divi 5 aprovecha FlexBox para entregar controles intuitivos y una capacidad de respuesta perfecta. El resultado es un sistema más eficiente que elimina la necesidad de soluciones de CSS personalizadas y permite a los usuarios de Divi construir fácilmente diseños profesionales pulidos.

¿Estás listo para elevar tus sitios web de Divi? Sumérgete en la configuración FlexBox de Divi 5 y experimente con las posibilidades creativas que desbloquean. Comparta sus comentarios a continuación o conéctese con nosotros en nuestros canales de redes sociales para compartir sus pensamientos sobre nuestra nueva función FlexBox.