--- title: "Divi 5 estrena Inspector: así funciona el panel “estilo Figma” que te deja cambiar colores, tipografías e imágenes a la vez (y sin perderte)" description: "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 co..." url: https://wpdirecto.com/divi-5/ date: 2025-10-29 modified: 2025-10-27 author: "Editor WPDirecto" image: https://wpdirecto.com/wp-content/uploads/2025/10/Everything-You-Need-To-Know-About-Divi-5s-Inspector.jpeg categories: ["Temas y diseño"] tags: ["DIVI"] type: post lang: es --- # Divi 5 estrena Inspector: así funciona el panel “estilo Figma” que te deja cambiar colores, tipografías e imágenes a la vez (y sin perderte) **[Divi 5](https://wpdirecto.com/divibuilder)** 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. [![](https://wpdirecto.com/wp-content/uploads/2025/10/Divi-5-Inspector-panel-1024x529.jpeg)](https://wpdirecto.com/wp-content/uploads/2025/10/Divi-5-Inspector-panel-scaled.jpeg) **¿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](https://wpdirecto.com/divibuilder)**. - 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](https://wpdirecto.com/divibuilder)** 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](https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=2589&url=87410)