Posts

5 Useful Things You Can Do With Aspect Ratio in Divi 5

Image
A layout can be carefully designed and still feel inconsistent once real content is added. Images arrive in different shapes. Team headshots come from different sources. Blog thumbnails, embeds, and dynamic content do not always reserve the space your layout expects. That is where aspect ratio becomes useful. Instead of setting a fixed height, you define a relationship between width and height. The element can still resize across devices, but its proportions stay consistent. Divi 5 gives you Aspect Ratio and Image Framing controls that make this easier to manage visually. You can use them on images, modules, containers, and sub-elements that expose the Sizing option group. In this post, we’ll look at five practical ways to use Aspect Ratio in Divi 5 to create cleaner grids, better crops, steadier layouts, reusable shapes, and more consistent social feeds. What Is The Aspect Ratio Setting In Divi 5? The Aspect Ratio field lives in the Sizing option group inside the Design tab. ...
Post a Comment
Read more

Exploring Divi 5’s New Breadcrumbs Module

Image
Divi 5 now includes a native Breadcrumbs module , giving you a built-in way to add breadcrumb navigation to pages, posts, archive templates, and Theme Builder layouts. Breadcrumbs help visitors understand where they are on your site and give them a quick path back to higher-level pages or categories. They are especially useful on blogs, documentation sites, knowledge bases, course sites, and any website with layered content. In this post, we’ll look at how Divi 5’s Breadcrumbs module works, what you can control, where it makes the most sense, and how to add it to a Theme Builder post template. What Is Divi 5’s Breadcrumbs Module? The Breadcrumbs module is part of Divi 5’s core module library. It displays a clickable navigation trail that shows where the current page or post sits within your site structure. A typical breadcrumb trail might look like this: Home / Blog / Category / Post Title Home / Services / Web Design Home / Documentation / Getting Started / Setup Guide Be...
Post a Comment
Read more

Part 3 Of Mastering Flexbox: Wrap vs No-Wrap Structure Templates

Image
In Part 2 of our Mastering Flexbox series, we showed you how to create equal-height cards with aligned buttons using Align Items > Stretch , Justify Content > Space Between , and Grow To Fill . In this third installment, we’ll focus on one of the most important structure decisions in Divi 5 : Layout Wrapping. Layout Wrapping controls whether flex items stay on one line or move onto additional lines when there isn’t enough room. Choosing between No Wrap , Wrap , and Wrap Reverse affects how many rows you need, how your layout responds across breakpoints, and how much manual structure you have to manage. In this post, we’ll compare No Wrap and Wrap structure templates, explain when each option makes sense, and show how supporting controls like Column Class , Align Content , and Display Order help you build cleaner responsive layouts without custom CSS. Let’s dive in. Understanding Layout Wrapping In Divi 5 In Divi 5, Layout Wrapping controls whether...
Post a Comment
Read more

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