Buscar y reemplazar colores y tipografías en Divi

En este videotutorial prémium haremos una guía práctica sobre uso de las funciones de buscar y reemplazar contenido dentro de Divi. Con esta función podrás cambiar o asignar cualquier estilo de color o tipografía a una serie de módulos dentro de un diseño completo con Divi.

Con esta video guía práctica podrás aprender a saber cómo usar las funciones de búsqueda para reemplazar el contenido en las diferentes secciones de tu diseño web hecho con Divi.

¿Por qué esta función de Divi te ahorra horas de trabajo?

La función "Buscar y Reemplazar" de Divi es una de esas features nativas que pocos diseñadores conocen, pero que cuando la dominas, ahorra horas en cada proyecto. Permite cambiar masivamente colores, tipografías y otros estilos en cualquier parte del sitio sin tocar página por página manualmente.

¿En qué casos vale oro?

• Rebranding de un sitio existente: cambiaste de paleta y necesitas actualizar el azul antiguo (#1234ab) por el nuevo color de marca en todas las páginas.
• Unificar tipografías: heredas un sitio con 5 fuentes distintas y quieres dejar solo dos (un sans-serif para títulos, otro para body).
• Migración de cliente: cuando recibes un sitio de otro diseñador con estilos inconsistentes, esta función + colores globales te permiten "limpiar" el sistema de diseño en minutos.
• Mantener consistencia editorial: especialmente útil si trabajas con un sistema de diseño definido como el de tu academia o portafolio.

La función incluye tres modos: buscar y reemplazar específico, extender estilos, y colores globales. Cada uno resuelve un problema distinto y los tres juntos son la base de un workflow profesional con Divi.

Modo 1: Buscar y reemplazar específico

El modo más simple y directo. Reemplaza un valor por otro en una propiedad específica.

1. Selecciona el elemento donde está el valor a reemplazar. Por ejemplo, una sección con un color azul que quieres cambiar.
2. Click derecho sobre la propiedad (color de fondo, color de texto, etc.) → "Find & Replace".
3. Define el alcance: solo en esta página, en todo el sitio, en plantillas del Theme Builder, etc. Lo más común es "Across this Page" o "Across This Website".
4. Activa "Replace in all option types" si quieres que el cambio aplique a colores de texto, fondo, borde, etc. todos a la vez. Sin esta opción solo reemplaza en el tipo exacto del elemento original.
5. Define el nuevo valor (ej. el nuevo naranja de marca) y click "Replace".

En 5 segundos, todo el sitio actualizado. Lo que antes te tomaba revisar página por página, queda hecho.

Modo 2: Extender estilos

El modo "Extend Styles" copia los estilos de un elemento a otros similares, sin tocar manualmente cada uno. Útil cuando quieres uniformar un componente que se usa en muchos lugares.

1. Diseña el elemento "modelo" con los estilos que quieres replicar (ej. un botón con tu nuevo estilo de marca).
2. Click derecho sobre el elemento → "Extend Styles". Define qué propiedades extender (solo el padding, solo los colores, todo el styling).
3. Define el alcance: a todos los botones de esta sección, esta columna, esta página, o todo el sitio.
4. Aplica. Divi copia los estilos seleccionados a todos los elementos del mismo tipo en el alcance definido.

Es la herramienta perfecta cuando rediseñaste un botón "modelo" y necesitas que todos los demás botones de un sitio existente lo igualen.

Modo 3: Colores globales (la verdadera magia)

El modo más poderoso de los tres. Defines colores como variables globales y los asignas a todos los elementos. Después, si cambias la variable global, todo el sitio se actualiza automáticamente.

1. Crea tu paleta de colores globales. En Divi → Theme Customizer → Color Palette. Define ahí tus colores principales (primario, secundario, acento, neutros).
2. Asigna colores globales a cada elemento. En el color picker de cualquier elemento, en lugar de elegir un HEX, click sobre el ícono de "Global Color" y selecciona uno de los colores de tu paleta.
3. Repite para todos los elementos del sitio: títulos, botones, fondos, bordes, sombras, íconos. Todos pueden vincularse a la paleta global.
4. Cuando necesites cambiar el branding: solo modificas el color en la paleta global y todo el sitio se actualiza al instante. Sin tocar página por página, sin riesgos de olvidar un elemento.

Es la base de un sistema de diseño profesional. Si construyes sitios para clientes, esto te ahorra horas en revisiones y cambios de marca.

Tips avanzados para acelerar tu workflow

• Define la paleta antes de empezar a diseñar: no esperes a tener el sitio armado para crear los colores globales. Define tu sistema desde el día 1 y vincula desde el primer elemento.
• Combínalo con Divi Toolbox: este plugin extiende las opciones globales de Divi con más control sobre tipografías, spacings y breakpoints. Mira nuestro curso de Divi Toolbox.
• Combínalo con Divi Pixel: para mayor control de animaciones, popups y módulos extra que respeten tu sistema de diseño global. Mira el curso de Divi Pixel.
• Documenta tu sistema de diseño: especialmente útil si entregas el sitio a un cliente. Una buena herramienta para esto es Notion para gestionar proyectos y clientes.
• Cuida el preset de Divi: cada módulo tiene presets que vinculan estilos a una "variante" del módulo. Combinar presets + colores globales es el setup más profesional para un workflow con Divi.

Cuándo NO usar Buscar y Reemplazar

• Cuando el sitio aún está en construcción: define los colores globales primero, no diseñes con colores hardcoded y después intentes corregir.
• Si los cambios afectan a contenido dinámico: módulos que jalan datos de WooCommerce o de plugins externos pueden no actualizarse hasta que limpies caché.
• Sin backup previo: nunca hagas un Buscar y Reemplazar masivo sin tener un backup. Aunque Divi guarda historial, una operación mal alcanzada puede dejarte cambios no deseados. Si gestionas múltiples sitios, ManageWP automatiza backups para eso.

Preguntas frecuentes

¿Funciona en Divi 5?

Sí, y de hecho funciona mejor en Divi 5 que en Divi 4 — el sistema de design tokens y colores globales se reforzó. Si vas a actualizar, mira nuestra guía para migrar de Divi 4 a Divi 5.

¿Puedo deshacer un cambio masivo?

Divi tiene historial de cambios por sesión, así que en la misma sesión puedes deshacer con Cmd+Z. Pero si guardaste y cerraste la página, la única manera de deshacer es restaurar desde un backup. Por eso siempre haz backup antes.

¿Funciona con plugins de terceros?

Funciona con módulos nativos de Divi y la mayoría de plugins extra que respetan el sistema de Divi (Divi Pixel, Divi Toolbox, Divi Supreme Pro, Divi Flash). Plugins muy custom que no respeten el sistema de Divi pueden no actualizarse automáticamente.

¿Es lo mismo que CSS variables?

Conceptualmente sí — son variables que se reusan. La diferencia es que el sistema de Divi te lo deja gestionar visualmente sin tocar código, pero técnicamente es lo mismo que tener variables CSS bien definidas en tu sitio.

¿Sirve para tipografías también?

Sí. Buscar y Reemplazar funciona con tipografías de la misma manera que con colores. Y en Divi 5 el sistema de tipografías globales se mejoró aún más — puedes definir "Heading", "Body", "Caption" como variables globales y reusarlas.

¿Listo para acelerar tu workflow con Divi?

Si construyes sitios web profesionales con Divi de forma recurrente, dominar estas técnicas vale literalmente horas por proyecto. Mira nuestros cursos para llevarlo al siguiente nivel: Divi Toolbox, Divi Pixel, y el Mastery de Negocio de Diseño Web si vas a aplicar estas técnicas en proyectos para clientes.