Todo lo que necesitas saber sobre las unidades avanzadas de Divi 5

Las excelentes herramientas de diseño le dan control sobre cada aspecto de su sitio web. Ya sea que esté clavando el acolchado perfecto o garantizar escamas de texto sin problemas entre los dispositivos, cada detalle importa. Divi ha sido un compañero de confianza para los diseñadores durante años, ofreciendo una base sólida para construir sitios web profesionales. Divi 5 lo lleva más allá, presentando una característica llamada unidades avanzadas.

Las unidades avanzadas en Divi 5 ayudan a mejorar la forma en que crea sitios web. Desde los cálculos dinámicos de Calc () hasta la escala de fluido de la abrazadera (), una gama completa de unidades CSS como VW y REM, y la flexibilidad de las variables CSS. En esta publicación, nos sumergiremos en las unidades avanzadas, cómo usarlas en el constructor visual y por qué son necesarios para cada usuario Divi. Ya sea que esté ajustando diseños o soñando nuevos diseños audaces, las unidades avanzadas proporcionan aún más control sobre la capacidad de respuesta de su diseño.

Vamos a sumergirnos.

¿Qué son las unidades avanzadas en Divi 5?

Unidades avanzadas en Divi 5 le permite controlar elementos de diseño con su campo de unidad multifuncional. Es un campo de entrada único y poderoso que acepta el espectro completo de unidades, funciones y variables CSS.

Es un pequeño cambio en el Visual Builder que admite todas las unidades CSS con un nuevo soporte para las variables Fit-Content, Unset, Calc (), Clamp () y CSS.

Las unidades avanzadas lo liberan de las limitaciones de los valores estáticos. No tiene que adivinar tamaños de píxeles fijos o luchar con puntos de interrupción para hacer que las cosas encajen como las desea. Sin dejar el Visual Builder, puede construir diseños que se flexionan y se escalaran sin esfuerzo, con tipografía fluida, espaciado adaptativo y diseños conscientes de la ventana gráfica. No se trata solo de más opciones; Se trata de una creatividad más inteligente y más escalable.

Explorando unidades avanzadas en Divi 5

La función de unidades avanzadas de Divi 5 ofrece varias opciones de diseño, cada una con formas únicas de dar forma a los diseños. Examinemos a los jugadores clave y veamos cómo funcionan.

Unidades CSS en Divi 5

Las unidades avanzadas abren una paleta completa de unidades CSS, mucho más allá de los píxeles y los porcentajes. Tome el ancho de la visión (VW), por ejemplo: establezca el ancho de una sección en 80 VW , y siempre ocupará el 80% del ancho de la visión (horizontalmente), escalando perfectamente desde el escritorio hasta el móvil.

Root EM (REM) ata el tamaño del tamaño de la fuente de la raíz del sitio: idea para una tipografía consistente, como 4.5REM para un encabezado.

También puede probar FIT-Content, que tamaños en el tamaño de un elemento basado en su contenido. Por ejemplo, el uso de Fit-Content para el ancho de un encabezado puede garantizar que se adapte perfectamente. Puede agregar un contenido de ajuste al campo de ancho en una fila para mantener el encabezado compacto y proporcional, evitando el espacio excesivo o el desbordamiento mientras mantiene un aspecto pulido.

Estas unidades se adaptan a los tamaños de pantalla y los contextos, dando diseños que se sienten vivos en lugar de bloquearse en su lugar.

Calc () es una calculadora dinámica

La función CaCl () es como una mini calculadora integrada en Divi. Le permite mezclar unidades con operaciones (adición, resta, multiplicación y división) para resultados dinámicos. Un ejemplo clásico es Calc (100% - 50px) , que establece el ancho de una sección al 100% y resta 50 píxeles. Si su elemento está alineado centralmente, se reduce 25px de ambos lados.

Puede usar Calc () para un espacio receptivo, como establecer una sección o el ancho de la fila para dejar las canaletas perfectas en cada lado. Calc () se ajusta a la mosca a medida que cambia la ventana de la vista, asegurando que su diseño permanezca equilibrado sin hacer ajustes manuales.

Clamp () para el control de fluidos

La función Clamp () le ayuda a controlar los tamaños que se ajustan suavemente a través de los tamaños de pantalla. Utiliza tres valores: un tamaño mínimo, un tamaño preferido y un tamaño máximo. Un buen ejemplo es Clamp (36px, 4VW, 48px) .

Esto significa que el tamaño comienza en 36px, aumenta en función del 4% del ancho de la visión, pero nunca va por encima de 48px. Es ideal para texto, como un módulo de encabezado que se ve bien en teléfonos pequeños y pantallas grandes. Clamp () asegura que su diseño permanezca equilibrado y legible sin importar el dispositivo.

Variables CSS para flexibilidad global

Las variables CSS (o propiedades personalizadas) le permiten definir valores reutilizables, como –font-tamaño: 5EM , en las opciones de tema de Divi o en el campo CSS Configuración de la página. Al agregar variables CSS en Divi 5, asegúrese de encerrarlas en el elemento principal como este:

:root {
--font-size:5em;
}

Una vez definido, puede soltar var (–font-tamaño) en el campo de tamaño de texto de un encabezado para aplicarlo.

Es un ahorro de tiempo que mantiene su diseño consistente y editable sobre la marcha.

Valores sin unidad

Las unidades avanzadas de Divi 5 también incluyen valores iniciales, unset y automáticos. La propiedad inicial restablece una propiedad CSS a su valor predeterminado según lo definido por la especificación CSS. Por ejemplo, el color de configuración: inicial en un párrafo lo vuelve a negro, ignorando cualquier estilo personalizado o heredado. Unset borra una propiedad de regreso a su estado natural, actuando como inicial para propiedades no heredadas o que vuelve a valores heredados cuando corresponde. Mientras tanto, Auto permite que el navegador decida un valor basado en el contexto, como el estiramiento de altura de una sección para que se ajuste a su contenido.

Cómo funcionan las unidades avanzadas en Divi 5

Las unidades avanzadas en Divi 5 aportan un nuevo nivel de control directamente al constructor visual, lo que facilita la creación de diseños dinámicos y sensibles. Puede escribir instantáneamente cualquier unidad, función o variable CSS, como VW, Calc () o Clamp (), y ver resultados. Así es como funcionan las unidades avanzadas en Divi.

Ancho de sección receptivo con Calc ()

Supongamos que desea una sección que abarque el 80% de la altura de la ventana gráfica, pero elimina algo de acolchado desde arriba e abajo. Navegue a la pestaña Diseño de la sección, ubique el campo de altura y agregue Calc (80VH - 60px) al campo.

Este cálculo permite que la sección escala fluida con la ventana gráfica, manteniendo el 80% de la altura de la ventana de la visión mientras resta 30 px de arriba e inferior.

Tipografía de fluido con Clamp ()

Clamp () puede ser útil si necesita encabezados que crecen con el tamaño de la pantalla pero manténgase legible. En una pestaña de diseño del módulo de encabezado, configure el tamaño del texto de encabezado en sujeción (52px, 2VW, 36px) .

Esto establece el texto en 52px, se escala en función del 2% del ancho de la visión y limita el tamaño a 36px, lo que ofrece una tipografía balanceada y sensible sin esfuerzo.

Tamaños de fuentes impulsados ​​por variables

Las variables CSS de Divi 5 son una excelente manera de obtener uniformidad en el espacio, el texto y otras áreas. Puede establecer variables una vez y luego usarlas repetidamente a lo largo de sus diseños simplemente agregándolas a un campo de unidades de módulo, columna, fila o de sección. Por ejemplo, supongamos que desea tamaños de rumbo consistentes sin configurarlos manualmente o usar un grupo de opciones preestablecido para definirlos.

Puede agregar las siguientes opciones de tema o configuración de página , en avanzado> CSS personalizado :

:root{
--text-size-h1: 86px;
--text-size-h2: 60px;
--text-size-h3: 48px;
--text-size-h4: 36px;
--text-size-h5: 28px;
--text-size-h6: 20px;
}

A partir de ahí, simplemente agregue una variable al tamaño de texto de encabezado en cualquier módulo de encabezado. Por ejemplo, para este encabezado en nuestra sección de héroes, simplemente agregamos var (–Text-size-H1) . Divi lo reconocerá como una variable y asignará el estilo apropiado a su encabezado.

Las mejores prácticas para unidades avanzadas

Para aprovechar al máximo las unidades avanzadas en Divi 5, un enfoque reflexivo puede ahorrar tiempo y garantizar que sus diseños brillen. Aquí hay algunas de las mejores prácticas para guiarlo:

Empiece simple

Si es nuevo en usar funciones y variables CSS, alivie con unidades familiares como píxeles (PX) o porcentajes (%), luego experimente con Calc () para ajustes dinámicos básicos. Por ejemplo, intente Calc (100% - 40px) para un ancho de sección antes de sumergirse en variables de Clamp () o CSS. Esto genera confianza sin abrumarlo desde el principio.

Variables de apalancamiento para estilos comunes

Defina las variables CSS en las opciones de temas para la consistencia en todo el sitio. Por ejemplo, la configuración –gutter: 30px le permite reutilizar ese espacio entre secciones, filas y módulos. Las variables CSS también pueden ser buenas para establecer un tamaño de texto uniforme para todos sus encabezados. Uno Editar actualiza todo, acelerando el proceso de diseño y manteniendo su diseño cohesivo.

Capacidad de respuesta

El sistema de vista receptivo de Divi es una excelente manera de diseñar su diseño en múltiples tamaños de pantalla. Después de aplicar unidades como VW o Clamp (), altere entre escritorio, tableta y vista móvil para garantizar que su diseño se adapte sin problemas. Un encabezado establecido en sujetar (20px, 3VW, 40px) puede verse perfecto en un escritorio, pero puede necesitar ajustar las pantallas más pequeñas, así que pruebe para asegurarse.

No te complices demasiado

Aunque puede anidar funciones como Calc (abrazadera (20px, 5VW, 50px) - 10px), debe seguir fórmulas simples, al menos mientras aprende. La complejidad excesiva puede ralentizar el rendimiento y hacer que la resolución de problemas sea más difícil cuando las cosas no aparecen como deberían. Sigue a los cálculos limpios y decididos para facilitar la vida.

Por qué las unidades avanzadas elevan la divi 5

Las unidades avanzadas son excelentes para racionalizar el proceso de diseño. Estas son algunas de las ventajas clave que vienen con esta nueva característica:

• Libertad creativa: unidades de mezcla, funciones y variables desbloquean diseños que requieren más tiempo para lograr en versiones anteriores de Divi. Las fórmulas simples le permiten ajustar alturas, anchos, tamaños de fuente y más. Esta flexibilidad le permite construir mejor y ejecutar más rápido, todo dentro del Visual Builder.
• Mejores diseños receptivos: las unidades avanzadas cambian de divi hacia diseños de fluidos que se adaptan sin esfuerzo. El uso de VW o Clamp () garantiza que su sitio se sienta natural en cualquier dispositivo, reduciendo la necesidad de anulaciones manuales y entregando una experiencia pulida.
• Es a prueba de futuro: las unidades avanzadas se alinean con la misión de Divi 5 de modernizar el constructor visual para la web de hoy. Al adoptar todo el poder de CSS, Divi 5 lo equipa con las herramientas necesarias para crear sitios web modernos. No se trata solo de mantenerse al día; Se trata de mantenerse por delante de la curva con herramientas que reflejan lo que usan los desarrolladores profesionales.

Descargue el último Divi 5 Alpha

Advanced Units es una característica útil que se ha agregado recientemente a Divi 5. Desde la precisión de Calc () hasta la fluidez de la pinza () y la eficiencia de las variables CSS, estas herramientas hacen que el espaciado, el dimensionamiento y la escalabilidad sean más intuitivos que nunca. Ya sea que haya estado usando Divi durante años o lo haya descubierto, puede crear sitios web receptivos y dinámicos con menos esfuerzo.

¿Listo para verlo usted mismo? Descargue Divi 5 Alpha ahora y comience a experimentar con unidades avanzadas. Juega con VW y VH para el espacio para la vista de la ventana gráfica, Test Clamp () para la tipografía o configurar variables para repensar cómo se construye. Es una oportunidad para impulsar sus diseños y descubrir lo que es posible.