The Style Inspector in Divi 5 allows you to see all the styles, Content, and presets that a particular page layout or individual module uses, all in one condensed place.
The Style Inspector gives you a complete overview of everything applied to your design. It shows styles, content, and presets in one place and lets you edit them directly. You can work at the page level to see all applied values, or focus on a specific element to filter down to only what’s relevant.
Try the Divi AI Agent
The Divi AI Agent can run the same audit for you - which colors, fonts, spacing values, and presets a page actually uses - and, once you've reviewed the list, fold the repeats into variables and presets.
Open the Divi AI Agent from the Visual Builder sidebar, describe the result you want in plain language, and it inspects your page, makes the changes, and stops for your approval before anything destructive.
Prompt: Read the design system on this page and tell me which colors, fonts, and spacing values are actually in use, and which of them aren't coming from a variable or preset. Don't change anything yet.
The AI Agent is part of every Divi AI subscription. See The Divi AI Agent in Divi 5 to get started, and How to Clean Up Your Design System With the Divi AI Agent for a full walkthrough of this workflow.
Use Cases
Audit styles across a page: Instantly see all colors, fonts, and sizes used on a page and adjust them for consistency.
Inspect content in a section: Filter the Inspector to view only the text, media, and attributes of a selected element.
Manage presets: Review which module and option group presets are applied and update them without leaving the Inspector.
How to Use the Style Inspector
Open the Visual Builder in Divi 5.
Click the Inspector icon
to launch the Style Inspector panel.Switch between the three tabs: Styles, Content, and Presets to view applied values.
Styles tab: Displays grouped colors (global colors first by usage count, then static colors), numbers, fonts, and weights. Hover over a label to see all fields using that value.
Content tab: Shows grouped content, including media (background images), code (custom CSS), attributes (IDs, classes, alt text, titles), and text.
Presets tab: Lists module presets and option group presets.
To inspect a page-level overview, open the Inspector without selecting any specific element.
To inspect an element-level overview, open the settings of a section, row, or module. The Inspector will filter styles, content, and presets to that element only.
Make changes directly in the Inspector to update styles, content, or presets. Changes apply instantly to the scope you’re working on (page or element).
Practical Tips
Use the hover tooltips in the Styles tab to see exactly which fields share a value. This makes spotting inconsistencies much faster.
Start with a page-level audit to catch broad issues, then drill down to individual elements for fine-tuning.
Keep global colors and presets updated—changes cascade site-wide, and the Inspector makes it clear where they’re used.