Posts

How To Build A Multi-Level Preset System In Divi 5

Image
Presets are useful on their own. You save a style, apply it to an element, and avoid rebuilding the same design by hand. But once a site grows, isolated presets are not enough. A button preset, a border preset, a spacing preset, and a color value may all be related, but if they are not connected, every design change still creates extra work. That is where Divi 5 ’s multi-level preset system becomes important. Design Variables , Option Group Presets , Element Presets , Composable Settings , and Nested Option Presets can work together as connected layers. Instead of saving disconnected styles, you can build a system where variables feed presets, smaller presets sit inside larger presets, and Element Presets bring those decisions together into reusable components. Stacking then lets you layer contextual variations without creating a separate preset for every possible use case. In this guide, we’ll walk through how the system works, where Nested Option Presets fit, why Composable Setti...
Post a Comment
Read more

Leveraging Divi 5’s New Image Group Presets (No Need For Photoshop!)

Image
Every web designer has done this at some point. You add an image to a layout, notice the crop is wrong, open Photoshop, adjust the file, export it, upload it again, and move on. Then the client replaces the image. The crop breaks again, the visual rhythm disappears, and the same manual fix starts over. Divi 5 gives you a better way to handle this with Image Group Presets . Instead of editing the image file itself, you save the way an image should behave in the layout. That includes its aspect ratio, how it fills the frame, where the focal point sits, and any other image styling you want to reuse. Apply that preset across your site, and every image follows the same visual rules while the original upload stays untouched. In this post, we’ll show you how Image Group Presets work, why they reduce the need for external image editing, and how to use them in carousels, product loops, and team sections. What Are Image Group Presets In Divi 5? Divi 5’s design system is built around reusabl...
Post a Comment
Read more

Introducing the CSS Grid Editor for Divi 5

Image
I am excited to announce the new CSS Grid Editor for Divi 5 ! Divi 5 embraces CSS Grid . It comes with tons of flexible grid templates and all the options you could ever need to build every grid layout imaginable. Today, we are taking things a step further by introducing an interface for visualizing, editing, and building advanced CSS grid layouts. It’s awesome! Whether you’re new to CSS Grid or an experienced developer, you can use the new interface to build stunning layouts without getting lost in a maze of settings. Furthermore, thanks to Divi 5’s unique grid offset editor , layouts built with the grid editor are housed entirely within the container, which means you don’t have to worry about editing child elements, and every CSS Grid layout built with Divi 5 works with loops . There’s much to explore, so let me jump into the builder and give you the full tour. 👇 The New Grid Editor When adding a container, you’ll notice a new “Buil...
Post a Comment
Read more

Exploring Divi 5’s New Tooltip Module

Divi 5 keeps turning common custom-code workflows into native builder features, and the new Tooltip module is a good example. It lets you add a floating popup panel beside another element and control its content, trigger, position, movement, arrow, timing, and styling visually. Instead of wiring up a tooltip library by hand, you can place a Tooltip module inside the element it describes, add text or nested modules, and decide whether the tooltip appears on hover, on click, or always. That makes it useful for short hints, feature explanations, product details, icon labels, mini promo cards, looped content, and contextual callouts that need more flexibility than a basic browser tooltip. In this post, we’ll look at what the Tooltip module is, how to add it, how its settings work, and where it can improve a Divi 5 layout without adding clutter. What Is The Tooltip Module In Divi 5? The Tooltip module is a nestable content container that appears beside a parent element. The parent el...
Post a Comment
Read more

7 Chopped Text Designs For Divi 5 (Free Download!)

Image
Divi 5 makes it easy to create bold, editorial-style sections that use typography as the main visual element. In this free pack, you’ll get 7 Chopped Text Designs that are perfect for hero sections, landing pages, portfolio intros, product launches, architecture websites, creative agencies, editorial layouts, event pages, and more. Each design uses oversized text, cropped letterforms, layered imagery, strong contrast, grid-based spacing, and modern type treatments to create striking sections that feel custom and high-impact. Import a section, replace the content, update the imagery, and you’re ready to go. Preview Here’s a quick look at the 7 Chopped Text Designs included in the pack. The download is further down the post. Download 7 Chopped Text Designs For Divi 5 Get all 7 designs for free. Import them into your Divi Library and add them to any page in the Visual Builder. Download the Files ...
Post a Comment
Read more