Posts

11 Gutterless Layouts For Divi 5 (Free Download!)

Image
Divi 5 makes it easy to create polished full-width layouts with strong visual impact. In this free pack, you’ll get 11 Gutterless Sections that are perfect for landing pages, hero areas, portfolios, service pages, product highlights, restaurant websites, agency layouts, architecture studios, and more. Each section removes the gaps between columns and content blocks to create bold, edge-to-edge compositions with clean alignment, striking imagery, and modern structure. Import a section, replace the content, update the images, and you’re ready to go. Preview Here’s a quick look at the 11 Gutterless Sections included in the pack. The download is further down the post. Download 11 Gutterless Sections For Divi 5 Get all 11 sections for free. Import them into your Divi Library and add them to any page in the Visual Builder. Download the Files Download For Free Join the Divi Newsletter and ...
Post a Comment
Read more

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