Una de las funciones más esperadas por quienes trabajamos a diario con Divi finalmente ha llegado: The Inspector, o “El Inspector”. Esta nueva herramienta de Divi 5 representa un salto enorme en productividad, especialmente para diseñadores y desarrolladores que buscan optimizar su flujo de trabajo y encontrar rápidamente los ajustes visuales o de estilo que han realizado en sus diseños.

En esta nueva píldora quiero contarte todo sobre cómo funciona The Inspector, por qué es tan útil, cómo puedes aprovecharlo para trabajar de forma más ágil y eficiente dentro del constructor, y cómo esta función se inspira en herramientas de diseño profesional como Figma, pero adaptada al entorno visual de Divi.

Qué es The Inspector en Divi 5

The Inspector es una nueva función integrada en el constructor de Divi 5 que permite inspeccionar cualquier elemento del diseño (ya sea una sección, fila o módulo) y visualizar todos los cambios de estilos o configuraciones que se le han aplicado.

Si alguna vez te ha pasado que estás revisando una página y no recuerdas dónde cambiaste un color, un padding o un borde, entenderás lo útil que es esta función. Ahora, simplemente seleccionas el elemento y, desde una barra lateral, puedes ver exactamente qué propiedades han sido modificadas y cuáles están usando los valores por defecto.

Divi 5 da un paso más allá: si seleccionas una sección, The Inspector no solo te mostrará los cambios de esa sección, sino también de sus subelementos internos, como filas, columnas y módulos. Esto convierte a The Inspector en una herramienta increíblemente potente para entender y depurar la estructura visual de un diseño complejo.

⭐️ Consejo profesional: The Inspector no solo te sirve para corregir errores. También es ideal para aprender y analizar cómo están construidos ciertos diseños o plantillas, y así replicar o mejorar estructuras existentes dentro de tus propios proyectos.

Cómo funciona The Inspector en Divi 5 paso a paso

Paso 1: Selecciona cualquier elemento del diseño

Abre el constructor visual de Divi 5 y selecciona un elemento que quieras analizar. Puede ser una sección completa, una fila, una columna o un módulo específico.

Paso 2: Activa The Inspector

Una vez seleccionado el elemento, dirígete a la barra lateral derecha del constructor. Allí verás un nuevo ícono llamado “Inspector”. También puedes acceder haciendo clic derecho sobre el elemento y eligiendo la opción Inspect o Inspector.

Paso 3: Visualiza los estilos modificados

Al activar The Inspector, se abrirá una barra lateral (similar a la de Figma o herramientas de desarrollo de navegador) donde podrás ver todos los estilos que has modificado en ese elemento.

Por ejemplo, si cambiaste el color de fondo, ajustaste el borde radius o modificaste el ancho máximo de una imagen, esos cambios aparecerán claramente listados en el panel.

Cada propiedad modificada se muestra de manera jerárquica, lo que te permite identificar rápidamente qué parte del elemento fue alterada.

Paso 4: Explora las configuraciones de subelementos

Si lo que inspeccionas es una sección, The Inspector también mostrará los ajustes modificados en las filas, columnas y módulos internos. Esto te da una vista completa de todos los cambios aplicados dentro de una misma estructura.

Por ejemplo, puedes ver los estilos aplicados a una columna en particular dentro de una fila, sin necesidad de abrir manualmente cada configuración.

Paso 5: Realiza ajustes directamente desde el panel

Una de las mayores ventajas de The Inspector es que no solo puedes visualizar los estilos, sino que también puedes modificarlos directamente desde el mismo panel. Esto acelera muchísimo los flujos de trabajo, ya que puedes cambiar propiedades sin tener que abrir las configuraciones tradicionales de cada módulo.

⭐️ Consejo práctico: Si estás revisando un diseño hecho por otra persona o si trabajas con plantillas preconstruidas, The Inspector te permitirá entender cómo fue creado el diseño sin tener que abrir cada módulo. Es una forma rápida de auditar o personalizar proyectos existentes.

Ventajas del uso de The Inspector

1. Ahorro de tiempo: ya no necesitas abrir múltiples ventanas de configuración para encontrar un cambio. Todo está visible desde un solo panel.
2. Depuración sencilla: si algo no se ve bien, puedes detectar de inmediato qué propiedad está afectando ese estilo.
3. Transparencia total: puedes revisar todos los ajustes aplicados, tanto en el elemento principal como en sus subelementos.
4. Ideal para equipos: en proyectos colaborativos, The Inspector permite entender fácilmente el trabajo de otros diseñadores o desarrolladores.
5. Optimización del flujo de trabajo: todo lo que antes implicaba varios clics y búsquedas ahora se resuelve en segundos.

Ejemplo práctico: inspeccionando una imagen

Imagina que tienes una imagen en tu página que no está alineada como debería. Antes de Divi 5, debías abrir el módulo de imagen, revisar las configuraciones de tamaño, márgenes o alineación, y probar varios valores hasta encontrar el cambio que afectaba el diseño.

Con The Inspector, simplemente seleccionas la imagen, haces clic en el icono de inspección y verás al instante que el Max Width y el Border Radius fueron modificados. Así puedes ajustar rápidamente cualquiera de esos valores desde la misma vista, sin tener que navegar por múltiples menús.

Este flujo no solo ahorra tiempo, sino que evita frustraciones y errores comunes, especialmente en diseños complejos o con múltiples módulos anidados.

The Inspector: inspiración de Figma aplicada a Divi

Una de las cosas más interesantes es que esta función está inspirada en el panel de inspección de Figma, una herramienta de diseño ampliamente utilizada por profesionales. En Figma, The Inspector muestra todos los estilos aplicados a un componente o grupo, y ahora Divi lleva esa misma idea al entorno del constructor visual.

Esto significa que Divi 5 se está moviendo hacia un enfoque más profesional, técnico y de precisión visual, integrando herramientas que antes solo encontrábamos en entornos de diseño avanzado.

⭐️ Consejo de experto: combina The Inspector con la nueva función de Responsive Editor para analizar y ajustar estilos específicos por dispositivo. Verás cuánto tiempo puedes ahorrar al momento de optimizar tu sitio para móvil y tablet.

Cuándo usar The Inspector en tu flujo de trabajo

• Cuando necesites detectar cambios visuales o propiedades personalizadas en un módulo.
• Si estás revisando un diseño antiguo y no recuerdas qué modificaste.
• Cuando colaboras con otro diseñador y quieres entender su estructura de estilos.
• Para depurar problemas de diseño responsive o conflictos visuales entre módulos.
• Para aprender cómo otros construyen diseños avanzados dentro de Divi.

Recomendaciones finales para aprovechar The Inspector

1. Usa The Inspector en combinación con el History Panel para revertir o ajustar cambios rápidamente.
2. Guarda tus presets personalizados una vez que encuentres estilos que quieras reutilizar.
3. Explora estructuras completas: inspecciona secciones enteras para entender cómo están compuestas y optimizar tu jerarquía visual.
4. Crea tu propio flujo de revisión: antes de entregar un sitio, inspecciona cada sección y verifica que todos los estilos sean consistentes.

Cursos recomendados en UXDivi

Si quieres aprender cómo usar The Inspector y otras nuevas funciones de Divi 5 con ejemplos reales, te recomiendo los siguientes cursos disponibles en uxdivi.com/cursos:

• Curso Divi 5 en fase de desarrollo: donde probamos y explicamos en detalle The Inspector y todas las funciones nuevas de Divi 5.

Conclusión

El nuevo The Inspector en Divi 5 es una de las funciones más inteligentes y útiles que Elegant Themes ha implementado hasta la fecha. Su capacidad para mostrar de manera clara y visual todos los estilos modificados en un elemento transforma por completo la forma en que trabajamos dentro del constructor.

Ya no se trata de adivinar dónde hiciste un cambio o de perder minutos navegando entre módulos. Ahora puedes visualizarlo todo desde un solo panel, hacer los ajustes necesarios y seguir diseñando sin interrupciones.

Esta herramienta no solo mejora la eficiencia, sino que lleva a Divi un paso más cerca de los estándares de las grandes plataformas de diseño. Para quienes buscamos precisión, rapidez y claridad en cada proyecto, The Inspector es una de esas funciones que se vuelven indispensables desde el primer día.

Te invito a probarla en tu próxima sesión de diseño con Divi 5 y experimentar cómo cambia tu forma de trabajar. Estoy seguro de que, como a mí, te resultará una de las funciones más prácticas y poderosas que se han añadido hasta ahora.