The Tech Zone

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...

Presets are how you stop rebuilding the same design choices over and over in Divi 5 . Once you’ve defined your buttons, text styles, or card layouts, the real advantage is being able to move those decisions into new projects instead of starting from zero. Divi 5 lets you export presets and import them into another site, so your preset library can travel with you. In this post, we’ll export a set of presets, import them into a new project, and look at what transfers cleanly, and what still depends on the setup of the receiving site. What Are Presets In Divi 5? Presets in Divi 5 are saved style settings you can reuse on multiple elements. You create a preset once and apply it multiple times, so you don’t have to style the same thing from scratch again. When you update a preset, every module using it updates too. And since presets are organized by module and option group, a Button preset affects only Button Modules, and a text-related preset affects text-based styling options. Divi ...