Posts

How To Create Off-Canvas Popups In Divi 5

Image
Off-canvas popups are one of the most effective ways to capture attention, grow email lists, announce offers, or guide visitors without cluttering your main page layout. In the past, creating them in Divi required using third-party plugins or custom code. With Divi 5 , that all changes. Using the powerful combination of Divi 5 Canvases and Interactions , you can now build fully custom, native off-canvas popups directly in the Visual Builder. In this post, you’ll learn exactly how to use these two features to create beautiful off-canvas popups. Let’s get started. What Are Divi 5 Canvases? Divi 5 introduces Canvases — a new system of detached workspaces that live separately from your main page or post content. Think of them as design boards inside the Visual Builder, allowing you to create, organize, and manage elements without ever cluttering your primary layout. Every Divi page starts with a Main Canvas , where you build the core visible content of your page, including the hero...
Post a Comment
Read more

Building A Dark Mode Color Palette With Divi 5’s Relative Colors

Image
With Divi 5 , dark mode doesn’t have to be a fragile set of overrides. You can design light and dark layouts side by side, using the same structure and a shared color system that stays easy to adjust. We’ll start with a light-mode layout, then build a dark mode palette for it. We’ll build a dark mode version inside a Canvas , and apply the palette using Divi 5’s Color System and Design Variables . At the end, we’ll adjust a few HSL values and watch both layouts update instantly, without touching individual modules. A Practical System For Building Light & Dark Mode Layouts In Divi 5 Divi 5 makes it easier to manage color decisions at the system level, rather than updating modules one at a time. You can define a small set of rules, apply them consistently, and adjust them later without hunting through a layout. That approach is especially useful when light and dark modes need to coexist. In this walkthrough, we’ll build a dark mode palette that stays in sync with the light layou...
Post a Comment
Read more

How To Build A Grid Gallery In Divi 5

Image
Photos tell better stories when they sit in clean, organized grids. In Divi 5 , you can get there in two ways: use the Gallery Module for a fast, familiar setup, or use CSS Grid controls in the Visual Builder when you want more layout freedom. Grids handle the structure for you, and Divi gives you the design tools to turn a simple collection of images into a polished, responsive, and interactive design. In this post, you’ll learn how to configure grid settings, style your images, and build galleries that look great on every device, including hover effects, captions, and reusable presets. Here’s the breakdown. Grids In Divi 5 CSS Grid controls rows and columns simultaneously, unlike Flexbox, which is designed for a single axis at a time (row or column). With a grid, you can manage both horizontal and vertical placement simultaneously. Grid typically requires custom CSS and can be challenging to master. But not inside Divi 5. Divi 5 bakes CSS Grid directly into the Visual Builder. ...
Post a Comment
Read more