Las variables Divi se han vuelto mucho más listas de lo que eran: desde el anuncio del 27 de octubre pueden anidarse unas dentro de otras, entrar en cálculos y compartir campo con el contenido dinámico de tu web. Si maquetas con Divi 5, esto te ahorra la parte del mantenimiento que más pereza da: retocar el mismo valor en veinte sitios distintos.
Y si nunca has tocado una variable, tranquilo: empezamos desde cero y acabamos con los trucos nuevos, explicados sin humo y con ejemplos que puedes reconstruir en tu propia web esta misma tarde.
Variables Divi: qué son y de dónde vienen
Una variable es un valor con nombre: el azul de tu marca, el margen estándar de tus secciones, el nombre legal de tu empresa. La defines una vez en el Variable Manager y la reutilizas donde haga falta. El día que el azul cambia de tono, lo cambias una vez y toda la web lo sigue.
Divi 5 las trajo en primavera de 2025 como Design Variables, y desde entonces conviven con los presets y con los Relative Colors. Lo nuevo de octubre no es una función suelta: es la madurez de todo ese sistema.
Si llegas ahora a este constructor, tengo un análisis a fondo en mi artículo sobre qué es Divi, y una página dedicada al ecosistema completo en el índice de Divi 5 del blog.
¡Acelera Aun Mas WordPress!
Tres novedades en un solo anuncio
El 27 de octubre, Nick Roach publicó en el blog oficial de Elegant Themes la entrega más jugosa del sistema de variables hasta la fecha: anidación, cálculo y combinación. Puedes leer el anuncio completo en el blog de Elegant Themes. Resumido, esto es lo que cambia para ti.
Variable Math: los números ahora se calculan
Una variable numérica puede entrar en un cálculo dentro de cualquier campo de número compatible: suma, resta, multiplicación o división.
El ejemplo del anuncio es puro día a día. Una sección tiene su espaciado controlado por una variable de padding. Quieres que una imagen sobresalga del borde, así que le das un margen negativo: la misma variable multiplicada por menos uno. Ajustas el espaciado original y el margen negativo se recoloca solo.
El mismo truco sirve para relacionar valores en todo el diseño: una tarjeta grande con el doble del espaciado estándar, un hueco pequeño a la mitad del espaciado base, un contenedor al que le restas el canal común a su ancho.
Tú decides si ese cálculo vive en un solo campo o merece convertirse en variable reutilizable. Los ajustes de usar y tirar se quedan en el elemento; los que se repiten pasan a formar parte de tu sistema de tamaños.
Variables dentro de variables: el truco de la matrioska
La segunda novedad es la anidación: una variable puede contener otras variables. Abres el Variable Manager desde la barra lateral del constructor, editas una variable de número o de texto, y su campo de valor ya incluye controles para insertar variables dentro. En vez de copiar contenidos, construyes valores a partir de otros valores.
El ejemplo estrella es la tipografía fluida. Las unidades avanzadas de Divi ya aceptaban funciones como clamp; ahora puedes meter variables dentro. Creas una variable de tamaño mínimo y otra de máximo, y luego una tercera, tu titular fluido, que referencia ambas dentro de la función. El valor intermedio controla cómo escala el título con la pantalla, y las variables marcan los límites. Cuando el cliente pide títulos más grandes, cambias la variable de máximo y el cambio se propaga por toda la cadena.
La anidación también funciona con textos. Creas una variable con el nombre legal y otra con el año, y las montas dentro de una tercera variable de copyright. La usas en el pie de tus webs y, al cambiar el nombre o el año, todo se actualiza en cascada.
¡Compara Antes Tomar Una Decisión!
Texto, contenido dinámico y variables en el mismo campo
La tercera novedad mezcla fuentes en un único campo: variables, contenido dinámico y texto escrito por ti, tanto en campos de texto normales como de texto enriquecido.
El caso típico es la línea de autoría de un blog. Escribes la palabra «por», insertas el autor de la entrada desde el menú de contenido dinámico, y añades la fecha y el número de comentarios con tus propios separadores. Todo dentro de un único módulo de texto, con cada fuente editable por separado y con la negrita o la cursiva conservadas.
También funciona en el Loop Builder, de modo que esa misma línea puede mostrar autor, fecha y comentarios en cada entrada de un listado sin perder ni el formato ni los separadores.
Cómo usar las variables Divi en tu día a día
Vale, la teoría está bien. Ahora la parte que importa: cómo se montan las variables de Divi en una web real, sin dar vueltas.
Tu primera variable desde el Variable Manager
Abre el constructor visual y localiza el Variable Manager en la barra lateral. Crea una variable de color con el nombre de tu marca, dale su valor y aplícala donde hoy tienes ese azul escrito a mano.
A partir de ahí, cada vez que un módulo pida ese color, elige la variable en vez del valor fijo. Es el cambio de mentalidad más importante de todo el sistema: dejas de apuntar valores y empiezas a apuntar nombres.
Tipografía fluida con límites compartidos
Crea las dos variables de tamaño: el mínimo y el máximo de tu titular. Después crea la variable fluida que las referencia con clamp desde el selector de unidades del campo, y aplícala a tus encabezados.
Lo bonito es la cadena de dependencias: la variable fluida mira a las otras dos, y tus encabezados miran a la fluida. Un cambio en la fuente recorre la cadena entera sin que toques ni un módulo.
El pie de página que se actualiza solo
La receta del copyright del anuncio, paso a paso: variable de nombre legal, variable de año y una variable de texto que anida ambas. La pegas en el pie y te olvidas de la clásica cabezada de cada enero, cuando descubres que el pie del año pasado sigue diciendo lo que no debía.
La interfaz de chips: pequeñas pastillas, gran diferencia
Todo esto sería un infierno si tocara ser incómodo. Por eso el anuncio también renueva la interfaz: cada fuente insertada aparece como su propio chip o pastilla, y se maneja como una pieza tangible.
Qué puedes hacer con cada chip
Haz clic en un chip y se abren sus opciones: reemplazar, quitar o desvincular una fuente sin cargarte el contenido que la rodea. En los campos de texto puedes arrastrar los chips para reordenarlos, y al pasar el ratón por encima ves su valor o la expresión anidada que esconde.
Los previews del selector de variables muestran las referencias anidadas como chips legibles. Y el buscador encuentra también los nombres de las variables referenciadas, no solo el de la variable contenedora: montar valores compuestos deja de ser un acto de fe.
El atajo de teclado para insertar variables Divi
En cualquier campo compatible de texto, URL o número CSS basta con escribir dos llaves de apertura seguidas para que se abra el selector justo donde está el cursor. Eliges la fuente y sigues escribiendo.
Si estás montando una frase larga o una fórmula con varias variables, es el atajo que hace que el sistema se sienta rápido de verdad.
¡Más De Divi!
Variables, presets y estilos globales: quién hace qué
Con tantas capas, conviene no perder el norte. Los presets guardan el estilo completo de un módulo: te creas un preset de botón corporativo y lo aplicas donde quieras. Las variables guardan valores sueltos que viajan entre módulos distintos: el mismo azul en un botón, en un titular y en un separador.
Mi regla práctica para no liarme: si lo que se repite es un valor entre elementos distintos, es variable; si lo que se repite es el conjunto de estilos de un mismo tipo de módulo, es preset. Y los estilos de texto globales siguen mandando en la tipografía base de la web.
Lo que significan las variables Divi frente a la competencia
Los sistemas de diseño llevan tiempo siendo el argumento de venta de los constructores modernos. Elementor ha reescrito su editor alrededor de bloques atómicos y sistemas de diseño, como te conté en el análisis del Atomic Editor. GeneratePress apuesta por los design tokens de GenerateBlocks, que vimos en la guía de formularios de GenerateBlocks Pro.
Divi, que en su día recibió críticas por su maquinaria pesada, está cerrando la distancia por la vía que mejor se le da: funciones visibles, sin fricción y pensadas para quien no quiere tocar código. Con las variables anidadas y calculadas, su sistema de diseño ya no tiene nada que envidiar en el uso diario.
Cuánto cuesta estrenarlas: los planes de Divi
Las variables no requieren un plan aparte: vienen con Divi. En precios verificados hoy en la web oficial, Divi Anual cuesta 89 $ al año con todos los temas y plugins de Elegant Themes, y Divi Lifetime se paga una sola vez: 249 $.
Divi Pro añade el ecosistema completo por 277 $ al año, presentado por la casa como un ahorro de 611 $ frente a contratar los servicios por separado: Divi AI, Divi Cloud, Divi VIP con respuestas en menos de 30 minutos, Divi Dash y Divi Teams. Todos los planes incluyen sitios ilimitados y 30 días de garantía.
Y un atajo que no todo el mundo conoce: los planes anuales de Tropical Server incluyen Divi Pro con IA, ese mismo paquete de 277 $ al año, sin coste extra. Lo analizo con lupa en mi review de Tropical Server.
Si aún dudas entre este constructor y la suite con la que construyo el blog, el duelo completo está en mi comparativa entre Divi y Thrive Architect.
¡Monetiza Tu Sitio Web!
Mi veredicto sobre el sistema de variables Divi
¿Es esto revolucionario? No: los design tokens existen en media industria. ¿Es útil? Muchísimo.
La diferencia entre un sistema de diseño que se usa y uno que se abandona está en la fricción, y Divi lo ha puesto fácil: chips visuales, atajo de teclado y dependencias legibles en cualquier campo.
Mi única advertencia es la disciplina con las variables Divi. No conviertas cada valor en variable ni cada cálculo en fórmula: un sistema con tres variables se mantiene, uno con cuarenta se vuelve una burocracia. Y pon nombres serios desde el primer día, porque dentro de seis meses «azul2_final» no le dirá nada ni a tu yo del futuro.
Conclusión
Las variables de Divi han pasado de ser una lista de valores reutilizables a un sistema de diseño con memoria: se anidan, hacen cuentas y se combinan con tu contenido. El anuncio del 27 de octubre confirma que Divi 5 sigue su hoja de ruta a buen ritmo: Icon Manager el 22, multiselección y edición en lote el 19, variables ahora.
Si maquetas con Divi, dedícales una tarde. Y si vienes de otro constructor, es una razón más para mirarlo sin prejuicios.
Preguntas frecuentes sobre las variables Divi
¿Qué son las variables Divi y para qué sirven?
Son valores con nombre (colores, tamaños, textos) que defines una vez en el Variable Manager de Divi y reutilizas en toda la web. Al cambiar la variable, todo lo que la usa se actualiza. En Divi 5, desde el anuncio del 27 de octubre de 2026, además se anidan, entran en cálculos y se combinan con contenido dinámico.
¿Necesito Divi Pro para usar las variables Divi?
Las variables forman parte de Divi 5 y funcionan con cualquier plan de Divi: Anual (89 $ al año) o Lifetime (249 $ de pago único). Divi Pro (277 $ al año) es opcional y añade servicios como Divi AI, Divi Cloud, Divi VIP y Divi Teams. Todos los planes incluyen 30 días de garantía.
¿Cómo se crea una variable anidada en Divi 5?
Abre el Variable Manager desde la barra lateral del constructor visual, edita una variable de número o de texto, y usa los controles de inserción de su campo de valor para meter otras variables dentro. El ejemplo típico del anuncio oficial: dos variables de tamaño (mínimo y máximo) referenciadas dentro de una variable de titular fluido.
¿Qué es Variable Math y para qué sirve?
Es la posibilidad de usar las variables Divi en cálculos de suma, resta, multiplicación y división dentro de campos de número compatibles. Sirve para relacionar valores del diseño: un margen negativo que sea tu espaciado multiplicado por menos uno, o una tarjeta con el doble del espaciado base. Ajustas la variable origen y todo lo que depende de ella se recoloca.
¿Las variables funcionan también para textos o solo para números?
Para ambos: las variables Divi cubren número y texto. Hay variables de texto que pueden anidarse entre sí (por ejemplo, nombre legal y año dentro de una variable de copyright) y, desde octubre de 2026, los campos de texto y de texto enriquecido aceptan variables junto a contenido dinámico y palabras tuyas. También funciona en el Loop Builder.
¿Merece la pena pasarse a Divi 5 por las variables Divi?
Si retocas diseños cada semana, sí: el ahorro de mantenimiento se nota en el primer mes. Si maquetas una página al año, las variables por sí solas quizá no justifiquen la migración, aunque se suman a otras mejoras de Divi 5 como el Icon Manager o la edición en lote.
¿Cuántas veces has cambiado un color en veinte sitios distintos?
"Si usas mi enlace, a ti te cuesta lo mismo y a mí me ayudas a seguir creando contenido gratuito. ¡Gracias!"
