The Tech Zone

After over a year of public testing and improvement, Divi 5 is officially exiting the beta phase today. This isn’t the finish line; it’s a fresh start for Divi, and you can expect even faster development moving forward. It’s going to be an exciting year! I cover everything in the video below, including how to upgrade to Divi 5 and migrate your websites. 👇 Getting To Know Divi 5 Firstly, we know that Divi 5 is a significant change, and that you may need more time to adapt, especially if your third-party plugins are not ready. For that reason, we will continue to support Divi 4 for at least the next 12 months, and longer if practical, while continuing to fix security and compatibility issues with new WordPress versions. There’s no rush. The release of Divi 5 should be exciting, not stressful. Take it at your own pace. If you don’t opt in to Divi 5 updates, you’ll stay on the Divi 4 update path. First Things First: Explore Divi 5’s New Features If you are brand new to Divi 5, w...

Skipping the process of assigning semantic wrappers can feel tempting. It often means building the page first, then going back to configure tags for each element, and repeating that work on every new section or page. Divi 5 removes this friction by using presets. You can define semantic tags once at the default level, and every element you add afterward will automatically follow the correct HTML structure. In this post, you will learn which preset settings to configure so your builds are semantically sound from the start, even before you begin creating pages. Have a look! What Are Semantic Tags? Every element on a webpage is wrapped in a tag. Some tags describe the type of content they contain. These are semantic tags. The word semantic means “relating to meaning,” so semantic tags add meaning to your markup. Tags like header, nav, main, section, article, aside, and footer fall into this category. A header tag tells browsers this content functions as a header. A nav tag indicate...

Accordions and toggle content have traditionally required JavaScript to handle the interaction correctly. Modern HTML includes native elements that get you closer to a non-JavaScript version of that. <details> and <summary> elements create functional disclosure widgets using nothing but a couple of simple elements. These elements handle expand/collapse behavior automatically, support keyboard interaction out of the box, and work without any extra JavaScript. Divi 5’s Semantic Elements allow users to work with these native HTML elements (and many others) directly within the Visual Builder . You can construct toggles using Divi’s layout elements while outputting clean, semantic HTML that browsers understand natively. This post covers how to build a custom toggle using Divi 5’s Element Type settings, Divi design settings, and some simple CSS to make it all really smooth. Understanding The Details And Summary Elements The <details> element creates a disclosure wi...

Canvases were recently introduced in Divi 5 , providing detached workspaces for building off-canvas menus, staging areas, modal popups, and more. Combine these Canvases with Interactions , and you have a complete system for controlling exactly how information flows while making your website interactive. That includes click triggers, scroll reveals, hover effects, and more. Working together, these features give you a high level of control, and the setup is simpler than you might expect. In this post, we’ll show you how to wire everything together in Divi 5. What Are Canvases In Divi 5? Building modern websites means managing layers of content. Your main page layout, sure. But also popups, slide-out menus, modal windows, and other elements that appear on demand. Things get messy. Canvases can give you separate workspaces for different parts of your design. Your page starts with a Main Canvas where your primary content lives. Then you can create additional Detached Canvases for sli...