The Tech Zone

Today, we are introducing new menu components, menu looping, and selector-based targeting and breakpoint triggers to the interaction builder . These new features, along with Divi 5’s broader systems like canvases and semantic elements , all come together to give you the freedom to build any type of menu, including mega menus, slide-in menus, and more. We aren’t done adding more menu features. We’re adding them piece by piece, and each piece unlocks a broad range of new possibilities. Check out the following video to see the new feature in action. 👇 New Menu Components To give you the most freedom to build any type of menu, we are adding smaller menu components that can tap into broader systems. Instead of being locked into a particular layout, you can build your own! With interactions, nested elements, sticky elements, and a wide range of useful menu components (buttons, social icons, and more), you can build just about anything. Today, we are adding two more pieces to the ...

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