I am incredibly excited about this new Divi 5 feature because it will change how you work and give Divi an edge over other builders.
It’s called the Inspector, inspired by a similar system in Figma, and now available for Divi, except even better!
Inspect an element to get an overview of its most essential attributes, including all child elements. Then, quickly change colors, fonts, sizes, content, and presets across everything. It’s a massive time saver.
Check out the following video to see the new feature in action. 👇
Inspect Anything, Editing Everything
Right-click on anything and “Inspect” to open the inspector.
The inspector aggregates and dedupes all essential attributes for the inspected element and its children, giving you a list of all the colors, fonts, sizes, images, presets (and more) used throughout.
Once the inspector is open, you can click around to examine other things. You can also navigate to different elements using breadcrumbs and inspect the entire page.
The inspector differs from the settings panel, because it groups attributes by type. All modified colors, for example, are in one place rather than being spread about between different tabs and groups.
Bulk Edit Styles With Ease
The inspector surfaces colors, fonts, weights, shapes, and more, all of which can be adjusted in one fell swoop.
As shown in the video below, when I click on a section, the inspector shows me all the colors used in that section and its rows, columns, and modules. When I change a color, everything gets updated at once.
It’s nice to dock the inspector below the settings panel for an ever-present overview of essential modified attributes.
Inspect Content, Media, and Presets Too
The inspector surfaces more than just styles.
The content tab shows modified text, media, code, and attributes, and the preset tab shows every active module and group preset within the inspected element.
As shown in the video below, when I examine a section, I see three button modules use the Blue Border button preset. I can swap that preset for something else or remove it, updating all buttons simultaneously.
Bulk Edit Attributes Within Your Page’s Presets
And here’s the real kicker, I saved the best for last!
The inspector even surfaces attributes modified within the presets used on your page.
As shown in the video below, inspecting a section shows me the colors used in several elements and presets. When I change the color, it updates static colors and allows me to update the color within presets too.
Just like that, I updated a color across multiple elements and within multiple presets in just a few seconds. You don’t have to hunt through elements and presets to find the attributes you want to change; the inspector surfaces them for you automatically.
Try Divi 5 Today
The Inspector for Divi 5 is available today and is one of many features coming to Divi this year.
You can follow along as we progress through the final release of Divi 5 and beyond, with updates every two weeks. Depending on your priorities, you can use Divi 5 now to build new websites or wait until we add more features, whatever works best for you.
As outlined in Divi 5’s original multi-phase release schedule, the Divi 5 Public Alpha is like “Divi 5 Lite.” It’s missing a few features and may not be suitable for existing websites, but it’s ready to be used on new websites if you prefer the experience to Divi 4.
We want you to try it, and if you love it, use it; when everyone loves it, we’ll make it official.
Have You Tried CSS Grid For Divi 5?
In case you missed it, we recently released the new CSS Grid for Divi 5. This is a big one. We built the best CSS Grid builder. It’s better than Elementor 🙉. It’s better than Bricks 🙈. Whether you want to master the grid or simply use Divi’s new grid templates, you will love this update.
Watch this video for all the details. 👇
More Divi 5 Updates Are On The Way
2025 is the year of Divi 5. The tedious work is behind us. We built the super-fast foundation, and now it’s time for Divi to make its comeback.
If you’re here for the Divi comeback, do us a huge favor and let us know by liking this video and leaving a comment. It means a lot to us to see you cheering Divi on, and it’s essential to feed the algorithm and spread the word.
Don’t forget to follow us on YouTube and subscribe to the Divi newsletter so you never miss an update. I’ll see you soon for another Divi 5 feature announcement, which I promise will be right around the corner. 😁
Now that’s definitely a time saver. No more having to dig into Google Inspect to isolate elements (I hope). Looks good!!
I’ve updated the theme to 5.0.0-public-alpha.24.1759063376 but the Inspector isn’t showing….
Hey, Mark! Please, verify you are looking for the option in the right place, in the D5 Builder’s context menu, accessible via right-click (ctrl-click on MacOS), as shown here.
If the option is not there, we advise rolling back the last update in Divi > Theme Options > Update using the “Rollback to the previous version” button and then re-updating your Divi 5 Alpha again to the latest version. The Inspector option should be there. Let us know if this helped! 😊
Hey Vojin. Thanks for the response. Turns out the issue is actually a clash with Hummingbird plugin, in case that helps anyone. 🙂
Thank you for reporting back and the heads-up, Mark!
We’re super glad to hear the Inspector is working for you now. 😊
Hi, I’ve changed one of the colors using the inspector, and then the inspector crashed. Now there’s no way to edit this layout. When I copied that layout, the problem occurred again. The layout doesn’t render at all; it only shows the message ‘Oops! An Error Has Occurred…’
Thank you for reaching out and sharing your experience. We’re sorry to hear about the trouble with the layout and the error message. Please, contact our support team so we can take a closer look and better understand the issue. Thanks again!