Before you publish a landing page, you scroll through one more time to check if everything looks right. But spacing that doesn’t match, incorrect colors, or different fonts can slip right past you.
Divi 5’s Inspector tool solves this by displaying all your design changes in one place, making it easy to spot what needs fixing. This guide walks you through using the Inspector to review your landing page section by section and make sure it’s polished before launch.
How Divi 5’s Inspector Makes Design QA Effortless
The Inspector in Divi 5 is a visual panel that allows you to view everything happening inside your design without opening multiple settings windows. When you select any section, row, or module, it instantly shows all the applied design and content settings in a single sidebar.
You get an immediate view of exactly how that part of the page was built. Colors, fonts, spacing, and presets appear all at once, which turns the usual guesswork of design review into something more like following a clear map.
The Inspector only displays fields that have been modified from Divi’s defaults, so you’re not wading through dozens of unchanged settings. On a brand-new button or module, the panel will look empty until you change a value or apply a variable or preset.
But once you modify design fields or apply Extend Attributes from a styled button, the Inspector populates with those customized fields. You’re not hunting through endless options anymore, trying to piece together what you adjusted hours ago.
You can also tweak values directly inside the panel and watch the layout update in real time. Click a different section or module, and the sidebar refreshes automatically to show only the relevant settings for that element.
Inside the Inspector (also referred to as the Style Inspector in the documentation), everything is organized into three main tabs: Styles, Content, and Presets. The Styles tab covers typography, spacing, and colors.
The Content tab displays text, images, and Attributes.
The Presets tab indicates which global style has been applied, allowing you to confirm that your modules are adhering to your design system.
With every edit visible in one sidebar, you’re no longer jumping between modules or trying to remember which button used a custom color. You can move through the page methodically: look at a section, check what’s modified, make adjustments if needed, then continue.
The Inspector refreshes instantly when you select new elements, keeping the flow smooth as you scroll from the hero to the footer. Small inconsistencies in spacing or typography become obvious as you go. By the time you reach the end of the page, you’ve already reviewed every modified field and confirmed that your landing page is polished, consistent, and ready to launch.
Learn Everything About Divi 5’s Inspector
How To Perform A Pre-Launch Design QA
You’ve seen how the Inspector surfaces every modified field in your design. Time to put it to work with a full page review. Begin with a brief overview before delving into the individual sections.
1. Scan The Full Page First
Begin with a high-level review before getting into details. When you open the Inspector with nothing selected, it displays a page-level overview, showing all styles, content, and presets currently in use across the page, with a focus on fields that differ from Divi’s defaults.
As you scroll, look for anything that visually feels off, like misaligned sections, uneven padding, or colors that don’t match your palette. But go beyond just looking.
Squint at the page to blur the details and see if your visual hierarchy still holds. The most important elements should still stand out even when everything’s slightly out of focus. If they don’t, you’ve likely got spacing or size inconsistencies that need attention.
Here’s what to check specifically.
- Typography: Open a few headings in different sections and compare their font family, weight, and size in the Inspector. If you’re using Design Variables, they should all reference the same variable names. Hardcoded values mixed in with variables are usually a sign that something was copied and pasted or manually overridden and never cleaned up.
- Buttons: Click through several buttons across different sections and check if they’re pulling from the same preset or Design Variables. Look at their padding values specifically. Buttons that look “almost the same” often have slightly different padding, which creates subtle visual noise.
- Spacing: Use the Inspector to check margin and padding values as you scroll. If you see a pattern like 40px, 45px, 40px, 50px between similar elements, you’ve found an inconsistency. Tighten those values to a consistent rhythm, depending on your spacing scale.
At this stage, you haven’t fixed anything yet. You’re building a mental list of patterns to verify which sections are using hardcoded colors instead of variables, where spacing breaks from your system, and which elements might need preset adjustments. This initial sweep indicates where to focus when you begin the detailed, section-by-section review.
2. Review The Hero Section
The hero section sets the tone for the entire page and needs a thorough review. Keep the Inspector open on the left and the Element Settings panel on the right, so you can see the visual output alongside the underlying design details.
Click the hero section wrapper and inspect it in the Inspector to confirm that headings, subheadings, buttons, and images are all pulling their styles from your Design Variables for colors, fonts, and spacing.
When something’s using a hardcoded value, hover over the field option and click the Dynamic Content icon to apply the correct variable.
For newly added buttons, you won’t see any modified fields at first because they’re using default styles. Use Extend Attributes to inherit design settings from an existing button, and the Inspector will immediately populate with those inherited values. You’ll be able to verify that the new element matches your established design patterns.
After verifying your Design Variables, review the layout structure. If you switched the hero section to Flex, check alignment and spacing between elements. You can adjust column alignment from Section Settings > Design > Layout > Justify Content.
Switch to tablet and mobile views to verify the hero content reflows correctly. Look for cropped text or overlapping elements that might appear on smaller screens.
Once everything in the hero aligns with your preset styles and consistently pulls from your design system, you’re ready to move down the page.
3. Go Section By Section
The process now moves faster because the Inspector lists every modified field for the active section without requiring manual opening or expansion.
Click through each section and scan for visual consistency. Ensure that headings follow the same hierarchy, colors are derived from your Design Variables, and the spacing between modules remains consistent. If something seems off, hover over the field in the Inspector to see what was changed. You can reset it or reapply global variables directly from the panel.
Finish your QA by reviewing the footer, as it often contains small inconsistencies that go unnoticed. Check that all links, icons, and text use the same color variables and hover states. Verify that typography matches the body style of your design system and that spacing between columns or widgets feels balanced.
Verify that the logo and copyright text are properly aligned and readable across all screen sizes. If your footer includes buttons or forms, use the Inspector to confirm they inherit the correct global presets.
Cut Your Design QA Time With Divi 5’s Inspector
With Divi 5‘s Inspector, you can view every change in one place, allowing you to spot inconsistencies and verify global presets without having to hunt through settings panels. What used to take an hour of clicking through modules now takes minutes of scrolling and scanning.
By the time you reach the bottom of the page, you’ll know exactly how every section was built and that it all follows the same design system. It’s a quick final pass that turns a good landing page into a polished one ready to go live.
Leave A Reply