Si hay algo que siempre ha sido un dolor de cabeza al construir sitios web con Divi es la inconsistencia: botones que no coinciden de una sección a otra, tipografías que cambian según quién las tocó por último, colores que se repiten de distintas formas en distintos módulos. Todo ese caos tiene solución con el Sistema de Diseño en Divi 5. Y en este tutorial te voy a explicar exactamente cómo funciona, cómo configurarlo desde cero y cómo usar la herramienta que desarrollé especialmente para que el proceso sea mucho más rápido.

Este es, sin exageración, uno de los cambios más relevantes que Elegant Themes ha introducido con Divi 5. No es un detalle menor. Cambia por completo la forma en que trabajamos.

¿Por qué el Sistema de Diseño en Divi 5 es un cambio de juego?

El Sistema de Diseño en Divi 5 resuelve un problema que cualquier diseñador web ha vivido: hacer un cambio global en el estilo de un sitio y tener que ir módulo por módulo actualizando colores, tamaños o tipografías. Con el sistema de diseño, defines los valores una vez y los cambios se propagan solos.

Es la versión visual de lo que en CSS llamamos :root — las variables CSS globales que se definen una vez y se usan en todo el proyecto. Divi 5 te da esa capacidad directamente desde el constructor, sin tocar una sola línea de código.

El resultado práctico: más coherencia, menos tiempo, diseño más ordenado. Y cuando un cliente quiere cambiar su color primario o ajustar el tamaño de los encabezados, lo haces en un solo lugar y listo.

Las dos piezas del Sistema de Diseño en Divi 5

El sistema se estructura en dos componentes principales que trabajan juntos:

El Gestor de Variables (Variable Manager)

Aquí defines los valores globales que va a usar todo el sitio: colores, fuentes, números, imágenes, textos y enlaces. En la práctica, los que más vas a usar son los colores y los números.

Los colores te permiten establecer tu paleta completa: color primario, secundario, contraste, heading, body, links, backgrounds, bordes. Los números son igual de importantes porque ahí defines los tamaños tipográficos con valores clamp, los anchos de fila y los gaps de columnas. Las fuentes también se definen aquí, aunque suelen cambiar menos a lo largo de un proyecto.

El Gestor de Presets (Preset Manager)

Una vez que tienes las variables, los presets son los componentes de diseño. Defines cómo debe verse una sección, una fila o un módulo de texto, y puedes establecer ese preset como global (para que aplique a todos los elementos de ese tipo en el sitio) o como preset específico para asignarlo manualmente.

Consejo: Si recién empiezas con el sistema de diseño, crea primero los presets globales de sección, fila y módulo de texto antes de construir ninguna página. Configurarlos al inicio es mucho más sencillo que tener que actualizarlos cuando ya tienes 20 páginas construidas.

La herramienta que acelera todo: UXDivi Design System Generator

Una de las primeras fricciones al crear un sistema de variables es extraer los estilos de un sitio de referencia. Tienes una web de inspiración o el sitio viejo del cliente, y quieres trasladar esos valores a Divi 5. Hacerlo manualmente es tedioso.

Por eso desarrollé el UXDivi Design System Generator, una herramienta exclusiva para suscriptores de UXDivi. Funciona de dos formas: puedes ingresar la URL de un sitio en vivo o subir una imagen (hasta 3 MB). La herramienta usa inteligencia artificial para analizar el diseño, detectar tipografías, paletas de color y estructuras de layout, y te genera un reporte completo con todos los valores listos para trasladar a las variables de Divi 5.

🛠️ Prueba el UXDivi Design System Generator
Genera el sistema de variables de Divi 5 de cualquier sitio web en menos de 60 segundos. Es una herramienta exclusiva para suscriptores de UXDivi — accede directamente aquí: uxdivi.com/generador-de-variables-divi-5

El reporte incluye: colores globales (primario, secundario, contraste, headings, body, links, backgrounds, bordes), tipografías recomendadas con alternativas de Google Fonts cuando las detectadas son de pago, tamaños tipográficos en formato clamp para texto fluido, anchos de fila para desktop y móvil, column gap y padding de secciones, y border radius recomendado según el estilo visual del sitio.

Lo puedes descargar en Markdown como backup de trabajo o en PDF para compartirlo con el cliente. Los suscriptores premium tienen hasta cinco escaneos gratuitos por mes.

🎓 ¿Quieres acceder al UXDivi Design System Generator y a todas las herramientas premium?
En uxdivi.com/cursos tienes acceso a esta herramienta y a más de 50 cursos publicados. Si todavía no eres suscriptor, este es un buen momento — este año seguimos sumando herramientas y contenido nuevo cada mes. ¡Únete y úsala desde el primer día!

Paso 1: Configura las variables globales

Colores

Empieza por los colores. Define al menos estos: color primario, secundario, contraste, heading color, body color, link color, background principal, dark background, gray background, border color y border color dark. No hace falta que los inventes todos desde cero — usa el reporte del generador como guía y ajusta los valores según la identidad visual real del cliente.

Una aclaración importante: el generador es una guía, no una fuente de verdad absoluta. Hay casos donde el color primario que detecta no coincide con lo que tú o el cliente consideráis el color principal del sitio. Eso está bien. La herramienta te ahorra el trabajo de extracción; las decisiones de diseño siguen siendo tuyas.

Tipografías

Aquí simplemente seleccionas las fuentes en el gestor de variables. Un sitio web en 2026 raramente necesita más de tres tipografías: una para headings, una para body y una decorativa opcional. El generador te da sugerencias basadas en lo que detecta y alternativas de Google Fonts si las fuentes originales son de pago.

Números y layout

Esta parte es la que más diferencia hace a la hora de construir responsive. Define los tamaños tipográficos con clamp para que sean fluidos:

• clamp(36px, 5vw, 72px) para H1: empieza en 72px en pantallas grandes y escala hasta 36px en pantallas pequeñas, de forma continua y sin saltos.
• Lo mismo para H2, H3 y los demás headings, con valores proporcionales.
• Para el body, puedes usar un valor absoluto en píxeles o un valor con M (em relativo).

También define aquí el ancho máximo de la fila para desktop (normalmente 1200px como valor absoluto) y para móvil (mi recomendación siempre es 90% o 92% relativo, no un valor fijo en píxeles). La razón: con un porcentaje relativo, el ancho de la fila se adapta al tamaño real de la pantalla, sea un iPhone 11 o un iPhone 17 Pro Max, sin que el diseño se vea nunca ni muy apretado ni con demasiado margen.

Define también el column gap del 3% — suficiente para separar columnas visualmente sin comerse espacio de contenido.

Consejo: El ancho de fila en móvil es uno de los parámetros que más personas dejan en el valor por defecto y que más afecta el aspecto del sitio en dispositivos pequeños. Definirlo como variable global desde el inicio es una de esas configuraciones que parece pequeña pero que cambia mucho el resultado final.

Paso 2: Establece los presets globales

Con las variables definidas, el siguiente paso es crear los presets globales para los elementos base: secciones, filas y módulos de texto.

Preset global de secciones

Crea una sección nueva, asígnale el color de fondo como variable global (no como valor fijo), ajusta los gaps horizontal y vertical a valores que se sientan bien para tu diseño (30px en lugar de los 60px por defecto suele funcionar mejor) y luego ve al gestor de presets de la sección. Ahí encontrarás el preset marcado con una estrella — ese es el preset global. Actualízalo con los estilos que acabas de definir.

A partir de ese momento, cada sección nueva que crees en cualquier página del sitio va a heredar esos valores automáticamente.

Preset global de filas (rows)

Para las filas, los valores clave son: que el layout use flex, el width del 100%, el max-width de la variable global para desktop y el max-width responsivo de la variable global para móvil (92%). Activa el modo responsive en el campo max-width para poder asignar el valor de móvil de forma independiente.

También asigna el column gap como variable global en lugar de un valor fijo. De esa forma, si en algún momento decides cambiar el gap de 3% a 4%, lo cambias en un solo lugar.

Actualiza el preset global de filas con estos valores.

Preset global del módulo de texto

Este es el más detallado. Define el peso tipográfico del cuerpo del texto, el tamaño usando tu variable de body text size, el line-height, y luego los headings H1, H2, H3 con sus respectivas variables de tamaño y line-height.

🎓 ¿Quieres aprender a construir el sistema de diseño completo en Divi 5 aplicado a proyectos reales?
Cubrimos este proceso a fondo en el curso de Divi 5 — variables, presets, componentes reutilizables y cómo aplicarlo desde el primer día en un proyecto de cliente. ¡Accede como suscriptor y aprende el método completo!

Una vez configurado, actualiza el preset global del módulo de texto y también el preset global de headings por separado. De esa forma, cuando agregues un módulo de CTA, un módulo de imagen con texto o un módulo de blur, va a tomar automáticamente los estilos tipográficos que ya tienes definidos.

Paso 3: Crea los componentes reutilizables

Con variables y presets globales configurados, el tercer paso es empezar a crear componentes de diseño: presets específicos para cada tipo de sección recurrente en el sitio.

Esto ya es trabajo que se va haciendo a medida que construyes. Por ejemplo: un preset para el hero (con título, subtítulo y dos botones), presets para filas con distintos colores de fondo, un componente para módulos de anuncio, uno para preguntas frecuentes, uno para testimonios. Cada uno se crea una vez y se reutiliza en todo el sitio con consistencia garantizada.

Recomendaciones finales

Si vas a empezar a usar el Sistema de Diseño en Divi 5, te dejo las cinco cosas que considero más importantes:

1. Define variables antes de construir. Una vez que empiezas a construir páginas sin variables, actualizarlas después es mucho más trabajo.
2. Usa el generador de variables como punto de partida, no como resultado final. La herramienta te da el 80% del trabajo; el 20% restante requiere criterio de diseño.
3. El max-width de fila en móvil debe ser siempre un valor relativo (90-92%). Es una de las decisiones que más impacto tiene en el aspecto responsive del sitio.
4. Actualiza los presets globales antes de tener muchas páginas construidas. Cambiar el preset global cuando ya tienes 30 páginas funciona, pero es un momento de tensión que se puede evitar.
5. Los textos globales y los links de redes sociales como variables. Si tienes un número de WhatsApp o un enlace de Instagram que usas en varios botones del sitio, ponlos como variable. Cuando cambien, los actualizas en un solo lugar.

El Sistema de Diseño en Divi 5 no es una característica extra para usuarios avanzados. Es la forma correcta de construir en Divi 5 desde el primer día de cualquier proyecto, ya sea para un cliente o para tu propio sitio.