Posts

Part 8 Of Mastering Flexbox: Controlling Spacing With Gap (Not Margin)

Image
In Part 7 of our Mastering Flexbox series, we focused on building flexible button, menu, and link rows. We used Layout Direction , Justify Content , Align Items , Gap , and Module Groups to create compact, responsive horizontal groups that can adapt across breakpoints. In Part 8, we’re focusing on one of the biggest workflow shifts in Divi 5: controlling spacing with Gap instead of relying on margin for every spacing adjustment. Many Divi users are used to spacing elements with individual margins. That habit can still work in specific cases, but it often creates extra cleanup when items wrap, stack, or change direction across breakpoints. In Divi 5, Horizontal Gap and Vertical Gap give you a cleaner way to control spacing between direct child elements from the parent container. In this post, we’ll show you how Gap works, where to apply it, when margin still makes sense, and how to use Gap to create cleaner spacing systems for rows, columns, Module Groups, Nested Mod...
Post a Comment
Read more

7 Creative Gradients For Divi 5 (Free Download!)

Image
Divi 5 makes it easy to create polished sections with rich color, depth, and visual atmosphere. In this free pack, you’ll get 7 Creative Gradients for Divi 5 that are perfect for hero sections, landing pages, SaaS websites, data platforms, portfolio layouts, product highlights, creative agencies, tech sections, and more. Each design uses gradient backgrounds, layered blocks, soft transitions, bold color contrast, imagery, typography, and clean spacing to create modern sections that feel vibrant without becoming overwhelming. Import a section, replace the content, adjust the colors, and you’re ready to go. Preview Here’s a quick look at the 7 Creative Gradients included in the pack. The download is further down the post. Download 7 Creative Gradients 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 ...
Post a Comment
Read more

Divi 5.10 Release Notes

Image
It’s official; the beta phases have ended, and Divi 5 has arrived ! This isn’t the end; it’s a new beginning for Divi, and we are moving forward faster than ever with weekly updates. If you use Divi 5 , you’ll see a version 5.10  update notification today. If you want to get an early inside scoop, I often post progress reports in the Divi Theme Users Facebook group. Join us! What’s New In Divi 5.10? We implemented  85 bug fixes and improvements , along with two brand new loop filter modules . Our main focus over the past month has been on stability and on creating additional automated tests to help spot regressions that our human testers miss. Divi 5 already had tens of thousands of automated tests, but the more the merrier. We added additional coverage for common hotspots and filled a few gaps in recently released features, ensuring fewer bugs will be introduced as Divi continues to evolve rapidly. Loop Filter Modules We released Loop Filter Mod...
Post a Comment
Read more

How To Create Tooltips With Divi 5

Image
Clean pages and informative pages often pull in opposite directions. Add every detail a visitor might need, and the layout starts to feel crowded. Remove too much, and visitors may not have enough context to understand what they are looking at or what to do next. Tooltips sit right in that gap. They let you keep the page clean while still making extra context available when someone needs it. Divi 5 now includes a dedicated Tooltip module that makes this workflow native. You can add a tooltip to an icon, button, text element, pricing feature, image, or any other element that needs a little more explanation. The tooltip stays tied to its parent element, and you control the trigger, movement, position, arrow, timing, content, and styling visually. In this tutorial, we’ll look at what tooltips are, where they work best, and how to create them with Divi 5’s Tooltip module. What Are Tooltips? Screen space is limited, and not every detail needs to sit directly on the page. A tooltip is...
Post a Comment
Read more