Posts

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...

The Beauty Of Divi 5’s Gradient Variables

Image
Good design tools do more than add new settings. They change how you think about the decisions you make. Gradients are a perfect example. In older workflows, a gradient often lived wherever you built it: one section background, one button, one hero heading, one CTA. If the brand direction changed later, you had to remember where that gradient was used and update each instance by hand. Gradient Variables in Divi 5 change that. Instead of treating a gradient as a one-off value, you can save it as part of your site’s design system and reuse it wherever gradients are supported. That is where the beauty of the feature becomes clear. A gradient can start as one reusable source, show up across backgrounds, buttons, and text fills, and still remain connected to the same value inside the Variable Manager. In this post, we’ll look at what Gradient Variables are, how they fit into Divi 5 ’s design system, how to create them, and how to use them across a site without rebuilding the same visual ...