Posts

How To Design Cool Asymmetrical Layouts With The New Grid Editor

Image
Marketing pages from Stripe, Linear, and Notion often use asymmetry to create movement, establish hierarchy, and give important content more visual weight. The layout may feel spontaneous, but the underlying structure is usually precise. With Divi 5 , that structure can begin with the CSS Grid system . The new Grid Editor adds a visual canvas where you can adjust tracks, gaps, placement, and spans while viewing the result directly in the Visual Builder. In this post, we will use those tools to build four asymmetrical layouts: the Full-Left Banner, Z-Pattern Split, Weighted Corner, and Tetromino. Each design begins with a clear grid and introduces imbalance only where it supports the composition. How Asymmetry Works As A Design Choice Symmetrical layouts distribute visual weight evenly. They can feel stable, familiar, and easy to scan, which makes them a strong choice for many interfaces. Asymmetrical layouts use a different kind of balance. Instead of mirroring elements, they bala...
Post a Comment
Read more

7 Variable Font Designs For Divi 5 (Free Download!)

Image
Variable fonts make it possible to fine-tune typography instead of settling for a few fixed styles. Depending on the typeface, you can adjust Weight, Width, Slant, Optical Size, Grade, roundness, and other characteristics along a continuous range. Divi 5 brings those controls into the Visual Builder for supported Google variable fonts. To help you explore them, we created seven free variable font section designs that you can import into the Divi Library, add to a page, and customize for your own site. In this post, we’ll explain how variable fonts work in Divi 5, introduce the text styling options that complement them, and show you how to use the downloadable designs. What Are Variable Fonts? Traditional font families usually provide a fixed selection of styles, such as Regular, Medium, Bold, and Italic. Each style may be delivered as a separate font file. If the exact weight or style you need is unavailable, you have to choose the closest option or rely on a browser-generat...
Post a Comment
Read more