The Tech Zone

Every typography decision on a website is about relationships: how one text element reads against another, how clearly the hierarchy comes through, and how body text stays readable without competing with the elements around it. Static fonts give you a set of fixed styles. Variable fonts give you the continuous range between them, and Divi 5 brings those controls directly into the Visual Builder through its Variable Fonts feature. In this post, we’ll use practical combinations to solve common typography challenges. We’ll configure Design Variables, tune headings, subheadings, buttons, and body text, save those decisions with Presets, and replace existing static styles without editing every module individually. What Are Variable Fonts? Static font families are divided into separate files or styles, such as Light, Regular, Semibold, and Bold. If the precise weight or width you need falls between those options, you have to compensate with another setting or settle for the closest ava...

We’re back with another Divi 5 sneak peek, and this one introduces two upcoming features that will fundamentally improve the way you build reusable designs in Divi: Components and Slots . Components are a complete reimagining of Divi’s existing Global Modules. They retain the power of globally synchronized elements while introducing a much more flexible system for controlling what stays global and what can be customized on each instance. Instead of choosing between a completely global element and a completely independent one, Components let you build reusable elements with carefully defined areas of flexibility. You can detach individual settings from modules nested inside a Component, making those settings editable at the instance level while everything else remains globally synchronized. You can also add Slots, which create free-form areas inside Components where unique content can be built for each instance. We’re also giving Components a much more prominent place in the builde...

Perfectly even Grids are useful, but they are not always memorable. Stretch one card, deepen another, or build a diagonal that climbs across the page, and the layout begins to guide the eye with purpose. A few deliberate placement choices can change the entire composition. Divi 5 ‘s Grid Editor makes those choices easy to explore. You can resize and reposition items directly on a visual canvas, then see how each change affects the layout before you move on. In this guide, we will build five creative Grid layouts, each designed to direct attention in a different way. How CSS Grid Works Before CSS Grid, designers commonly built page layouts with tables, floats, positioning, and, later, Flexbox. Those methods still have valid uses, but complex two-dimensional layouts often required extra markup or careful workarounds. CSS Grid provides a layout system built around columns and rows . Their intersections form cells, and child items can be placed automatically or assigned to spec...