Paleta de colores de Divi: guía de uso

La identidad visual de un sitio web se sostiene principalmente en dos cosas: la tipografía y los colores. Si los colores no son consistentes — un botón aquí en azul, otro allá en turquesa, un heading en un tono y el siguiente en otro — el sitio se ve amateur sin importar qué tan bueno sea el layout. Gestionar la paleta de colores de Divi correctamente es lo que separa un sitio genérico de uno que transmite marca con claridad. Y Divi tiene herramientas bastante potentes para esto, aunque no todo el mundo sabe cómo usarlas juntas.

En este post te explico todos los métodos disponibles para trabajar con la paleta de colores en Divi: copiar y pegar estilos entre módulos, extender estilos de forma masiva, buscar y reemplazar colores en todo el sitio, usar Presets para mantener consistencia, y cambiar los hexadecimales directamente en el CSS del child theme. Y al final te cuento cómo todo esto encaja con el nuevo sistema de colores de Divi 5, que lleva estas capacidades a otro nivel.

Cuándo usar cada método: tabla de referencia rápida

Antes de entrar en los detalles de cada técnica, es útil tener claro para qué sirve cada una. No son intercambiables — cada una tiene su caso de uso ideal:

Cómo cambiar la paleta desde el Divi Builder

Copiar y pegar estilos

Esta es la técnica más rápida para replicar el color de un módulo a otro. Funciona así: haces clic derecho sobre el módulo que ya tiene el color que quieres copiar, seleccionas Copiar estilos del módulo en el menú contextual, luego haces clic derecho sobre el módulo destino y seleccionas Pegar estilos del módulo. En segundos, el módulo destino hereda todos los estilos del origen — no solo el color, sino también tipografía, bordes y demás.

Consejo: si solo quieres copiar el color y no todos los demás estilos, usa "Pegar estilos del módulo" con cuidado — va a pegar todo, no solo el color. En ese caso es mejor anotar el hexadecimal del módulo original y aplicarlo manualmente en el módulo destino.

Extender estilos

La función Extender va un paso más allá del copiado individual. Con ella puedes tomar los estilos de un módulo y propagarlos a todos los módulos del mismo tipo en la página — o incluso en todo el sitio — en una sola operación. Para usarla, haz clic derecho sobre el módulo de referencia y selecciona Extender estilos. Divi te mostrará un panel donde puedes elegir a qué módulos aplicar los estilos y con qué alcance (solo este módulo, todos los de esta página, o todos los del sitio).

Es una herramienta muy poderosa para estandarizar la paleta de colores cuando ya tienes páginas construidas y quieres unificar el estilo. Úsala con criterio porque el alcance "todo el sitio" puede tener consecuencias amplias si hay módulos del mismo tipo con estilos intencionales diferentes.

Buscar y reemplazar colores

Si tu cliente cambia de identidad y necesitas reemplazar el azul corporativo por uno nuevo en todas las páginas, esta es la herramienta que buscas. Haz clic derecho en cualquier módulo y selecciona Buscar y reemplazar. En el panel que aparece, selecciona "Color" como tipo de propiedad, ingresa el valor hexadecimal original que quieres reemplazar, y el nuevo valor. Divi buscará ese color exacto en todos los módulos del alcance que definas y lo reemplazará.

Consejo: antes de hacer un reemplazo masivo, haz un backup de la página o del sitio. Si el reemplazo afecta módulos que no querías tocar, es más fácil restaurar que deshacer manualmente.

Presets de módulo

Los Presets son la forma más estructurada de gestionar colores en Divi. Un Preset es básicamente un conjunto de estilos guardado que puedes aplicar a cualquier módulo del mismo tipo con un solo clic. Cuando creas un Preset de botón, por ejemplo, defines su color, tipografía, bordes y hover — y desde ese momento, cada vez que insertes un botón nuevo en cualquier página del sitio, puedes aplicarle ese preset en lugar de configurarlo desde cero.

Para crear un Preset: configura el módulo como quieres que sea, abre el panel de configuración, ve a la sección de Presets en la parte superior y selecciona "Guardar como nuevo Preset". Para aplicar un Preset existente a un módulo, abre la configuración del módulo y selecciona el Preset deseado desde el mismo panel. La ventaja más grande de los Presets es que si actualizas el Preset, todos los módulos que lo usan se actualizan automáticamente.

🎓 ¿Quieres aprender a usar Presets y el sistema de diseño completo de Divi 5?
El Curso de Divi 5 completo en español te enseña a construir sistemas de diseño reutilizables con Presets, variables globales y el nuevo Global Styles de Divi 5.

Cómo cambiar colores hexadecimales en el CSS del child theme

Cuando tienes una paleta de colores definida como variables CSS en el child theme, cambiar toda la identidad visual del sitio se reduce a modificar unos pocos valores en un solo archivo. Esta es la forma más escalable y mantenible de gestionar colores en cualquier sitio de Divi.

1. Abre el archivo style.css de tu child theme en un editor de código (VS Code, Sublime Text, el editor del hosting, o incluso el editor integrado de WordPress en Apariencia → Editor de Temas).
2. Copia el CSS del child theme a tu editor local si trabajas en remoto.
3. Usa la función de buscar y reemplazar del editor para encontrar el hexadecimal antiguo (por ejemplo #014DFD) y reemplazarlo por el nuevo.
4. Repite para cada color de la paleta que necesitas cambiar.
5. Guarda el archivo y sube los cambios al servidor.

Si estructuras tus colores como variables CSS personalizadas en el bloque :root de tu child theme, el proceso es incluso más limpio porque solo cambias el valor de la variable y el cambio se propaga automáticamente a donde sea que uses esa variable:

:root {
  --color-primario: #014DFD;
  --color-secundario: #FF6B35;
  --color-texto: #1A1A2E;
}

Consejo: nunca modifiques el style.css del tema padre de Divi directamente — esos cambios se borran en cada actualización. Siempre trabaja en el child theme. Si aún no tienes un child theme configurado, es el momento de hacerlo antes de agregar cualquier CSS personalizado.

Divi 5: el sistema global de colores

Con Divi 5 todo lo que describí arriba sigue funcionando, pero el sistema de gestión de colores creció significativamente. Divi 5 introduce un sistema de variables de color nativo — similar al concepto de tokens de diseño — donde puedes definir tu paleta una vez en el Global Styles y referenciarla desde cualquier módulo del builder. Esto significa que si mañana tu cliente cambia el color primario, cambias el valor en un solo lugar y el cambio se propaga a todo el sitio automáticamente, sin necesidad de buscar y reemplazar manualmente.

También hay un sistema de colores relativos en Divi 5 — puedes definir variaciones de un color base (más claro, más oscuro, más transparente) de forma programática, lo que hace mucho más fácil crear paletas coherentes sin tener que calcular los hexadecimales manualmente. Si quieres profundizar en este sistema, tengo un post específico sobre el sistema de colores relativos en Divi 5 y también sobre el sistema de diseño completo de Divi 5 donde explico cómo encajan todas estas piezas.

🎓 ¿Quieres dominar el sistema de colores y el diseño visual en Divi 5?
El Curso de Divi 5 completo en español te enseña a construir sistemas de diseño profesionales usando el Global Styles, las variables de color nativas y los Presets de Divi 5.

Preguntas frecuentes sobre la paleta de colores en Divi

¿Puedo tener varios presets de color para el mismo tipo de módulo?

Sí. Puedes crear tantos Presets como necesites para cada tipo de módulo. Por ejemplo, puedes tener un Preset "Botón primario" en azul, un Preset "Botón secundario" en blanco con borde, y un Preset "Botón peligro" en rojo. Cuando insertas un botón nuevo, simplemente seleccionas el Preset que corresponde a ese uso específico.

¿Los presets se aplican entre páginas distintas?

Sí. Los Presets son globales — están disponibles en todas las páginas del sitio. Cuando creas un Preset en una página, puedes usarlo en cualquier otra página que tenga el mismo tipo de módulo. Esta es precisamente su ventaja principal: una vez que defines un Preset, lo tienes disponible en todo el proyecto.

Si actualizo un Preset, ¿afecta a módulos que ya lo tienen aplicado?

Sí, esa es la potencia de los Presets. Si modificas un Preset, todos los módulos del sitio que tienen ese Preset asignado se actualizan automáticamente. Por eso es importante nombrar bien tus Presets y documentar cuáles usas en cada proyecto.

¿Cómo sé qué hexadecimal usar para que sea accesible?

La regla básica es asegurarte de que el contraste entre el color del texto y el color del fondo sea suficiente para ser legible. Para texto normal, el estándar WCAG AA requiere un ratio de contraste de al menos 4.5:1. Puedes verificarlo con herramientas gratuitas como el Contrast Checker de WebAIM — pega tus dos hexadecimales y te dice si la combinación pasa o falla el estándar.

¿Los colores de la paleta de Divi se guardan en la base de datos?

Los colores personalizados que guardas en la paleta de colores del builder sí se almacenan en las opciones de WordPress. Los estilos de módulos individuales se guardan como parte del contenido del post en la base de datos. Por eso cuando haces un export de una página de Divi, los estilos viajan con ella.

Conclusión

La paleta de colores de Divi no es solo ese selector de color que aparece en cada módulo — es un sistema de herramientas que, bien usado, te permite mantener la identidad visual de un sitio de forma eficiente y escalable. Copiar estilos sirve para ajustes puntuales; Extender para cambios masivos en una sola operación; Buscar y reemplazar para rebranding; Presets para estandarizar desde el inicio; y el CSS del child theme para control total desde el código. Con Divi 5 eso se amplía aún más con el sistema de variables nativas. Aprende a elegir la herramienta correcta para cada situación y trabajarás mucho más rápido en tus proyectos.

🎓 ¿Quieres dominar Divi 5 de punta a punta?
El Curso de Divi 5 completo en español te da el sistema completo paso a paso: diseño visual, colores globales, Presets, child theme y flujo de trabajo profesional con Divi 5.