Posts

Everything You Need To Know About Variable Fonts In Divi 5

Image
Variable fonts have been around for years, but most page builders still treat them like static fonts. You get a font picker, a weight dropdown, and maybe an italic toggle. The deeper controls these fonts are built for never make it into the visual workflow. Those deeper controls are what make variable fonts worth using. A variable font can give you continuous control over weight, width, slant, optical size, grade, roundness, shape, and other axes depending on the typeface. Instead of choosing from a few fixed styles, you can fine-tune the font to fit the exact size, layout, and mood of the design. Divi 5’s Variable Fonts update brings those controls into the Visual Builder. When you choose a supported Google variable font, Divi reads the font’s available axes and displays the matching controls in the relevant text option group. No custom CSS. No guessing which axes the font supports. No limiting a variable font to a basic weight dropdown. In this guide, we’ll look at what variable ...

Exploring Divi 5’s New Text Fill Options (Create Text Gradients & Image Masks)

Image
Gradient and image-filled headings are everywhere now, from SaaS landing pages to bold editorial hero sections. They look polished, but they used to be awkward to build. You either copied custom CSS, saved the text as a flattened image, or rebuilt the effect every time the wording changed. Divi 5 now handles this visually with its new Gradient Options and Text Effect Settings . Gradients are easier to manage, gradients can be saved as variables, and text can now be filled with gradients or images directly inside the builder. The result is a more flexible text-design workflow. You can create gradient headings, image-filled editorial type, transparent outlined text, and reusable brand gradients without turning your headline into a static image. In this post, we’ll look at how Divi 5’s new text fill options work, how to use gradient and image fills, when to add text strokes, and how Gradient Variables help you reuse the same effect across your site. What Are Text Fills In Divi 5? A ...

7 Knockout Grids For Divi 5 (Free Download!)

Image
Divi 5 makes it easy to create structured layouts with strong visual rhythm and bold image placement. In this free pack, you’ll get 7 Knockout Grids for Divi 5 that are perfect for landing pages, hero sections, portfolio layouts, real estate websites, service pages, design studios, travel sections, editorial layouts, and more. Each design uses grid-based composition, image blocks, text panels, color contrast, and intentional negative space to create polished sections that feel modern, layered, and easy to customize. Import a section, replace the content, update the images, and you’re ready to go. Preview Here’s a quick look at the 7 Knockout Grids included in the pack. The download is further down the post. Download 7 Knockout Grids For Divi 5 Get all 7 sections for free. Import them into your Divi Library and add them to any page in the Visual Builder. Download the Files Download F...

How To Build Better Blog, Portfolio, And Product Grids With Aspect Ratio In Divi 5

Image
Upload a dozen images from different sources, and your grid can start to lose its shape fast. One blog post has a wide featured image. Another uses a square crop. A product image comes from a supplier. A portfolio image is vertical because the work itself was vertical. The result is a grid shaped by the uploads, not by your design. Aspect Ratio in Divi 5 gives the layout a rule to follow. Instead of letting every image decide the height of its own card, you can define the shape once and keep blog, portfolio, and product grids visually consistent. In this post, we’ll look at why grids need consistent image shapes, how Aspect Ratio and Image Framing work together, and how to apply them to blog loops, portfolio grids, and WooCommerce product grids in Divi 5 . Why Grids Need A Consistent Shape A grid makes a visual promise: every card belongs to the same system. When cards sit at different heights, that promise breaks. Visitors may not stop and describe the issue, but they feel it. The...