Posts

Creating A Fluid Responsive Sizing System With Divi 5’s Variable Generator

Image
Most designers do not size things once. A heading that looks balanced at 56px on desktop can feel oversized on a phone, so you create a smaller mobile value, then a tablet value between the two. Then you repeat that work for font sizes, section padding, margins, gaps, border radius, widths, and other numeric values across the site. Fluid sizing with CSS clamp() solves the problem at the math level. One value can scale smoothly between a minimum and maximum as the viewport changes. The challenge is that writing good clamp() expressions by hand takes time, and external generators still leave you copying values into your design system one by one. Divi 5 ’s Variable Generator removes that friction. It creates complete sizing scales and adds them directly to your Design Variables . You can generate fluid values for typography, spacing, gaps, radius, border width, width, and more, then reuse those variables in numeric fields across the Visual Builder . This is the numeric companion to a ...
Post a Comment
Read more

Part 2 Of Mastering Flexbox: Creating Equal-Height Cards With Aligned Buttons

Image
In Part 1 of our Mastering Flexbox in Divi 5 series, we explored the core settings in the Layout option group when using Flex as the Layout Style. Now it’s time to put those controls to work on one of the most common layout challenges in web design: building card sections where cards share a consistent height and buttons stay aligned, even when content lengths vary. This hands-on guide will show you how to create balanced card layouts using native Divi 5 Flexbox controls. By the end, you’ll understand how to combine parent-level stretching, internal card spacing, and Grow to Fill sizing to build feature cards, testimonials, pricing tables, blog cards, gallery cards, and more. Let’s dive in. Why Equal Height Cards Matter Cards are one of the most common design patterns on modern websites. You’ll find them in feature sections, testimonial rows, pricing tables, blog grids, product showcases, service lists, and many other layouts. The challenge starts when co...
Post a Comment
Read more

Part 1 Of Mastering Flexbox: Understanding The Core Controls In Divi 5

Image
One of the most valuable improvements in Divi 5 is its native Flexbox support. It gives you clean, visual control over layout structure directly inside the Visual Builder, reducing the need for custom CSS, duplicated sections, or manual spacing workarounds. This is the first part of our Mastering Flexbox series. Throughout the series, we’ll introduce Flexbox in Divi 5, explore its settings in detail, and show how different controls work together to create functional, responsive designs. In Part 2, we’ll show you how to create equal-height cards with aligned buttons. In this first part, we’ll focus on the settings available in the Layout option group when Flex is selected. These controls affect how child elements flow, wrap, align, and distribute space inside a parent container, making them some of the most important layout tools you’ll use in Divi 5. Let’s dive in. What Is Flexbox In Divi 5? Flexbox (Flexible Box Layout) is a CSS layout model design...
Post a Comment
Read more