One of Divi 5‘s newest features, the Inspector, allows you to inspect and edit element attributes, such as colors, fonts, and presets, in a single, intuitive panel. Regardless of your skill level, this feature is a must-have for creating stunning, consistent websites with ease.
Let’s dive in.
What Is The Divi 5 Inspector?
The Divi 5 Inspector is a powerful, Figma-inspired tool integrated into the Visual Builder, designed to make working with Divi easier and more productive. It allows Divi users to inspect and manage element attributes (colors, text, media, presets, and more) with a single, centralized panel.
As a result, the Inspector streamlines the design process, allowing for bulk edits and providing a clear, organized overview of your project’s design elements. Its user-friendly interface mirrors the intuitive workflow of modern web design tools, making it accessible and efficient for new Divi users and seasoned pros.
Key Features Of The Inspector
The Divi 5 Inspector is packed with features that streamline and enhance the web design process, making it a helpful tool for Divi users. Here are a few of its standout capabilities:
It Combines And Simplifies Design Details
The Inspector consolidates essential attributes from inspected elements and their children into a single, organized panel. The result is a clutter-free view that makes it easy to understand and manage your design elements at a glance.
Bulk Editing
Save time with the Inspector’s powerful bulk editing functionality. You can modify multiple instances of an attribute across elements and even within presets in one go. For example, you can change every instance of a color across the page with just a couple of clicks.
Intuitive Navigation
Navigate your design effortlessly with an overview of every image, attribute, text, and other design setting by scrolling through options that make it easy to swap out images, text, colors, and more, from one location.
Docking For A Seamless Workflow
The Inspector can be docked below the settings panel (or anywhere else in the Builder), keeping it readily accessible without interrupting your workflow. This design enables you to make edits and review attributes in real-time, while remaining immersed in the design process.
How To Access And Use The Inspector
Using Divi 5’s Inspector feature is simple and intuitive. Open a page in WordPress and locate the Inspector icon.
Click to open the Inspector. What the Inspector reveals depends on what is selected on the page. When the Page Settings are open, the Inspector displays all elements on the page, including styles and content.
When you click on a module in the Visual Builder, the Inspector shows only the associated styles and content for that module.
Now that you know where to find the Inspector, let’s go over some of the common tasks you can do with it.
1. Update Colors
The Inspector makes it easy to manage colors across a page. Select the Page Settings to view all colors on the page, or click a specific module to edit its colors.
In the Inspector, click to expand the Colors tab. There, you’ll see a list of colors assigned to the page. In this example, the Inspector reveals colors for heading text, buttons, and backgrounds.
To change a color, click into a Color field. The Color Picker modal will appear, allowing you to change the value.
Use the picker to enter a hex value into the field, select a global color, or create a new one. As you scroll down the page, you’ll see every instance of the color change automatically.
2. Change Fonts And Their Weights
Adjusting typography is seamless with the Inspector. Select a module or the Page Settings, then navigate to Fonts in the Inspector modal.
Choose a new font from the dropdown menu or modify the font weight for selected text elements. For instance, you can switch all headings to a new font, such as Roboto, or adjust the weight of a button’s text to medium or semi-bold for better emphasis, with changes reflected in real-time.
3. Swap Images
Swapping images with the Inspector is a breeze. Click an Image module in the Visual Builder (or the Page Settings), and the Inspector will display its attributes, including a preview of the image.
From there, hover over the image in the Inspector to reveal the icons. Here, you can delete or replace the image with a single click.
Expand the Attributes tab to change the image’s Title Attribute Value. Having a clear, descriptive title attribute improves the user experience by providing visitors with helpful information. It can also assist search engines and screen readers in understanding the image’s purpose, thereby boosting SEO and accessibility.
4. Adjust Number Values
The Inspector simplifies tweaking number values, such as padding, margin, font size, or line height, in one location.
For example, you can click to highlight a row in the Visual Builder. When the Inspector panel is open, you can see every numerical value within the row, allowing you to change them easily.
5. Change Presets
Another great way to use the Inspector is to easily swap Presets. When you select an element that has a Preset applied, either a Module Preset or an Option Group Preset, you can easily swap them without having to dig through the settings.
For example, when an element with an assigned preset is selected, you can use the dropdown menu in the Inspector to swap the preset on a button.
Benefits Of The Divi 5 Inspector
The Divi 5 Inspector offers advantages that make website design faster, easier, and more collaborative. Here’s why:
It Saves Time
The Inspector eliminates the need to jump between multiple tabs or settings panels. Whether you’re working on a large project or making repetitive changes, the Inspector lets you do it all in one place, significantly speeding up the process.
It’s Easy To Use
With attributes such as colors, fonts, and presets neatly organized by type, the Inspector is easy to navigate. It provides real-time updates as you make changes and works seamlessly with Divi 5’s framework, ensuring a smooth and intuitive design experience.
Easy Handoff
The Inspector’s clear and organized display of design styles and presets makes it simple for clients to make changes once the project is completed. As a freelancer or small web agency, you can hand off a website knowing clients can confidently make small tweaks in one intuitive panel, ensuring they maintain the site’s polished look without needing advanced skills.
Try The Divi 5 Inspector Today
The Inspector feature in Divi 5 helps you save time and simplify workflows, making it an essential asset for every Divi user. With its intuitive panel, you can build beautiful, consistent websites faster than ever. Download Divi 5 today to experiment with the Inspector and share your thoughts with us in the comments or on our social media channels.
Ready to elevate your design game?
Leave A Reply