The Divi 5 Style Inspector is a panel that shows everything applied to your design in one place: styles, content, and presets. You can use the Divi 5 Style Inspector to inspect a whole page at once or focus on a single element to see only what affects that section, row, column, or module.
Instead of clicking into each module to find out where a color, font, or preset comes from, you can open the Style Inspector and see the whole picture in a few seconds.
How to open the Divi 5 Style Inspector
Open a page in the Divi 5 Visual Builder.
Look for the Inspector icon
in the builder interface in the left sidebar panel.Click the Inspector icon to open the Divi 5 Style Inspector panel.
⚠︎ Note: You can open the Divi 5 Style Inspector with nothing selected to see a page-level overview, or with an element selected to see only what applies to that element.
Page-level vs element-level inspection
The Divi 5 Style Inspector works in two scopes:
Page-level:
Open the Style Inspector while nothing specific is selected.
You get a summary of all styles, content, and presets used on the current page.
This is useful for audits and cleaning up inconsistent values.
Element-level:
Click on any element in your page to select it and to open its settings, or click on the Gear icon.
Open the Style Inspector by clicking on its icon
on the left sidebar.The Inspector now filters to show only what affects that selected element.
You can switch between elements while the Style Inspector is open. The panel updates to match whichever element you click.
The three main tabs: Styles, Content, Presets
The Divi 5 Style Inspector has three tabs:
Styles
Content
Presets
Each tab groups information differently, so you can focus on what you care about.
Style Inspector's Styles tab
The Styles tab lets you inspect element styles across a page or element:
Colors
Shows all colors in use, grouped.
Global colors usually appear first, often sorted by how often they are used.
Static (non-global) colors appear separately so that you can spot odd one-off values.
Numbers
Shows numeric values like font sizes, line heights, spacing, and other units.
This helps you see if you have too many similar but slightly different values.
Fonts and font weights
List which font families and weights are used.
Helpful if you want to keep your typography limited to a small set.
Layout
Lists all the Layout Styles used page-wide or on a selected element.
When you hover a style label (for example, a specific color or font), the Inspector highlights all fields that use that value. This makes it easy to see where a style is applied and where it might need to be cleaned up.
Style Inspector's Content tab
The Content tab lets you inspect element content grouped by type:
Media
Background images and other media used in your design.
Code
Custom CSS or code snippets tied to elements.
Attributes
IDs, classes, alt text, titles, and other attribute values.
Text
Actual text content used in modules.
This tab is helpful when you want to:
Find where a particular image or background is used.
Check that IDs and classes are consistent.
Review alt text or titles for accessibility.
Audit or quickly find a piece of copy on the page.
Style Inspector's Presets tab
The Presets tab shows you which presets are in play:
Module presets
Presets applied to specific modules on the page.
Option group presets
Presets applied to option groups such as buttons, title text, backgrounds, etc.
You can use this tab to:
See which elements are using presets and which are not.
Check if different modules are using the correct preset.
Spot places where styling should come from a preset, but has been overridden locally.
Make changes directly in the Style Inspector
The Divi 5 Style Inspector is not just a viewer. You can edit many things directly from the panel.
Typical workflows:
Update a color
In the Styles tab, pick a color value.
Change it to another color or map it to the correct global color.
All uses of that value update in the active scope (page or element).
Fix inconsistent font sizes
Look at the list of font sizes in the Styles tab.
Adjust or remove odd one-off values and align them to your core sizes.
Clean up content attributes
In the Content tab, fix missing alt text, wrong titles, or stray IDs.
This is often faster than opening every module separately.
Adjust presets
In the Presets tab, see which presets are used and update them so all attached elements inherit the new styles.
Changes you make in the Style Inspector apply instantly. For page-level edits, you affect everything on that page. For element-level edits, you affect only the selected element and anything tied to its presets or variables.
Inspect element styles step by step
Here is a simple example of inspecting styles for a single module:
Open the page in the Visual Builder.
Click the element (section, row, or module you want to inspect.
Open the Divi 5 Style Inspector.
In the Styles tab:
Check which colors, sizes, and fonts are in use for that module.
Make sure it is using the correct static or global color and font.
In the Presets tab:
Check if it uses the correct button preset.
Update the preset if all buttons of that type should match.
Changes are automatically saved in the Style Inspector.
This keeps a single module consistent with your design system without digging through all its design settings.
Use the Divi 5 Style Inspector for page-wide audits
You can also use the Divi 5 Style Inspector to audit an entire page:
Open the page in the Visual Builder.
Do not select any element; just open the Style Inspector.
In the Styles tab:
Review all global and static colors in use.
Check fonts and weights.
Check spacing values like padding and margin.
In the Content tab:
See what images and backgrounds are used.
Review IDs, classes, and alt text for consistency.
In the Presets tab:
Make sure the presets you expect to see are actually used.
From there, you can decide:
Which colors should be replaced or merged into global colors.
Whether you should consolidate font choices.
Where to move more styling into presets or Design Variables.
Tips for using the Divi 5 Style Inspector
Start at the page level
Do a quick page-wide scan before adjusting specific elements. This gives you context and helps you see big issues faster.
Use element-level inspection to fix details.
Once you spot a problem, select that element and reopen the Style Inspector to focus only on it.
Lean on global colors, presets, and variables.
When you see a lot of similar static values, consider converting them into a smaller set of global values managed by presets and Design Variables.
Combine with Attribute Management and Extend Attributes
Use the Style Inspector to find what needs attention, then use attribute tools like copy, reset, or extend to apply fixes across the page.
Once you get used to the Divi 5 Style Inspector, inspecting element styles becomes a quick, focused process instead of a slow search through every module. It turns your Divi 5 page into something you can read and adjust at a glance.