Posts

How To Create Hover, Focus, And Active States With HSL-Based Variables In Divi 5

Image
Building interactive elements that look good across every user action takes more effort than it should. You set up a button’s default appearance, then manually create variations for when someone hovers over it. Each state needs its own color, and each color requires its shades. Keeping them all visually cohesive means juggling numbers that don’t relate to each other. Divi 5 combines HSL-based color variables with state management to simplify and make this process more consistent. Here’s how to set it up. What Are HSL Colors HSL stands for Hue, Saturation, and Lightness. Unlike hex codes or RGB values that mix red, green, and blue channels together, HSL separates color into three independent controls. Hue measures the actual color position on a wheel using degrees. Red lands at 0°, yellow at 60°, green at 120°, cyan at 180°, blue at 240°, and magenta at 300°. The wheel completes at 360°, returning to red. Saturation controls color intensity as a percentage. Full saturation at 100...
Post a Comment
Read more

Replacing The Woo Products Module With Custom Loops In Divi 5

Image
The WooCommerce Products Module is Divi’s built-in solution for displaying products. It automatically connects to your shop and provides quick toggles for product images, titles, prices, ratings, and add-to-cart buttons. Divi 5 ‘s new Loop Builder takes a fundamentally different approach to building product features. You design the product card with any modules you choose, and then dynamically feed WooCommerce data into it. Both tools display product listings, yet each excels in different scenarios. You can use either, but the Loop Builder offers far more flexibility, which could help you build a better online store. Let’s compare the two. Displaying Product Feeds With The WooCommerce Products Module The WooCommerce Products Module is built for standard ecommerce patterns. It assumes you want recognizable product cards and lets you toggle what shows, keeping setup fast and decisions simple. Think about how WooCommerce products work. Every product shares certain common elements tha...
Post a Comment
Read more

11 Timeline Designs For Divi 5 (Free Download!)

Image
Divi 5 makes it simple to build timelines that are clear, flexible, and easy to reuse. In this free pack, you’ll get 11 unstyled Timeline Sections — each focused on clean structure so you can plug in your own design system, presets, and branding. Drop one onto any page, connect it to your styles, and start telling your story. No extra setup required. Preview Here’s a quick look at all 11 Timeline Sections included in the pack. The download is further down the post. Subscribe To Our Youtube Channel Download 11 Unstyled Timeline 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 we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your...
Post a Comment
Read more

Everything You Need To Know About Stacked Presets In Divi 5

Image
The latest feature of Divi 5 enhances its Preset-based system, allowing users to create reusable styles for use across pages and entire websites. Stacked Presets let you layer multiple Element or Option Group Presets, combining their effects for ultimate design flexibility. Apply a background gradient from one preset, alignment from another, and spacing from a third, all merged seamlessly into one preset. This new addition to Divi 5’s Preset system provides for faster workflows, more creative freedom, and easier site maintenance. In this post, we’ll provide a deeper understanding of what Stacked Presets are and how to use them. Let’s get started. What Are Stacked Presets? Stacked Presets extend Divi 5 ‘s Preset system by enabling multiple presets to be applied and layered on a single element or group. Each preset contributes its defined styles, and Divi intelligently merges them into a unified design. For example, you could create Stacked Presets that would control the alignment...
Post a Comment
Read more

❗Last Chance! The Divi Cyber Monday Sale Ends Today

Image
The Divi Cyber Monday Sale 2025 is in its final hours — it ends today. It’s our biggest event yet — featuring huge discounts, free prizes, and a brand-new Divi 5 Design System. Get massive savings on Divi , Divi AI , Divi Cloud , Divi Teams , Divi VIP , and exclusive Cyber Monday Divi Marketplace Bundles built for Divi 5 — before the sale ends. We’re giving away over $730,400 in prizes, with up to 11 free prizes per person — plus an exclusive Divi 5 design system and hidden Marketplace deals for Lifetime Members and Cyber Monday shoppers. This is your last chance to claim them before the sale ends. Claim Your Free Prizes Before It Ends Last Chance: Up To 80% Off Divi Pro, Free Products & Exclusive Perks [vid] This year’s sale celebrates the arrival of Divi 5 Beta , with all purchases coming with the exclusive Divi 5 Design System — but only if you buy before the Cyber Monday Sale ends today. These exclusive Cyber Monday deals disappear after today — once they’re gone, they...
Post a Comment
Read more