Posts

Everything You Need To Know About Canvases in Divi 5

Image
With each update, Divi 5 edges closer to its full release. It’s faster, more stable, and packed with features that set it apart from previous versions. The latest feature of Divi 5 is Divi Canvases , a powerful system for creating off-canvas elements such as menus, pop-ups, sidebars, and other reusable components. A Canvas is a dedicated, detached workspace separate from your main page or post content. Every Divi page starts with a Main Canvas for your primary layout, but additional canvases provide isolated spaces for off-canvas builds. Canvases allow you to keep off-canvas elements organized, safely duplicate and tweak designs without affecting your live content, and can be global for site-wide components. In this post, we’ll cover what Canvases are, how to use them, and share tips to unlock their full potential. Let’s get started. What Are Canvases In Divi 5? A Divi Canvas is a detached workspace within the Visual Builder where you can design and organize content. Think of it a...
Post a Comment
Read more

Mastering Divi 5’s Grid Offset Editor

Image
Before CSS Grid in Divi 5, complex layouts often meant extra columns, negative margins, and duplicate sections. It wasn’t clean or flexible, especially when layouts needed to adapt across breakpoints. CSS Grid support in Divi 5 introduced a proper two-dimensional layout system that allows you to control structure without relying on workarounds. And within that system, Grid Offset gives you direct control over where an element starts, how far it stretches, and how tall it runs in the grid. You define position in the structure itself, rather than nudging things into place. Once you understand how start and span work together, you can build flexible layouts without clutter or hacks. How Grid Positioning Works Divi 5’s Grid Offset Editor gives you precise control over where modules land in your layout. But positioning elements on a grid makes a lot more sense once you see what’s actually built when you turn Grid on. Grids Are Built On Lines When you enable Grid on an element, an i...
Post a Comment
Read more

Semtantic Elements & Custom HTML Wrappers For Divi 5

Image
I am excited to introduce Semantic Elements & Custom HTML Wrappers for Divi 5 . Now, you can change the element type of any module and utilize semantic tags like nav, section, header, and button to give inherent meaning to each. It’s important for accessibility and SEO, as it enables screen readers and bots to understand a page’s structure. You can build your own menu using Divi elements and then change the semantic tag to ‘nav’ to inform screen readers of its purpose. We also added the ability to add custom HTML before and after any element, giving you more freedom to create custom wrappers and inject code into specific areas of the page that a code module can’t access. Check out the following video to see the new feature in action. 👇 Semantic Elements You may be familiar with various HTML tags, such as div and span . Each tag has a specific purpose; the a tag is for creating links, the p tag is for holding a paragraph of text, and so on. HTML5 introduced new tags, inc...
Post a Comment
Read more

5 Split Screen Designs For Divi 5 (Free Download)

Image
Divi 5 makes it easy to build split screen layouts that feel modern, clear, and professional. In this free pack, you will get 5 Split Screen Sections, each designed to pair content and imagery side by side for immediate visual impact. Drop one onto any page, swap the text and images, and you are ready to go. No extra setup required. Preview Here’s a quick look at all 5 Split Screen Sections included in the pack. The download is further down the post. Download 5 Split Screen Designs For Divi 5 Get all 5 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 email address below and click download to access the layo...
Post a Comment
Read more

How To Create Hotspots With Divi 5

Image
Clickable areas, such as hotspots on your website, can reveal hidden content, trigger pop-ups, or launch animations, transforming static pages into interactive elements that guide people precisely where you want them to go. Divi 5 ‘s Interactions handles all of this without requiring any custom coding. We’ll walk through the exact steps to create interactive elements that respond to clicks, hovers, or scrolls. Have a look! What Are Hotspots? Hotspots are clickable or hoverable zones that are layered over sections, images, and graphics. You’ll see them on product showcases where each feature gets its own spot. Maps use them to mark locations. Infographics rely on them to break down complex data without cramming everything into one view, among other use cases. Rather than flooding a page with paragraphs of text, you can tuck information behind these small markers. Users get details exactly when they want them, not before. This keeps pages clean and scannable while still offering de...
Post a Comment
Read more