Posts

Everything You Need To Know About Divi 5’s Sizing System

Image
Divi 5 gives designers a more systematic way to build responsive websites. Instead of manually adjusting the same padding, font size, gap, or border radius across desktop, tablet, and phone views, you can define reusable sizing variables once and apply them throughout your site. The new Variable Generator makes that process faster. It can generate a complete fluid sizing system with clamp()-based variables for typography, spacing, gaps, widths, border radius, border widths, and more. When combined with Presets , those variables become the foundation for a consistent, scalable design system across your entire website. In this post, we’ll walk through how Divi 5’s sizing system works, how to generate fluid variables, when to customize them, and how to apply them across your site. What Is Divi 5’s Sizing System? Divi 5’s sizing system is built on Design Variables , reusable values that you create once and use anywhere across your website. While Design Variable...
Post a Comment
Read more

How To Build A Golden Ratio Hero Section With Divi 5’s Flexbox

Image
A hero section sets the page’s tone, and proportion helps guide visitors to the right place first. In a two-column layout, giving the content more room creates a stronger focal point while keeping the image present and supportive. In Divi 5 , you can create that balance with a 3/5 and 2/5 Flexbox row, which gives you a practical 60/40 split. It is not the exact golden ratio, which is closer to 61.8/38.2, but it follows the same idea: one side leads while the other supports it. In this tutorial, we’ll build that hero section using Divi 5, with Flexbox handling the alignment, spacing, and responsive behavior. What Is The Golden Ratio In Hero Design? The Golden Ratio is a proportion of about 1:1.618. In layout terms, it gives you a way to divide space so one side leads without the other disappearing. The exact split is closer to 61.8/38.2, but a 60/40 split is a practical version for hero sections. The larger side carries the main message. That includes the headline, supporting...
Post a Comment
Read more

Everything You Need To Know About Divi 5’s Color Palette Variable Generator

Image
Creating a reliable color system has always been one of the harder parts of web design. You start with a primary brand color, then manually build lighter values, darker values, muted variations, and transparent colors for backgrounds, borders, shadows, buttons, and hover states. The result often works at first, but it becomes harder to manage as the site grows. Divi 5 changes that with the new Color Palette Variable Generator . Instead of building every color manually, you can start with one primary color and generate a connected color system using Divi 5’s relative HSL color system. The generator creates reusable color variables inside the Variable Manager, so your colors are not just saved as static swatches. They become part of your site’s design system. When the base color changes, related colors can update with it, helping your palette stay consistent across modules, presets, and pages. In this post, we’ll walk through what the Color Palette Variable Generator...
Post a Comment
Read more