The Tech Zone

Header and footer elements are commonly understood as page-level structure. A site has one header, one footer, and the rest of the layout lives in between. Most people stop there. In HTML5, though, <header> and <footer> go further. They can describe structure within individual sections of content, beyond page level. Divi 5 makes it easy to apply semantic elements to any layout component. This post walks through the specific scenarios where adding header and footer elements to your layout actually improves clarity. What Are Semantic HTML Wrappers In Divi 5? Semantic HTML gives your website’s structure a vocabulary that browsers and assistive technologies can understand. A generic <div> doesn’t carry inherent meaning about what’s inside. But a <header> tag signals “this introduces a section,” and a <footer> tag says “this wraps things up.” Divi 5 includes this capability directly in the builder through Custom HTML wrappers and Custom Attributes. Any se...

Divi’s Menu module handles many navigation needs, but sometimes you want more options and control. Custom header designs, unique hover effects, or specific semantic HTML requirements can push you beyond what the Menu Module offers. Divi 5 ‘s semantic elements and HTML wrappers  let you build navigation from scratch using basic modules while outputting valid, accessible HTML. This tutorial demonstrates how to build a navigation menu using an Image Module for the logo, Text Modules for the text-based nav links, and a Button Module for a call to action. The result is a semantic <nav> structure with proper <ul> and <li> elements that browsers, screen readers, and search engines interpret correctly. Why Build Custom Navigation? The Menu Module works for out-of-the-box navigation, but custom-built navigation offers advantages in specific scenarios. Using individual modules gives you access to their full styling options. You can use CSS Grid or Flexbox to control y...

Today’s Divi 5 update is all about caching. Caching problems are annoying and challenging to solve when Divi isn’t handling caching. Sometimes, you just have to clear the cache. But that doesn’t mean we can’t try to make your life easier, and today’s update does just that. To put it simply, when your cache plugin gets out of sync with Divi, you’re no longer going to see completely broken styles. Furthermore, we added a handful of new integrations for popular caching plugins to automatically clear the cache for you when we know it’s necessary, such as when editing Theme Builder templates that target a diverse range of pages that your caching plugin simply doesn’t account for. What’s The Deal With Caching Problems? The crux of the issue is simple. When a caching plugin caches a page, it serves up static HTML to your visitors. That static HTML includes links to CSS files generated by Divi, which include all of the styles you customized in the builder. If Divi clears its CSS files b...

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