The Tech Zone

Font updates can be a headache. Change a title font, and suddenly, you’re tracking down every spot it appears. Miss a heading or two, and your design immediately feels off. Manually updating fonts invites inconsistency. Divi 5 solves this with font variables and presets. Instead of chasing down every instance, you can set your fonts once and let the system handle the rest. Typography stays clean and unified, no matter how many modules you use. Take a look at how simple it can be. Why Static Fonts Can Create Problems Static font setups create a web of complications that grow worse over time. When you add fonts directly into each element, you scatter typography choices across hundreds of different places. You build a site using Playfair Display for headings and Poppins for body text. A few months later, you want to switch to a more modern font stack. Now, you hunt through every module, every preset, every custom setting to find where those fonts live. Miss even one heading buried de...

You’ve probably seen various CSS units in web code before, but understanding how they work lets you use them more intentionally. In this post, you’ll learn what CSS units really are, how they affect your layouts, and how using them inside Divi 5 helps you design more responsively. Divi 5 brings native support for CSS units right into the builder. Thanks to the new Advanced Units feature, you can use %, em, rem, vw, and more without custom code. What Are CSS Units? CSS units tell the browser how big or small something should be. Whether you’re setting the size of a heading, the width of a section, or the spacing between elements, you’re using units to define that space. Without them, the browser has no idea what to do with your values. For example, writing width: 100 doesn’t mean anything to the browser. But add a unit, like 100px or 100%, and now it knows exactly what you want. Take this example with four boxes, each using a different CSS value: The first uses width: 100. Tec...

Today, we introduce Loop Builder Divi 5 , which allows you to construct looping post-based and term-based content using any Divi element. Divi’s loop builder is unique in its freedom; you can loop anything without being restricted to a static loop module or container. Build your looping element, then customize your query using various convenient options and meta queries. It supports custom post types, including WooCommerce, custom fields created with ACF, and even ACF repeater fields. It’s an incredible feature! Check out the following video to see the new feature in action. 👇 Loop Anything First things first: What is a loop builder? Simply put, it’s a tool that lets you display a loop of content from your website’s database (like posts, products, categories, and authors) and customize the design of each item in the loop. This allows you to create post-based content, such as custom blog feeds, product lists, event calendars, course lists, category pages, and everything else!...

Presets are one of the most powerful tools in Divi 5 , and the Attribute Management feature makes them even better. You can now copy, paste, reset, and manage presets more easily across modules, rows, and sections without starting from scratch. Whether you’re building a design system or refining a layout, Attribute Management helps you stay consistent and work faster. Let’s explore how you can easily copy, paste, and reset your Presets in Divi 5! A Quick Overview Of Divi 5’s Preset Tools Divi 5 rebuilds preset management around three core systems that work together. Design Variables form the foundation. They store your brand colors, fonts, spacing values, images, and text snippets. Unlike builders who only handle global colors, Divi 5 variables cover everything. Option Group Presets handle individual style attributes like borders, shadows, and typography. But here’s the key part: these presets reference your Design Variables. Create a button preset that uses your “Brand Oran...

With Divi 5 , building stunning, professional websites is easier than ever. With features like Nested Rows and Module Groups , you can create advanced card layouts and reuse them throughout your site with just a few clicks. Divi 5 introduces a modernized codebase and improved performance, perfect for building complex layouts. These new features will enable you to build with unlimited flexibility. In this post, we’ll showcase 9 card layouts built with Divi 5’s Nested Rows and Module Groups, demonstrating how easy it is to create flexible, reusable designs. Whether showcasing services, highlighting testimonials, or building a portfolio, these layouts will help you achieve polished, consistent results. By the end, you’ll see how these new features of Divi 5 help you create visually stunning, reusable modules that save time and ensure design consistency across your project. Let’s dive in! Understanding Nested Rows & Module Groups In Divi 5 Divi 5’s Nested Rows and Module Group...