Divi 5 llega con un arma nueva para diseñadores, agencias y usuarios que no quieren pelearse con menús infinitos: el Inspector. Es un panel único —inspirado en la forma de trabajar de herramientas como Figma— que te permite inspeccionar y editar de un vistazo los atributos clave de cualquier elemento (colores, fuentes, imágenes, presets, números…) sin perder el contexto del diseño. En la práctica, significa menos clics, menos ventanas y más coherencia de marca en toda la web.

A continuación, un guía clara y ordenada sobre qué es el Inspector de Divi 5, cómo se abre, qué tareas te resuelve en segundos y por qué puede ahorrarte horas en un proyecto real, tanto si estás maquetando tu primera página como si llevas años entregando sitios a clientes.

¿Qué es el Inspector de Divi 5?

El Inspector es un panel centralizado dentro del Visual Builder que recoge y resume los atributos de lo que tengas seleccionado: desde los colores usados en una página completa hasta la tipografía concreta de un módulo, pasando por márgenes, rellenos, imágenes y presets. En vez de abrir pestañas de ajustes para cada módulo, el Inspector condensa lo importante en un solo sitio, con un flujo muy directo: seleccionas → revisas → cambias.

• Vista ordenada: agrupa los atributos del elemento inspeccionado y, cuando procede, también los de sus elementos “hijo” (por ejemplo, el texto y el botón dentro de una tarjeta).
• Edición masiva (bulk): puedes cambiar una vez un color, una fuente o un valor en todas sus apariciones en la página —e incluso dentro de los presets— con dos clics.
• Navegación intuitiva: funciona como un mapa de los recursos visuales; desplázate por imágenes, textos, colores y valores para ir sustituyendo sin salir de la vista de diseño.
• Acople (docking): ancla el panel debajo de los ajustes (o donde prefieras) para tenerlo siempre a mano mientras sigues editando en vivo.

¿Resultado práctico? Un proceso de diseño más rápido, limpio y coherente, especialmente útil cuando heredas proyectos, haces rebrandings o mantienes bibliotecas de estilos.

Cómo abrir y usar el Inspector (paso a paso)

1. Abre tu página con el Visual Builder y busca el icono del Inspector.
2. Haz clic para desplegar el panel.
3. Lo que verás depende de lo que tengas seleccionado:
   • Si abres Page Settings, el Inspector muestra todos los elementos y estilos globales de esa página.
   • Si seleccionas un módulo, verás solo los estilos y el contenido de ese módulo.

A partir de aquí, todo funciona con un patrón muy lógico: lista de atributos a la izquierda/derecha (según el anclaje), previsualización en vivo en el lienzo y controles rápidos (selectores, pickers, desplegables) para cada atributo.

5 tareas que el Inspector resuelve en segundos

1) Actualizar colores en bloque

• Abre Page Settings y entra en la pestaña Colors: verás el inventario de colores que existen en la página (títulos, botones, fondos, etc.).
• Haz clic en un color y usa el selector: introduce un HEX, elige un color global o crea uno nuevo.
• Divi aplicará el cambio a todas las apariciones del color de forma automática, en tiempo real.

Para nota: usar colores globales desde el Inspector te ayuda a centralizar la identidad de marca. Cambias un tono una vez y toda la web respira igual.

2) Cambiar fuentes y pesos

• Selecciona un módulo (o Page Settings) y entra en Fonts.
• Elige una tipografía en el desplegable (por ejemplo, Roboto para todos los H1–H3) y ajusta el peso (normal, medium, semibold, bold).
• Los cambios se reflejan al momento en el lienzo; no hace falta buscar cada título o botón uno a uno.

Tip: combina esto con presets de tipografía para garantizar la consistencia inter-página.

3) Sustituir imágenes (y mejorar su SEO)

• Haz clic en un Image module o inspecciona desde Page Settings para ver todas las imágenes.
• En el Inspector aparecen miniaturas con iconos de reemplazo o borrado.
• Cambia la imagen con un clic y, si quieres, abre Attributes para editar el Title Attribute (mejora accesibilidad y SEO describiendo el contenido).

Extra: aprovecha para revisar alt y título; aunque el Inspector destaque “Title”, mantener metadatos claros ayuda a lectores de pantalla y a buscadores.

4) Ajustar valores numéricos (padding, margin, tamaño, interlineado…)

• Selecciona una fila o sección y abre el Inspector: verás todos los valores numéricos asociados (márgenes, rellenos, tamaños de fuente…).
• Cambia lo necesario desde un único panel, sin abrir pestañas separadas.

Pro tip: si lo combinas con el desacople del panel (docking), puedes ir probando valores y viendo el efecto en contexto, sin perder el ritmo.

5) Cambiar presets sin “perderse” en ajustes

• Si el elemento tiene un Preset aplicado (de Módulo o Grupo de Opciones), el Inspector te deja cambiarlo desde un desplegable inmediato.
• Ideal para testear variantes de botón, tarjetas o bloques sin “bucear” en menús.

Ventaja clave: menos fricción: ahorras clics y evitas errores al localizar la opción correcta en paneles profundos.

Beneficios claros (y medibles) del Inspector

1) Ahorro de tiempo real

• Edición masiva de colores, fuentes y presets en dos clics, sin abrir múltiples diálogos.
• Menos contexto perdido: trabajas en el mismo sitio donde ves el resultado.

2) Curva de aprendizaje corta

• Interfaz familiar si vienes de Figma/Sketch: lista de atributos limpia, controles previsibles.
• El panel se siente como una “barra de control” a la que recurres constantemente.

3) Entrega más limpia a clientes (handoff)

• El Inspector expone de forma ordenada los elementos editables (colores, fuentes, imágenes, presets) sin mostrar todo el “motor” de Divi.
• Tus clientes pueden hacer ajustes seguros (cambiar un color, una foto, un peso de fuente) sin romper la maqueta.

4) Consistencia de marca sin dolor

• Centraliza paletas y tipografías; detecta incongruencias a simple vista.
• Evita variaciones indeseadas de tonos o pesos que se cuelan cuando hay varios editores.

5) Menos errores y mejor mantenibilidad

• Al tenerlo todo a la vista, reduces el riesgo de tocar lo que no es.
• Con presets y colores globales, el proyecto es más predecible y fácil de escalar.

Casos de uso donde el Inspector brilla

• Rebranding: cambia paleta y fuentes de un sitio en una tarde, con control total.
• Landing por campaña: ajusta botones y hero (colores, tipografías, imágenes) sin rehacer módulos.
• Auditoría exprés de una página heredada: localiza inconsistencias en estilos y estandarízalas.
• Preparación de presets para un design system interno: define variantes y asigna en cadena.

Consejos prácticos para sacarle todo el jugo

• Primero global, luego local: fija colores globales y tipos a nivel de página; después, refina en módulos.
• Nómbralos bien: bautiza presets y colores con lógica (“Primario 600”, “Botón Base”) para que el Inspector sea legible.
• Revisa accesibilidad: aprovecha el cambio de colores para asegurar contraste suficiente en textos y botones (AA/AAA).
• Documenta: si entregas a un cliente, deja una mini guía de “qué tocar en el Inspector”.
• Docking inteligente: ancla el panel donde menos estorbe a tu flujo (debajo del panel de ajustes o al lateral).
• Haz bulk con cabeza: antes de aplicar un cambio en masa, guarda o trabaja en un layout duplicado por si necesitas volver atrás.

Límites y buenas prácticas

• El Inspector no sustituye a una arquitectura de estilos cuidada: si cada módulo tiene estilos inlines distintos, la edición masiva salva, pero no obra milagros.
• Igual que en cualquier builder, evita sobrecargar con presets redundantes. Menos es más.
• Versionado: si trabajas en equipo, define quién y cuándo aplica bulk edits; documenta para evitar sorpresas.

Checklist de inicio rápido

• Actualiza a Divi 5.
• Abre el Visual Builder y despliega el Inspector.
• En Page Settings, revisa Colors y Fonts globales.
• Sustituye imágenes clave desde el Inspector y cuida títulos/alt.
• Normaliza márgenes y rellenos de secciones/filas con la vista de números.
• Define/ajusta presets de módulos repetidos (botones, cards).
• Haz una pasada de consistencia (contraste, jerarquía tipográfica, estados hover).
• Documenta cambios y comparte con el equipo/cliente.

Preguntas frecuentes

¿Dónde está el icono del Inspector y cómo se ancla (dock)?
Lo verás dentro del Visual Builder. Haz clic para abrir el panel y usa las opciones de docking para anclarlo debajo del panel de ajustes o en otra posición del builder. Así puedes editar sin que tape lo que estás viendo.

¿El Inspector puede cambiar colores “en toda la página” de una vez?
Sí. En Page Settings → Colors verás la lista de colores detectados. Cambias uno y todas sus instancias en la página se actualizan al instante (incluidos presets, si proceden).

¿Puedo ajustar tipografías globales desde el Inspector?
Sí. Desde Fonts puedes seleccionar fuentes y pesos tanto a nivel de página como por módulo. Se actualiza en tiempo real en el lienzo.

¿Sirve para SEO/accesibilidad con imágenes?
El Inspector permite sustituir imágenes y editar el Title Attribute. Aprovecha para mantener metadatos claros y revisa los alt en el módulo para ayudar a lectores de pantalla y buscadores.

¿Reemplaza a los ajustes de Divi de toda la vida?
No. El Inspector centraliza y acelera tareas frecuentes; para configuraciones avanzadas seguirás usando los paneles de ajustes. Piensa en él como en tu panel de mando rápido.

¿Afecta al rendimiento del builder?
Está diseñado para integrarse en el flujo del Visual Builder y no interrumpir. Si haces bulk edits grandes, guarda antes y trabaja en un entorno de pruebas si el sitio es crítico.

¿Qué pasa si rompo algo con una edición masiva?
Como en cualquier cambio global, conviene guardar/duplicar el layout y aplicar bulk edits con cautela. La filosofía es “cambios visibles al momento”, así que detectas errores rápido y puedes revertir.

Conclusión

El Inspector de Divi 5 no es un simple panel nuevo: es una forma moderna y eficiente de diseñar con Divi. Si vienes de flujos como Figma, te sentirás “en casa”; si eres nuevo, agradecerás tener todo lo importante en un sitio. Lo esencial: úsalo para centralizar colores, tipografías e imágenes, normalizar márgenes y gestionar presets sin perderte. Tu web —y tus plazos— lo notarán.

vía: Elegant Themes blogs