Una de las grandes novedades de Divi 5 es la incorporación de las Variables Globales, un sistema que permite centralizar el diseño y la configuración de un sitio web. Gracias a ellas, puedes controlar colores, tipografías, imágenes o incluso enlaces desde un solo panel, asegurando coherencia y ahorrando mucho tiempo.

El concepto es simple: defines un valor una sola vez y ese valor se aplica automáticamente a todos los módulos y páginas que lo usen. Cuando quieras cambiar algo, basta con actualizar la variable en lugar de editar elemento por elemento.

En DiviNewsPro (DNP) hemos probado a fondo estas opciones y hemos elegido un set de variables minimalista pero muy efectivo, adaptado al estilo periódico digital. A continuación, repasamos cada tipo de variable, las alternativas que existen y cuáles son las que usamos nosotros.

Cómo cambiar las variables en Divi 5

Para editar cualquiera de las variables globales, hay que ir al panel de Variables dentro del constructor:

1. Abre el Visual Builder en cualquier página.
2. Mira en la esquina superior izquierda: ahí verás el icono circular multicolor (símbolo de Variables).
3. Haz clic sobre él y se abrirá el panel lateral con las seis categorías:
   • Numbers
   • Text
   • Images
   • Links
   • Colors
   • Fonts
4. Selecciona la categoría que quieras y edita el Name o el Value.
5. Guarda los cambios: automáticamente se aplicarán en todo el sitio a cada módulo que use esa variable.

Esto significa que si cambias, por ejemplo, el valor de H1, todos los titulares de tu web se ajustarán al nuevo tamaño sin necesidad de editarlos uno a uno.

Numbers

Controlan valores numéricos como tamaños de texto, espaciados y titulares (H1, H2, H3, H4).

Se crean en el panel Variables → Numbers → Add Number indicando un Name y un Value.

Los valores se pueden definir de muchas formas:

• px → valores fijos (ej. 36px).
• em / rem → relativos al tamaño base del texto (ej. 2rem).
• % → proporcionales a un contenedor.
• clamp() → escala fluida entre un mínimo y un máximo según el ancho de pantalla.

En DNP hemos optado por clamp() porque permite que los títulos y párrafos crezcan o se reduzcan suavemente según el dispositivo, sin depender de breakpoints fijos.

Estos son los valores que usamos:

• H1 → clamp(28px, 4vw, 36px)
• H2 → clamp(22px, 3vw, 28px)
• H3 → clamp(18px, 2.5vw, 22px)
• H4 → clamp(16px, 2vw, 18px)
• Body 1 → clamp(14px, 1.8vw, 16px)
• Body 2 → clamp(16px, 2.2vw, 20px)

Text

Las variables de Text sirven para definir estilos tipográficos que luego se aplican en todo el sitio: titulares, párrafos y metadatos.

Se crean en el panel Variables → Text → Add Text, donde solo hay que indicar dos cosas:

• Name → el identificador de la variable (ej. Heading, Body, Meta).
• String → la fuente en formato CSS (ej. Georgia, serif).

En DNP hemos elegido un set muy claro:

• Heading → Adamina, serif → para los titulares (H1–H4).
• Body → Georgia, serif → para el texto principal de los artículos.
• Meta → Lato, sans-serif → para metadatos como fechas, autores o categorías.

Lo bueno de este sistema es que si en el futuro decides cambiar de tipografía, basta con actualizar la variable y todo el sitio se adaptará automáticamente, sin necesidad de editar cada módulo o estilo manualmente.

Images

Las variables de Images permiten guardar imágenes globales que se pueden reutilizar en diferentes partes del sitio. Están pensadas principalmente para elementos que se repiten con frecuencia, como el logotipo, iconos de marca o placeholders de diseño.

Se crean en el panel Variables → Images → Add Image, donde solo hay que asignar un nombre y subir el archivo correspondiente.

En muchos proyectos resultan muy útiles, ya que si cambias el logotipo o un icono, basta con sustituir la imagen en la variable y se actualizará automáticamente en todos los lugares donde se utilice.

En DNP hemos decidido no usarlas de momento, porque nuestro diseño se apoya más en imágenes de portada y contenido. Sin embargo, dejamos la opción abierta para añadir en el futuro placeholders estándar en formato 3×2 y 1×1, que nos servirían como guía visual en el maquetado.

Links

Las variables de Links permiten guardar direcciones web que se repiten en distintas partes del sitio, como botones, menús o llamadas a la acción. Gracias a ellas no es necesario copiar y pegar la misma URL una y otra vez.

Se crean en el panel Variables → Links → Add Link, indicando:

• Name → el identificador del enlace (ejemplo: Home, Contacto, Newsletter).
• URL → la dirección completa o relativa (ejemplo: https://divinewspro.com o /contacto/).

Una de sus ventajas es que, si la URL cambia en el futuro, basta con actualizarla en la variable y automáticamente se corrige en todos los módulos que la usen.

En DNP hemos empezado de forma sencilla con el enlace Home, que sirve para volver a la página principal.

Colors

Las variables de Colors son la base cromática de Divi 5. El sistema incluye cuatro colores fijos que no se pueden renombrar:

• Primary Color
• Secondary Color
• Heading Text Color
• Body Text Color

Además, se pueden añadir colores extra como variables globales adicionales, lo que permite ampliar la paleta con tonos neutros o acentos específicos.

Se configuran en el panel Variables → Colors → Add Color, donde se selecciona el tono desde la rueda cromática o se introduce el valor en formato hexadecimal (ejemplo: #0056A6).

En DNP hemos optado por un esquema sencillo y profesional:

• Primary → Azul #0056A6 para enlaces y botones.
• Secondary → Gris claro #F5F5F5 para fondos de secciones.
• Heading Text → Negro #000000 para titulares.
• Body Text → Gris oscuro #222222 para párrafos.
• Extras → Gris medio #666666 para metadatos y Blanco #FFFFFF para textos invertidos.

De este modo conseguimos un diseño minimalista en blanco y negro con un acento azul, que refuerza la identidad visual del proyecto.

Fonts

Las variables de Fonts permiten definir las tipografías que luego se aplican en los estilos de texto. Funcionan como un almacén central de fuentes: una vez creadas, se pueden reutilizar en cualquier módulo o estilo sin necesidad de volver a escribirlas.

Se crean en el panel Variables → Fonts → Add Font, indicando:

• Name → el identificador de la fuente (ejemplo: Heading, Body, Meta).
• String → la llamada CSS a la tipografía (ejemplo: Georgia, serif).

En DNP hemos elegido un set tipográfico adaptado al estilo periódico digital:

• Heading → Adamina, serif para titulares.
• Body → Georgia, serif para el texto principal.
• Meta → Lato, sans-serif para metadatos como autor, fecha o categorías.

La ventaja de este sistema es que si en el futuro se decide cambiar la tipografía, basta con modificar la variable en Fonts y automáticamente se actualizará en todo el sitio sin necesidad de hacerlo módulo por módulo.

Resumen final

Las Variables Globales de Divi 5 son una de las funciones más potentes de esta nueva versión. Permiten centralizar todos los aspectos clave del diseño: números (tamaños y espaciados), estilos de texto, imágenes, enlaces, colores y tipografías.

En DNP hemos optado por un sistema minimalista y coherente:

• Numbers con valores en clamp() para escalar fluidamente.
• Text con tres estilos base (Heading, Body, Meta).
• Images de momento en blanco, salvo futuros placeholders en 3×2 y 1×1.
• Links empezando por Home, con posibilidad de añadir Contacto y Newsletter.
• Colors en blanco, negro, gris y azul para mantener un look profesional.
• Fonts con Adamina, Georgia y Lato como tipografías principales.

Este enfoque demuestra que las variables son la herramienta perfecta para mantener consistencia, ahorrar tiempo y preparar una plantilla escalable.

Un sistema vivo y flexible que convierte el diseño con Divi 5 en una experiencia más rápida, ordenada y profesional.