The Tech Zone

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

Among the many new builder features, Divi 5 also implements several efficiency improvements. These include improvements to the UI and those that help you with a smoother workflow. Not only is Divi faster (from a technical standpoint), but it is also faster to use . Extend Attributes is one of our favorite efficiency features. It started as Extend Styles in Divi 4 and extended only element-level styles to other elements. Extend Attributes makes this initial feature 10 times more powerful. In this post, we’ll show you how to extend presets in Divi 5, so you can make even more targeted changes throughout your page design. Let’s get to it! Presets In Divi 5 Presets allow you to group related styles for reuse across your whole site. They are a visual, no-code way of approaching a class-based design system. For instance, a button element may have styles for the text, the button background, the border radius, icons, and hover states. When you want to reuse the styles, you save them as...

With Divi 5 ’s Group Carousel Module , you can build a logo carousel right inside the builder without relying on extra plugins. It’s a simple way to showcase client logos, partner badges, or featured brands in a scrolling strip that feels polished and professional. In this tutorial, we’ll walk through how to set up and style a moving brand bar in just a few steps. What Is The Group Carousel Module In Divi 5 The Group Carousel is Divi 5’s module for creating horizontal sliders. It works as a container where you can place multiple modules side by side and scroll through them. Subscribe To Our Youtube Channel You can access it from the module list as the  Group Carousel  module. Add it to a row and then insert Groups inside it. Each Group acts as a slide. You can drop in an image, text, icon, or any module you like. It gives you complete freedom over the look and design. Under Carousel Settings, you’ll find the main controls for how the slider behaves, things like how m...

The problem with most animation tools is that they swing from boring to chaotic with no middle ground. Either the effects aren’t visible, or a slight move of the mouse can send elements flying. With Divi 5’s Interactions , you get fine-grained control over how elements respond. Its Sensitivity settings let you choose whether the motion is barely noticeable or dramatic, so effects stay smooth, subtle, and professional. In this post, we’ll walk through how to trigger effects using mouse movements in Divi 5 . What Are Interactions In Divi 5 Interactions are connections between what a visitor does and how the page responds. They’re built on three parts: Trigger: The action that starts it. This could be a click, a mouse entering or leaving an element, the moment something enters the viewport, or the page load. Effect: The response you want. That might be a card tilting, an image zooming, a banner fading in, or a preset swapping styles. Target: The element that reacts. It could be...