The Tech Zone

Grid Offset Rules control where items begin and how many rows or columns they span in Divi 5 . A rule on the container can widen every fifth card, stretch a featured item across two rows, or place an item in a specific column. Repeating rules also apply to matching items as content is added or generated by a Loop. The settings tell us what each rule does, but it can be harder to picture how several rules affect the same grid. The CSS Grid Editor makes that relationship visible. We can resize items to create rules, see which items an existing rule affects, and adjust its values as the layout responds. In this tutorial, we’ll read and edit Grid Offset Rules visually, create individual and repeating targets, and adjust their values for smaller screens. How Grid Offset Rules Work Before adding rules, it helps to understand automatic placement. In a basic grid with row-based flow and no placement overrides, child elements fill the available cells in each row before moving to the...

Divi Components and Slots have arrived, introducing a completely new way to build reusable designs in Divi 5 . 🎉 This is one of the most important updates to Divi since Variables and Presets! Components are the evolution of Divi’s Global Elements. They retain the power of globally synchronized designs while giving you much more control over what stays global and what can be customized on each instance. Detach settings from nested modules, add Slots for unique local content, edit Components from a dedicated interface, nest Components inside other Components, import and export them, and manage them using the Divi AI Agent . There’s much to explore, so let me jump into the builder and give you the full tour. 👇 Components Are The Evolution Of Global Elements Divi introduced Global Elements and selective synchronization nearly a decade ago. They made it possible to reuse elements across a website, update them from one place, and detach selected settings for local customization. ...

When a page has several buttons, a request like “update the button in the pricing section” can leave room for interpretation. Divi AI Agents can work with your page structure, but attaching the exact element makes your target clearer. Context lets you reference a module, preset, variable, page, or other item directly in your request. Instead of describing everything from scratch, you can point to the content or settings you want the agent to use. In this post, we’ll explore how to add Context in the Divi 5 Visual Builder, choose references for different tasks, and combine them with Scope. We’ll also save recurring references inside Commands and Rules. Meet Divi AI Agents Divi AI Agents work inside the Divi 5 Visual Builder. You can use plain-language instructions to inspect a page, ask questions, or make changes to your layout and site. Open the Divi AI Agents panel from the left sidebar of the Visual Builder. The chat window is where you write requests and access ...

A large word can become more than typography when the image or texture behind it becomes part of the letterforms themselves. In this free pack, you’ll get 7 Text Background Clip Sections for Divi 5 , using oversized type, imagery, contrast, and structured layouts to turn text into a central visual element. These designs work as starting points for portfolios, agencies, fashion and lifestyle brands, architecture sites, product pages, creative studios, and editorial layouts. Import a section, replace the sample copy and imagery, and adapt the colors and typography to fit your project. The collection explores several ways to use clipped backgrounds inside text. Some designs make one oversized word the main focal point, while others combine image-filled typography with supporting copy, buttons, navigation, and photography to build a complete section around the effect. Preview Here’s a look at the seven Text Background Clip Sections included in the pack. The download is furth...