The Tech Zone

In modern web design, off-canvas design elements such as mega menus, slide-in sidebars, and interactive pop-ups are essential for creating engaging, user-friendly experiences without overwhelming the main layout. Divi 5’s Canvas system is a powerful new feature that lets you create off-canvas designs, manage them with ease, and place them anywhere in your layouts via the Canvas Portal Module. In this post, we’ll cover what the Canvas Portal Module is, how to use it, and its key benefits to help you master this new feature in Divi 5. Let’s get started. What Are Divi 5 Canvases? Divi 5 Canvases introduce separate, detached workspaces within the Visual Builder, completely detached from your main page content. These canvases serve as dedicated areas for building and organizing off-canvas elements, keeping your primary layout clean and uncluttered during editing. Canvases come in two types: Local Canvases , which are tied to a specific page or post, and Global Canvases , which are r...

The official release of Divi 5 is scheduled for February 26th. Divi 5 has been available for some time. In fact, we recommend it for building new websites, and 40% of our customers are already choosing it. That’s no surprise because it’s better than Divi 4 in every way, and once you get used to it, it’s hard to go back! Some third-party plugins have yet to add support, but their Divi 5 updates are now beginning to arrive. It has been a long journey, but all of the pieces are coming together. 🤩 Removing The Beta Label We’ve kept Divi 5 in beta for an extended period, giving creators more time to make their plugins compatible and allowing our community members to adopt it at their own pace. Meanwhile, we’ve been continually improving it, adding new features every week or two. Our message has been simple: You can choose Divi 4 or Divi 5, whichever works best for you. We’ll continue to improve it, and the community will naturally make the switch, not because we’ve forced it, but ...

Divi 5 introduces a system-wide update that changes how layouts are built. Every module now includes Layout controls in the Design tab. This means that modules can now act as their own layout containers using Flexbox and CSS Grid. Elements inside align, reorder, and space themselves without rebuilding the structure around them. It is a quiet change, but a meaningful one. Layout control now lives closer to the content, making designs cleaner, more flexible, and easier to adjust as they evolve. A System-Wide Layout Upgrade For Every Module Divi 5’s layout system is powered by Flexbox , with CSS Grid available as needed. This shift simplified how rows and columns behave, making alignment, spacing, and responsive behavior more predictable. Structural design became easier and more consistent across the board. However, while the layout system evolved, the internal structures of the modules themselves remained rigid. Each module, like a Blurb, always followed the same internal structure...

Divi 5 makes it easy to build contact sections that look polished, professional, and ready for real inquiries. In this free pack, you will find 7 Styled Contact Sections, each designed to help visitors reach out quickly using clear layouts, strong typography, and modern form styling. Drop one onto any page, swap the details, and you are ready to go. No extra setup required. Preview Here’s a quick look at all 7 Styled Contact Sections included in the pack. The download is further down the post. Download 7 Contact Sections 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 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 bel...

For years, Divi gave you CSS IDs and Classes for elements. That worked fine for styling and scripting, but attributes like ARIA roles or focus attributes, such as tabindex, required third-party plugins or custom code. Not anymore. Divi 5 introduces Custom Attributes that let you add semantic roles directly in the builder. You can now design pages that work better with assistive technology without leaving Divi or writing extra code. This tutorial guides you through the most useful semantic roles and demonstrates how to apply them in Divi 5. What Are Semantic Roles? Semantic roles inform browsers and assistive technology about the actual function of an element on your page. When you add role=”navigation” to a div container, you’re creating a landmark that screen readers can identify and jump to directly. Users can skip past content they don’t need and land exactly where they want to go. Subscribe To Our Youtube Channel That capability matters because accessibility has become a ba...