Skip to main content

Style Inspector in Divi 5

Learn how to use the Style Inspector in Divi 5 to view and manage all styles, content quickly, and presets at both page and element levels.

Updated yesterday

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 only what’s relevant.

Use Cases

  1. Audit styles across a page: Instantly see all colors, fonts, and sizes used on a page and adjust them for consistency.

  2. Inspect content in a section: Filter the Inspector to view only the text, media, and attributes of a selected element.

  3. Manage presets: Review which module and option group presets are applied and update them without leaving the Inspector.

How to Use the Style Inspector

Divi 5 - Style Inspector
  1. Open the Visual Builder in Divi 5.

  2. Click the Inspector iconto launch the Style Inspector panel.

  3. 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.

  4. To inspect a page-level overview, open the Inspector without selecting any specific element.

  5. 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.

  6. 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.

Did this answer your question?