Si llevas tiempo trabajando con Divi 5 y ya sabes que existe el sistema de variables globales pero todavía no has terminado de implementarlo, hay una razón muy común: las unidades CSS como clamp() no son sencillas de escribir a mano. Un valor de tipografía fluida tiene este aspecto: clamp(1rem, 1rem + 0.35vw, 1.35rem). Si no tienes claro cómo calcularlo, simplemente no lo usas y terminas poniendo píxeles fijos que no se adaptan bien al tamaño de pantalla. Divi 5 acaba de resolver ese problema con el nuevo generador nativo de variables, disponible directamente desde el Variable Manager del constructor.

En este post te explico qué puede generar esta herramienta, cómo usarla para crear paletas de colores y escalas tipográficas fluidas paso a paso, y en qué se diferencia del Generador de Variables de UXDivi — que sigue siendo la opción más potente cuando partes de un sitio de referencia o un mood board de diseño. Si aún no tienes claro qué son las variables globales en Divi 5 y para qué sirven, te recomiendo leer primero ese post antes de continuar.

¿Por qué era necesario un generador de variables en Divi 5?

El sistema de variables globales de Divi 5 es uno de sus puntos más fuertes como herramienta de diseño profesional. Puedes definir colores, tipografías, tamaños, espaciados y prácticamente cualquier valor numérico una sola vez, y reutilizarlo en todo el sitio. Si cambias una variable, el cambio se propaga automáticamente a todos los elementos que la usan. Es exactamente lo que en CSS se hace con las variables de :root, pero de forma visual y sin escribir código.

El problema es que configurar variables numéricas bien — especialmente las tipografías fluidas con clamp() — requiere entender cómo funciona esa unidad CSS. Y eso es una barrera real para mucha gente. La unidad clamp() recibe tres valores: el mínimo, el valor ideal y el máximo, y ajusta el resultado fluidamente según el ancho de pantalla. Calcularlo a mano de forma correcta para cada tamaño tipográfico del sitio es tedioso. Con el nuevo generador, Divi 5 hace ese cálculo por ti. Tú defines los rangos y el constructor genera los valores automáticamente.

Qué puede generar (y qué no)

Antes de entrar en el detalle, es importante tener claro el alcance de esta herramienta. El generador nativo de Divi 5 solo trabaja con dos tipos de variables: colores y valores numéricos. No genera fuentes, imágenes, links ni textos, porque esos son tipos de variables más específicos que requieren decisiones editoriales que una herramienta automática no puede tomar.

Dentro de los valores numéricos, puedes generar: tamaños generales, valores con clamp(), anchuras, bordes, radios, espaciados (gap) y tamaños de fuente. Eso cubre la gran mayoría de lo que necesitas para construir un sistema de variables completo en Divi 5.

Consejo: Antes de abrir el generador, decide cuántas variables necesitas realmente. El error más común es generar demasiadas — una lista interminable de colores y tamaños que terminas sin usar. Empieza con lo mínimo: un color primario, un color secundario y tres o cuatro tamaños tipográficos. Siempre puedes agregar más.

Generador de paleta de colores en Divi 5

Para acceder al generador, abre el Variable Manager en el constructor de Divi 5. Verás un ícono nuevo que te permite generar colores o números. Selecciona la opción de colores y se abre la interfaz del generador de paletas.

Tipos de paleta disponibles

El punto de partida siempre es tu color primario. A partir de ese color, el generador propone un color secundario y una serie de variaciones. Puedes escoger entre cinco tipos de paleta:

• Complementaria — un color secundario opuesto al primario en la rueda de color. Es la opción más clásica y suele funcionar bien en sitios profesionales.
• Análoga — colores muy cercanos al primario en la rueda. El resultado es una paleta armónica y suave, ideal para sitios que buscan coherencia visual sin contraste fuerte.
• Split Complementaria — una variación de la complementaria con dos o tres colores secundarios distintos. Más variedad, más dinamismo.
• Triádica — tres colores equidistantes en la rueda. El resultado es vibrante y contrastado, adecuado para sitios con mucha energía visual.
• Tetrádica — cuatro colores en pares opuestos. La paleta más rica y compleja, que requiere más cuidado para que no resulte caótica.

Una vez que seleccionas el tipo de paleta, puedes ajustar los valores de matiz, saturación y luminosidad de los colores secundarios para afinarlos según tu criterio. El generador actualiza el preview en tiempo real.

Controlar shades, tints y tones

Además del color primario y secundario, puedes generar variaciones automáticas de cada color: sombras (shades, colores más oscuros), tintas (tints, colores más claros) y tonos (tones, variaciones desaturadas). Para cada tipo puedes definir cuántas variaciones quieres y con qué intensidad. También puedes configurar prefijos y sufijos para que los nombres de las variables sean coherentes con tu nomenclatura.

Una funcionalidad muy útil es el botón «Show CSS», que te muestra el valor hexadecimal o RGBA de cada color generado. Esto es especialmente práctico si quieres copiar algún valor para usarlo en otro contexto fuera de Divi.

Agregar los colores al Variable Manager

Cuando tienes la paleta definida, simplemente le das a «Agregar variables» y Divi los incorpora automáticamente al Variable Manager. Lo interesante es que, además de crear las variables de color, el sistema también las asigna como presets de color. Si ya entiendes cómo funcionan los presets dentro de presets en Divi 5, verás que este flujo encaja directamente con ese sistema.

🎓 ¿Quieres aprender a construir un sistema de diseño completo en Divi 5?
En el Curso de Divi 5 explico en detalle cómo usar el Variable Manager, los presets de opciones y el generador de variables para crear sistemas de diseño profesionales aplicados a proyectos reales de cliente. Accede como suscriptor y aprende el método completo.

Generador de variables numéricas: tamaños y tipografías con CLAMP

La parte más potente del generador — y la que más diferencia hace en el flujo de trabajo — es la de variables numéricas. Puedes generar escalas para tamaños generales, bordes, radios, espaciados y, sobre todo, tamaños de fuente. Este último es el que te recomiendo que explores primero porque es donde el generador resuelve el problema más concreto: calcular valores clamp() sin entender la fórmula. Para profundizar en qué son y cómo funcionan estas unidades CSS avanzadas en Divi 5, tengo un post dedicado a eso.

La escala fluida con CLAMP (la que yo recomiendo)

Al configurar variables de tamaño de fuente, tienes tres opciones de escala: fluida, fija y única. La que yo recomiendo sin dudarlo es la escala fluida. Esta opción usa clamp() para que el tamaño del texto se adapte progresivamente al ancho de pantalla — crece cuando la pantalla es grande, se reduce cuando es pequeña, y lo hace de forma suave y continua, no con saltos bruscos en puntos de quiebre específicos.

La escala fija genera valores en píxeles (el método clásico), y la opción única sirve para un solo valor en concreto. Para tipografía de sitio, la escala fluida es siempre la mejor opción desde el punto de vista del diseño responsive.

Nomenclatura: T-shirt o numérica

Para nombrar las variables tienes dos sistemas. El sistema T-shirt usa los tamaños XS, S, M, L, XL, 2XL — una nomenclatura muy común en CSS que resulta intuitiva porque todos entendemos qué significa «grande» y «extra pequeño». El sistema numérico usa 1, 2, 3… y es igual de válido si prefieres esa lógica. Puedes personalizar el prefijo de las variables — por ejemplo «size-» o «text-» — para que quede claro a qué tipo de valor corresponde.

La base de la escala es el tamaño M, que por defecto es 16px para texto de cuerpo. A partir de ahí, el generador propone tamaños menores hacia abajo y mayores hacia arriba. Puedes agregar o quitar variantes en ambas direcciones según lo que necesite el proyecto. Para tipografía, te recomiendo que uses REM como unidad de salida — es lo que el generador propone por defecto y es lo correcto para mantener la accesibilidad del sitio.

Consejo: Antes de agregar las variables al sitio, usa el botón «Show CSS» para revisar el cálculo de clamp() que generó. No necesitas entender la fórmula entera, pero sí verificar que los valores mínimo y máximo tienen sentido para el tamaño que quieres. Si el H1 genera un mínimo de 28px y un máximo de 48px, eso ya te dice si la escala está bien calibrada.

Cómo asignar las variables generadas a presets y módulos

Una vez que agregas las variables al Variable Manager, el siguiente paso es asignarlas a tus presets globales. Por ejemplo, si tienes un preset de tipografía para el H3, puedes abrir ese preset, ir al campo de tamaño de fuente y en lugar de escribir un valor fijo, seleccionar la variable que acabas de generar. A partir de ese momento, todos los módulos que usen ese preset heredan automáticamente la variable — y si en algún momento quieres ajustar la escala, solo modificas el valor en el Variable Manager y el cambio se propaga solo. Así es como funciona un sistema de diseño bien construido, y esto se conecta directamente con todo lo que explico en el post sobre el Sistema de Diseño en Divi 5.

Todo esto también se integra con los Composable Settings de Divi 5: si habilitas opciones adicionales para un módulo usando Composable Settings, esas opciones también pueden recibir variables generadas con esta herramienta.

🎓 ¿Quieres acceder al Generador de Variables de UXDivi?
En uxdivi.com/generador-de-variables-divi-5 encontrarás la herramienta exclusiva de UXDivi para generar tu sistema de variables completo a partir de una URL o un mood board de diseño — con colores, tipografías, espaciados y más, listos para copiar directamente en Divi 5. Disponible para suscriptores.

Generador nativo de Divi 5 vs. Generador de Variables de UXDivi

Aquí viene la pregunta que varios suscriptores me van a hacer, así que la respondo directamente: ¿para qué sirve el generador de UXDivi si Divi 5 ahora tiene uno propio?

La diferencia principal es el punto de partida. El generador nativo de Divi 5 te pide que definas todo desde cero: escoges un color primario, configuras los parámetros de la paleta, defines los tamaños base y vas construyendo variable por variable. Es útil y resuelve el problema del clamp(), pero requiere que tú ya sepas qué quieres.

Consejo: Usa ambas herramientas de forma complementaria. Genera el sistema base con el Generador de Variables de UXDivi a partir de tu sitio de referencia, y luego usa el generador nativo de Divi 5 para agregar variables adicionales que el reporte no incluya — por ejemplo, variantes específicas de borde o radios personalizados.

El Generador de Variables de UXDivi parte de un sitio de referencia o de imágenes de tu mood board. Le das la URL de un sitio que te gusta o de un diseño que tienes de inspiración, y la herramienta escanea ese sitio y genera automáticamente el color primario, el color secundario, un color de contraste para botones, los colores de headings y texto de cuerpo, los tamaños tipográficos del H1 al H6 en clamp(), la tipografía de cuerpo, el layout estructural con gap y sugerencias de variables adicionales. Todo en un reporte descargable que puedes copiar directamente en tu Variable Manager de Divi 5.

En resumen: si ya tienes claro el sistema de variables que quieres y solo necesitas que alguien calcule el clamp() por ti, el generador nativo de Divi funciona muy bien. Si partes de un diseño de inspiración y quieres que el sistema se genere solo a partir de ahí, el generador de UXDivi sigue siendo la opción más completa y más rápida.

🎓 ¿Quieres dominar el sistema de variables y el diseño modular en Divi 5?
En uxdivi.com/cursos tenemos el Curso de Divi 5 donde explico a fondo el Variable Manager, los presets, el generador de variables y cómo construir un sistema de diseño profesional completo aplicado a proyectos reales. Accede como suscriptor y empieza hoy.

Lo que te recomiendo hacer con esta actualización

1. Empieza con la tipografía fluida. Es donde el generador resuelve el problema más concreto. Define tu color primario y tus tres o cuatro tamaños tipográficos principales usando la escala fluida con CLAMP y asígnalos a tus presets globales.
2. No generes más variables de las que vas a usar. Es tentador generar diez shades de cada color, pero terminarás con una lista inmanejable. Define primero qué variables necesita el diseño y genera solo esas.
3. Usa el Generador de UXDivi si tienes un sitio de referencia. Es mucho más rápido partir de un escaneo que construir desde cero. El reporte te da todo el sistema en un solo paso.
4. Asigna las variables a presets, no directamente a módulos. Si asignas la variable al preset global, el cambio se propaga solo. Si la asignas módulo por módulo, pierdes todo el beneficio del sistema.
5. Documenta tu nomenclatura antes de empezar. Decide si usas T-shirt o numérico, qué prefijo llevan las variables de color y cuál llevan las de tamaño. Una nomenclatura consistente desde el primer día te ahorra confusión en el futuro.

Conclusión

El nuevo generador nativo de variables de Divi 5 resuelve un problema real: calcular valores CSS complejos como clamp() ya no requiere entender la fórmula. Con pocos clics puedes tener una paleta de colores coherente y una escala tipográfica fluida lista para usar en todo el sitio. Si aún no tienes un sistema de variables en tus proyectos de Divi 5, esta herramienta es el mejor punto de partida para empezar hoy.