Creación de un sistema de espaciado basado en la brecha con Divi 5

El espacio consistente es la base de un sitio web pulido y profesional. En lugar de administrar márgenes en elementos individuales uno por uno, puede confiar en un solo sistema que mantiene los diseños limpios y equilibrados en su sitio.

Con las nuevas variables de diseño de Divi 5 y las características de FlexBox, ahora puede construir un sistema de espaciado basado en GAP directamente en el Visual Builder, no se requiere codificación personalizada. ¡Echemos un vistazo!

Por qué los métodos de espaciado tradicionales se quedan cortos

Los márgenes y el relleno parecen bastante simples. Agregue algo de espacio aquí, ajuste el relleno allí. Pero este enfoque puede ser fácilmente desordenado. Así es como se desarrolla en la práctica:

Establece un margen de 30 px en un bloque de texto. Luego necesita espacio alrededor de un botón, para agregar 20px.

Otro módulo necesita espacio para respirar, por lo que elige 40px. Cada decisión se siente correcta en el momento, pero estás construyendo una casa de tarjetas.

Cambie a dispositivos móviles, y todo puede verse desbascilado. Esos valores de píxeles cuidadosamente elegidos no se traducen. Su espacio se ve perfecto en el escritorio, pero fuera de equilibrio en los tamaños de pantalla más pequeños. Entonces crea valores específicos de dispositivos móviles, luego valores de tableta.

Ahora está administrando tres sistemas de espaciado diferentes. Este enfoque dividido hace que el mantenimiento de un ritmo visual constante en su sitio sea difícil.

Cómo las propiedades de la brecha simplifican el espacio

Las propiedades de la brecha funcionan de manera diferente a los márgenes tradicionales. No aplica espaciado a cada elemento individualmente. En su lugar, establece reglas de separación en el contenedor principal. El contenedor maneja el espacio entre todos los elementos infantiles automáticamente.

Con Flexbox habilitado, obtienes dos controles de brecha: horizontal y vertical. Establezca la brecha horizontal en 24px, y todos los elementos infantiles obtienen 24 px de espacio entre ellos horizontalmente. Establezca la brecha vertical en 15px y los elementos apilados obtengan 15px de espacio vertical.

Esto funciona para cualquier contenido dentro del contenedor FlexBox. Los módulos de texto, imágenes, botones, divisores y cualquier otra cosa que coloque allí obtenga el mismo espaciado consistente. No necesitará cavar a través de módulos individuales y ajustar sus márgenes por separado; Las propiedades de la brecha manejan las matemáticas de espacio.

El método tradicional hace opciones de espaciado aleatorio: 10px aquí, 20px allí, 40px en otro lugar. Estos valores dispersos causan inconsistencias y hacen que sea difícil saber qué espaciado se aplica. Las propiedades GAP eliminan las conjeturas mediante el uso de una regla consistente para todos los elementos.

Este enfoque todavía tiene limitaciones. Todavía debe recordar cada valor que usó y aplicarlo manualmente donde lo necesite. Tienes que adivinar qué valores funcionan donde. Una vez que establece esos valores, cambiar de opinión significa encontrar cada uno y reemplazarlo manualmente, dejando espacio para errores e inconsistencias.

Un sistema de espaciado basado en brechas con variables Flexbox y diseño es un enfoque mucho mejor.

Cómo configurar el sistema GAP en Divi 5

La construcción de un sistema de espaciado basado en Gap suena complejo, pero Divi 5 lo hace sorprendentemente sencillo. No necesita ningún conocimiento de codificación o marcos externos. El Visual Builder maneja todo a través de variables de diseño y controles Flexbox. Lo guiaremos a través de cada paso, desde crear sus variables de espaciado hasta guardar presets reutilizables.

1. Crear variables de espaciado

Divi 5 puede almacenar valores de brecha dentro del constructor visual utilizando variables de diseño. Usted construye su sistema de espaciado una vez y aplica esos valores en cualquier lugar donde aparezcan los controles de FlexBox, no se necesitan funciones CSS personalizadas.

El administrador de variables se puede encontrar en la barra lateral izquierda de su constructor visual. Haga clic en ese icono, luego abra la pestaña Números donde se pueden agregar variables de separación.

Aquí, creará valores que se pueden usar en todo el sitio en lugar de píxeles codificados. Hay varias variables de diseño disponibles; No los cubriremos en esta publicación, pero tenemos una excelente guía.

Comience con su unidad de espacio base. La mayoría de los diseñadores trabajan con 8-12px como base, pero puede elegir 4px, 10px o lo que sea que se ajuste a su ritmo de diseño. Puede usar unidades avanzadas aquí, aparte de solo píxeles. Por ejemplo, estamos comenzando con REM en lugar de píxeles (suponiendo que el navegador predeterminado 1REM = 16px):

• GAP XS: 0.75REM (~ 12px para relaciones estrechas para columnas con solo icono y texto)
• Gap S: 1.25Rem (~ 20px para columnas con bloques de texto)
• Gap M: 2Rem (~ 32px para cuadros de características, columnas de servicio)
• Gap L: 3REM (~ 48px para secciones de contenido principal, diseños de barra lateral)

Estas etiquetas no son fijas; Usted y su equipo pueden cambiarlos de nombre según sea necesario. También puede agregar más variables de brecha. Las unidades REM escala con configuración de fuente del navegador, por lo que los visitantes que aumentan el tamaño del texto obtienen un espacio proporcional. Esto mejora la accesibilidad.

Use abrazaderas para hacer brechas escalables

También podemos usar Clamp (). Explicaremos brevemente si no sabe qué es una abrazadera (). Pero primero, considere agregar lo siguiente a las variables numéricas también:

• Gap de columna horizontal: abrazadera (16px, 2vw, 32px) (para espacios horizontales entre cartas, características, etc.)
• Gap de columna vertical: abrazadera (16px, 1.5VW, 32px) (para espacios verticales entre cartas, características, etc.)

Clamp () es una unidad CSS segura para usar. Da tres valores: min, preferido y max. El navegador intenta el valor preferido, pero si es demasiado pequeño, usa el min, y si es demasiado grande, usa el máximo.

Por ejemplo, brecha de columna horizontal: abrazadera (16px, 2vw, 32px). Las escalas GAP con el ancho de la pantalla (2VW = 2% de la ventana gráfica). No irá por debajo de 16px en pantallas pequeñas o por encima de 32px en pantallas grandes. Esto sigue espaciando equilibrado sin puntos de interrupción o consultas de medios.

Puede usar cualquier valor. Elegimos este método porque es fácil de mantener, se adapta al cambio y produce resultados más consistentes.

2. Habilite el diseño de FlexBox en sus secciones

Las nuevas secciones usan FlexBox de forma predeterminada. Para sitios más antiguos, convierta una sección haciendo clic en el icono de configuración, abriendo la pestaña de diseño, eligiendo el estilo de diseño en la pestaña Diseño y seleccionando "Flex". Haga lo mismo para sus filas y columnas.

Después de habilitar Flex, obtiene opciones como Justify Content para la alineación y distribución. Alinear los controles de elementos le permite establecer cómo se comportan los elementos cuando el espacio se agota horizontalmente.

Aquí, puede detectar los controles de brecha, que tienen controles deslizantes horizontales y verticales separados para establecer el espacio entre columnas o módulos dentro de una fila.

3. Aplicar valores de brecha usando sus variables

Una vez que configure sus variables de brecha en el Administrador de variables de Divi, aplicarlas a la configuración de GAP de Flexbox se vuelve directo a través del sistema de contenido dinámico. Navegue a su configuración de diseño y pasee sobre las etiquetas en los campos de brecha horizontal o vertical para revelar el icono de contenido dinámico.

Haga clic en el icono de contenido dinámico para abrir el cuadro de diálogo de selección de variables. Sus variables de brecha guardadas aparecen en este menú.

Como habrá notado, agregamos dos conjuntos de huecos basados ​​en el contexto en el que se utilizarían. Hagamos una inmersión más profunda para entender por qué:

Gaps de abrazadera: entre columnas flexibles

Sus espacios de abrazadera funcionarían en el nivel de "contenedor" a través de la configuración de FlexBox de Divi.

Aplique el espacio de columna horizontal [abrazadera (16px, 2VW, 32px)] cuando tenga columnas dispuestas uno al lado del otro, como tres tarjetas de servicio en una fila. Una vez seleccionado, Divi lo aplica automáticamente a la configuración de la brecha. El campo mostrará su nombre de variable, confirmando la conexión. Esto crea un espacio horizontal proporcional entre la columna 1, la columna 2 y la columna 3 cuando la dirección de diseño se establece como una fila.

Aplique el espacio de columna vertical [abrazadera (16px, 1.5VW, 32px)] cuando su dirección de diseño se establece en la columna, apilando los elementos verticalmente. Esto espaciará los elementos proporcionalmente de arriba a abajo cuando la dirección de diseño se establece como una columna.

Cuando las columnas con dirección de fila envuelven a varias líneas, como seis cartas dispuestas en tres columnas por fila, aplique ambos espacios. Un espacio horizontal espacia elementos dentro de cada fila, mientras que un espacio vertical espacia las filas mismas.

Gaps base: contenido dentro de filas

Sus espacios base controlan las relaciones entre las piezas de contenido dentro de cada columna. Cuando un encabezado es seguido por un párrafo y un botón en la misma columna, considere aplicar GAP XS (0.75REM) entre ellos.

Considere usar GAP S (1.25REM) para grupos de contenido con múltiples elementos de texto o GAP L (3REM) si necesita un espacio significativo entre dos columnas, especialmente si la dirección de diseño de la columna se establece en una fila.

La ventaja de las variables de diseño

Las variables de diseño tienen varios beneficios sobre los valores de escritura manualmente. Dado que las etiquetas pueden ser contextuales, siguen espaciando consistente sin memorizar valores de píxeles o REM.

Cuando cambie la filosofía de espaciado, actualice una variable en el administrador de variables para actualizar cada brecha utilizada en todo el sitio.

Este método visual también evita los errores de separación cuando los miembros del equipo ingresan valores diferentes. Las variables de brecha crean un lenguaje común para el espacio, manteniendo los diseños alineados con los estándares de diseño que establece. Esto es especialmente útil en grandes proyectos con muchos contribuyentes o después de la entrega del cliente cuando los clientes editan o agregan páginas.

4. Configurar las brechas receptivas

Los teléfonos móviles tienen un espacio horizontal limitado. Su diseño de servicio de tres columnas se ve muy bien en el escritorio, pero se vuelve apretado y rígido para leer en una pantalla de teléfono de 360px.

Divi 5 le ofrece siete puntos de interrupción personalizables para trabajar: teléfono, ancho, tableta, tableta ancho, escritorio, pantalla ancha y ultra amplia. Cada punto de interrupción funciona de forma independiente. Puede cambiar la dirección del diseño, las variables de espacio de intercambio o ajustar la alineación en el móvil sin estropear el escritorio. Esto le permite dirigirse a los anchos de pantalla exactos donde su diseño necesita cambiar.

Cambie al punto de interrupción de su teléfono y cambie la dirección de diseño de "fila" a "columna". Limpie la opción de brecha horizontal ya que sus columnas se apilan verticalmente en lugar de luchar por el espacio horizontal.

La brecha vertical basada en la abrazadera se reduce y crece automáticamente a medida que cambia el ancho de la ventana contra la ventana. En una pequeña pantalla de teléfono, 2VW equivale a aproximadamente 7px, pero la abrazadera no excederá el mínimo de 16px. En una pantalla más grande, 2VW podría significar 18px, y en una pantalla aún más grande, 20px.

El espacio crece suavemente entre estos límites a medida que cambia el tamaño de la pantalla. Sin establecer diferentes valores manualmente, obtienes un espacio ajustado en el móvil y el espacio generoso en el escritorio.

Los espacios base aún pueden necesitar ajustes manuales por punto de interrupción. Gap M podría sentirse demasiado apretado en los dispositivos móviles. Cambie a su punto de interrupción móvil y aplique GAP L en lugar de la opción GAP vertical.

También puede crear variables específicas para dispositivos móviles, como "Gap Mobile S" o "Gap Mobile L", y aplicarlas a los puntos de interrupción del teléfono y la tableta. Sin embargo, las brechas básicas de base y sujeción funcionan bien en la mayoría de los casos.

5. Guarde su configuración como preajuste

Su sistema GAP funciona bien ahora. Las variables de diseño le dan control sobre el espacio a través de la interfaz visual con la que ha estado trabajando. Pero configurar las configuraciones de FlexBox una y otra vez envejece rápidamente. Debe ajustar la dirección del diseño, la alineación y la configuración de envoltura. Luego aplica sus variables de brecha a cada nueva sección. Este proceso come tiempo.

El grupo de opciones preestablece solucionar este problema. Almacena su configuración completa de FlexBox, incluida la dirección de diseño, la alineación, el envoltorio, la justificación y los espacios horizontales y verticales que hacen referencia a sus variables de diseño.

Una vez que configure todos los ajustes de FlexBox, pase el paso sobre el panel de estilo de diseño. Verá el icono de preajustos del grupo de opciones.

Haga clic en él y seleccione "Crear preajuste de los estilos actuales". Nómbrelo en función de lo que hace el diseño: "Grid de tres columnas", "Grid de servicios" o "pantalla de tarjeta".

El preajuste lleva la configuración de FlexBox a cualquier contenedor. No copia colores de fondo, fuentes u otro estilo visual.

Aplique su preajuste de la "cuadrícula de tres columnas" a cualquier fila. Establece automáticamente el mismo espacio, alineación y comportamiento de envoltura. Cada fila o columna mantiene su aspecto visual mientras usa la misma estructura de diseño.

Pasas menos tiempo recreando configuraciones que ya has perfeccionado. La identidad visual se mantiene exclusiva de cada sección. La base estructural sigue siendo consistente en su sitio. Su sistema GAP se mantiene rápido para implementar, y sus patrones de diseño probados se reutilizan de manera eficiente.

Obtenga un espacio perfecto cada vez con Divi 5

Con las nuevas variables de diseño y diseño de Divi 5, el espacio constante se vuelve sin esfuerzo. Los controles GAP equilibran los diseños de equilibrio entre los dispositivos, mientras que las variables aseguran que las actualizaciones se reflejen en todo su sitio con un solo cambio.

En lugar de soluciones constantes, obtienes un sistema claro en el que puedes confiar. Establezca su espacio una vez, reutilízalo en todas partes y concéntrese en diseñar excelentes experiencias para sus visitantes.