Posts

How To Create Nested Grids In Divi 5

Image
Divi 5 offers Flexbox ,  Nested Rows , and  CSS Grid , which, when combined, build a stunning structure that stays responsive all the time. You can create a parent grid for your main structure, then build smaller grids inside its columns to organize content with real control. In this post, we’ll show you how to create nested grids using these new features. We’ll recreate the design step by step and show you how to style each grid level separately, ensuring everything stays clean, flexible, and easy to update. Let’s get to it! Step-by-Step Tutorial On Creating Nested Grids Before we get started, let’s take a quick look at the grid layout we’ll recreate: This layout uses one main grid to hold two sections of content. Each section includes its own smaller grid for images, text, and social icons. The parent grid controls the overall structure, while the inner grids keep each content group perfectly aligned. Both sections stay balanced on desktop and reflow naturally on mobil...
Post a Comment
Read more

How To Run A Pre-Launch Design QA With Divi 5’s Inspector

Image
Before you publish a landing page, you scroll through one more time to check if everything looks right. But spacing that doesn’t match, incorrect colors, or different fonts can slip right past you. Divi 5’s Inspector tool solves this by displaying all your design changes in one place, making it easy to spot what needs fixing. This guide walks you through using the Inspector to review your landing page section by section and make sure it’s polished before launch. How Divi 5’s Inspector Makes Design QA Effortless The Inspector in Divi 5 is a visual panel that allows you to view everything happening inside your design without opening multiple settings windows. When you select any section, row, or module, it instantly shows all the applied design and content settings in a single sidebar. You get an immediate view of exactly how that part of the page was built. Colors, fonts, spacing, and presets appear all at once, which turns the usual guesswork of design review into something more...
Post a Comment
Read more

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