En el mundo del diseño web profesional, existe una tendencia a la sobre-complicación. Si analizas el núcleo de Divi 5 o la mayoría de los Frameworks de Diseño actuales, verás que utilizan decenas (a veces cientos) de variables distintas para controlar de forma aislada los encabezados, los márgenes de las secciones, el relleno de los botones y el espaciado de las columnas.
Ese enfoque "fragmentado" suele generar inconsistencias visuales y un mantenimiento agotador para el desarrollador.
Nuestro Diferencial: El Poder de los 9 Niveles
En nuestra metodología, hemos roto con esa norma. No necesitamos una variable para cada elemento; lo que necesitamos es un sistema de escala lógica.
Mientras otros gestionan el caos, nosotros implementamos una jerarquía única de 9 variables (de XXS a 4XL). Este sistema es nuestro "Caballo de Batalla" porque:
- Sustituye la arbitrariedad por la matemática: Un solo valor de espaciado sirve para un margen, un relleno o un gap de columna, manteniendo una armonía visual perfecta en toda la web.
- Eficiencia Extrema: Al reducir el ruido visual en el Gestor de Variables de Divi 5, el flujo de trabajo se acelera drásticamente.
- Escalabilidad Real: Ya sea que estés diseñando una "Landing Page" sencilla o un sistema complejo de PMS (Property Management System) con múltiples listados y filtros, estas 9 variables garantizan que el diseño nunca se rompa.
Módulo 1: Tu Caja de Herramientas (Las 9 Variables)
Si vienes del mundo de los píxeles (px), debes pensar en estas variables como "tallas inteligentes". En lugar de adivinar qué número poner, simplemente eliges una talla. Lo mejor es que estas tallas se ajustan solas dependiendo de si el cliente mira la web desde un celular o una computadora.
Entender el concepto de clamp() es como descubrir el "santo grial o la copa sagrada" del diseño web moderno. Si estás cansado de ajustar tamaños manualmente para que se vean bien en celulares y computadoras, esta función es tu mejor aliada.
En términos sencillos, clamp() es una función matemática de CSS -estilo- que permite que un elemento (como un texto o un contenedor) cambie de tamaño de forma fluida entre un mínimo y un máximo, dependiendo del ancho de la pantalla.
Aquí tienes el desglose detallado:
La Estructura de la "Pinza"
La palabra clamp en inglés significa "grampa" o "abrazadera". Imagina que tienes una pieza de metal sujeta entre dos topes; puede moverse, pero nunca se saldrá de esos límites.
La función clamp() en CSS es una herramienta de diseño responsivo que limita un valor (como tamaño de fuente, ancho o margen) entre un mínimo y un máximo definido, ajustándose automáticamente a un valor "ideal" intermedio según el tamaño de la pantalla. Permite una tipografía y diseño fluidos sin usar media queries
La sintaxis siempre lleva tres valores: clamp(mínimo, valor_ideal, máximo)
Los tres componentes:
Mínimo: El tamaño más pequeño que el elemento puede alcanzar. No importa qué tan diminuta sea la pantalla del celular, nunca será menor a esto.
Valor Ideal (Dinámico): Es el "corazón" del clamp. Aquí usamos unidades relativas (como vw, que significa viewport width o ancho de pantalla). Este valor le dice al elemento: "crece o encoge junto con la pantalla".
Máximo: El límite superior. Por más que el usuario abra el sitio en un monitor de 50 pulgadas, el elemento se detendrá aquí.
Un ejemplo práctico: Tipografía Fluida
Imagina que quieres un título que se adapte solo. No quieres que en el celular sea gigante ni que en la computadora se vea minúsculo. Deseas que en el celular tenga un tamaño mínimo de 1.5rem -24pxs- y que en un monitor no tenga más de 48pxs -3rem-
Recuerda que 1rem es equivalente a 16pxs -rem se escribe siempre en singular, nunca rems-
El clamp para este ejemplo sería:
clamp(1rem, 0.875rem + 0.4vi, 1.125rem)
No te preocupes en saber cómo conseguimos ese Clamp. Para esto hay varios Clamp Calculators que puede usar. Los preferidos por los diseñadores son:
- Chris Burnell clamp() Calculator: Muy popular por su simplicidad para definir tamaños mínimos, preferidos y máximos en diseño adaptable (viewport). https://chrisburnell.com/clamp-calculator/
- Kevin Geary (Geary.co) Calculator: Genera funciones clamp() rápidas para tipografía y espaciado. https://geary.co/clamp-calculator/
- Utopia.FYI https://utopia.fyi/clamp/calculator/?a=320,1280,24%E2%80%9448
Como estamos buscando ese diseño "elástico" o fluido para que tus textos y elementos se vean perfectos tanto en un celular como en una pantalla gigante sin tener que ajustar cada uno por separado, clamp() es nuestra mejor herramienta.
¿Qué es exactamente clamp()?
La sintaxis se divide en tres valores: clamp(mínimo, ideal, máximo)
Imagina que la función clamp() es como un resorte con límites. Le da a un elemento un tamaño que cambia según el ancho de la pantalla, pero le pone un "suelo" (mínimo) y un "techo" (máximo) para que nunca se vea demasiado pequeño ni exageradamente grande. Para leer correctamente esta función, imagina que le estás dando tres instrucciones precisas al navegador para que el tamaño de tu texto (u otro elemento) se comporte de forma inteligente según la pantalla.
Aplicación en Divi 5 (Variables)
En el Variable Manager de Divi 5, esto es una maravilla porque puedes crear una sola variable (por ejemplo, --titulo-fluido) y aplicarla a todos tus encabezados.
Cómo leer este ejemplo
clamp(1rem, 0.875rem + 0.4vi, 1.125rem) Aquí tienes el desglose paso a paso de lo que significa cada parte del ejemplo:
El Límite Inferior (El “Piso”): 1rem Es el valor mínimo. No importa qué tan pequeña sea la pantalla del teléfono, el navegador tiene prohibido reducir el tamaño por debajo de 1rem (que usualmente equivale a 16px). Esto garantiza que el texto siempre sea legible. Es el tamaño más pequeño que permitiremos. Por ejemplo, si definimos 16px, no importa si el teléfono es muy angosto, el texto nunca bajará de esa medida. Así aseguramos la legibilidad.
El Valor Dinámico (El "Motor"): 0.875rem + 0.4vi Normalmente usando unidades como vw (viewport width). Es lo que hace que el elemento crezca o se encoja a medida que el usuario estira o encoge la ventana del navegador. Esta es la parte que hace la "magia" del diseño elástico. 0.875rem: Es una base fija. 0.4vi: Es una unidad que depende del ancho del contenedor o la pantalla (similar a vw).
El resultado: A medida que el usuario ensancha la ventana del navegador, este valor va sumando y creciendo. Es lo que permite que el texto se vea más grande en una tablet que en un celular pequeño.
El Límite Superior (El "Techo"): 1.125rem. Es el valor máximo. Aunque el usuario vea tu página en un monitor gigante de 32 pulgadas, el texto se detendrá al llegar a 1.125rem (aprox. 18px). Esto evita que los párrafos se vuelvan desproporcionados en pantallas de escritorio. Es el límite superior. Si definimos 48px, aunque el usuario vea el sitio en un monitor de 50 pulgadas, el texto se detendrá al llegar a ese tamaño.
¿Cómo se comporta en la práctica?
En un celular muy pequeño: El cálculo de en medio dará un número bajo, así que el navegador dirá: "Usaré el mínimo: 1rem". En una tablet o laptop: El cálculo de en medio estará en su punto dulce (por ejemplo, 1.05rem), y ese será el tamaño que verás. En un monitor de oficina: El cálculo de en medio intentará ser muy alto, pero el navegador dirá: "No puedo pasarme del máximo, así que me quedo en 1.125rem".
¿Por qué usar vi en lugar de vw?
Hemos usado 0.4vi. La unidad vi se refiere al Inline Size (tamaño en el eje de escritura). En la mayoría de los sitios web horizontales, funciona igual que el ancho de la pantalla, pero es una forma más moderna y "robusta" de escribir código que se adapta a diferentes orientaciones.
¿Por qué es mejor que el método antiguo?
Antes, en Divi, teníamos que ir a la pestaña de "Móvil", "Tablet" y "Escritorio" para cambiar los tamaños manualmente. Con clamp(): Ahorras tiempo: Lo configuras una vez. Continuidad: El cambio de tamaño es fluido y suave, no "salta" de un tamaño a otro de golpe. Código limpio: Menos CSS adicional en tu sitio de Universo Divi.
El Clamp que te mostramos lo conseguimos usando el Chris Burnell clamp() Calculator, el que consideramos más sencillo para un aprendiz aunque en lo personal prefiero Utopia. Vamos a definir nuestras 9 variables. Debes seguir las instrucciones al pie de la letra; siempre defin el vw con un mínimo de 320 y un máximo de 1280. Si deseas que tus resultados sean iguales a los nuestros lo primero que debes hacer es ajustar en el Clamp Calculator el min/max a los que te hemos sugerido. Te vamos a dar los parámetros que hemos adoptado. Recomendamos los hagas todos de una vez para que no tengas problemas como olvidar ajustar el vw.
Aquí tienes tu escala maestra para configurar en Divi 5:
| NOMBRE | EQUIVALENCIA | USO SUGERIDO |
|---|---|---|
| escala---XXS | De 4px min a 8px max | Espacios mínimos, como el margen de un botón pequeño. |
| escala---XS | De 10px min a 16px max | Separación entre un icono y su texto. |
| escala---S | De 18px min a 24px max | Espacio dentro de una tarjeta de servicio. |
| escala---M | De 26px min a 36px max | Tu base. El espacio estándar entre columnas. |
| escala---L | De 38px min a 48px max | El "aire" arriba y abajo de una sección normal. |
| escala---XL | De 50px min a 60px max | Títulos grandes que necesitan destacar. |
| escala---XXL | De 82px min a 72px max | Secciones de bienvenida (Hero) con mucho impacto. |
| escala---XXXL | De 74px min min a 86px max | Separaciones grandes en diseños de lujo. |
| escala---XXXXL | De 88px min a 100px max | El límite máximo de espacio para respirar. |
En la Tabla de arriba adjudicamos un Uso Sugerido para cada variable, no obstante y esta es la magia de estas variables, cada una de ellas puede asignarse a: Márgenes, Rellenos, Bordes Redondos, Encabezados, Tamaño de Texto, en fin en cualquier lugar donde pueda aplicarse un número, con la salvedad de que nosotros usaremos un Clamp.
La función clamp() en CSS es una herramienta de diseño responsivo que limita un valor (como tamaño de fuente, ancho o margen) entre un mínimo y un máximo definido, ajustándose automáticamente a un valor "ideal" intermedio según el tamaño de la pantalla. Permite una tipografía y diseño fluidos sin usar media queries
Manos a la Obra: INSTRUCCIONES: Te recomendamos que crees todas las Variables de una vez para evitar que puedas cometer errores como no ajustar el tamaño de los dispositivos
Para nuestro ejemplo vamos a crear el Clamp para nuestra Variable «escala--L De 40px min a 56px max» Sigue las instrucciones al pie de la letra para que tu resultado sea igual al nuestro. Te guiaremos paso a paso en la creación de esta variable mas deberás crearlas todas.
- En el Ancho Mínimo -Minimun Size- vas a escribir 40 y en el Ancho Máximo -Maximun Size- escribiras 56
- En el Ancho Mínimo de Pantalla -Minimun Viewport- lo hemos establecido en 320 pixeles -el tamaño más pequeño de un celular y en el Ancho Máximo de Pantalla -Maximun Viewport- 1280 que funciona bien para monitores grandes. Es importante establecer estos parámetros antes de crear nuestro Clamp.
- Presiona Calculate. Abajo obtendras el Resultado que deberás copiar e insertar en el Valor del Gestor de Variables Debes copiar desde donde comienza clamp hasta el paréntesis de final teniendo el cuidado de que no copies espacio alguno ni antes ni después: clamp(2.5rem, 2.167rem + 1.667vi, 3.5rem)
MANOS A LA OBRA:
- Ve al Menú de WordPress y crea una Página. Llámala como desees pero que el nombre lo relaciones con las Variables. Nosotros hemos llamado la nuestra «Sistema de Diseño Inteligente Universo Divi»
- Presiona Publicar
- Selecciona Editar con Divi Builder.
- En el Menú de la Izquierda vas a seleccionar el Gestor de Variables - el icono que está en el cuarto lugar y que parece una hamburguesa o tres discos uno encima del otro. -ver imagen a la izquierda.
- Baja hasta que encuentres Añadir Número Global
- En el Nombre vas a escribir escala--L
- En el Valor vas a pegar el Clamp que creaste: clamp(2.5rem, 2.167rem + 1.667vi, 3.5rem)
- Presiona la tecla Enter
- Haz Click en Guardar Variables
- Presiona Continuar Editando
- Arriba en el Menú de Divi Cliquea Guardar o Presiona Ctrl+S
- Refresca la página
Te felicito acabas de crear tu primera Variable de las nueve que debes memorizar.
En la tabla que vimos anteriormente en: «Aquí tienes tu escala maestra para configurar en Divi 5» te señalamos los usos sugeridos que puedes darle a esta Variable, no obstante, y volvemos a repetirlo independientemente de lo que puedan afirmar otros, queremos dejar meridianamente claro que estas variables pueden asignarse a: Márgenes, Rellenos, Bordes Redondos, Encabezados, Tamaño de Texto, en fin en cualquier lugar donde pueda aplicarse un número, con la salvedad de que nosotros usaremos un Clamp
Aplicación Práctica en el Workspace
Para que este sistema brille en Divi 5, configuraremos el panel de Variables Globales como el centro de mando. En lugar de navegar por menús infinitos, tendremos nuestros 9 tokens siempre a mano, listos para ser inyectados en cualquier propiedad de diseño.
