The Tech Zone

Responsive design often comes down to controlling how elements shift, wrap, and space themselves across different screens. Divi 5 introduces Flexbox as its core layout system, giving you control over layout flow and alignment at the container level. While block-style layouts lock you into fixed columns and floats, Flexbox adjusts to available space, making responsive behavior more predictable. In this post, we’ll look at how Flexbox works in Divi 5 and walk through a simple layout to show how these tools come together to create a clean, responsive design with fewer adjustments. What Is Flexbox In Divi 5? Flexbox is a modern way of arranging elements so they automatically adapt to available space. Think of it like organizing items on a shelf: you decide how they should sit, how much room they need, and what happens when you run out of space. Rather than locking modules into fixed columns, Flexbox treats a section or container as a flexible space and gives you control over how its...

Most images on your site need nothing more than what Divi already does. Add an Image Module, style it, and you’re done. But there are times when you want to group an image with a caption in a way that your HTML explicitly defines as a single unit. That’s where figure and figcaption come in. These HTML elements create a built-in semantic relationship that plain image-plus-text layouts often don’t express as clearly. The question isn’t whether they’re better, it’s when they’re worth using. Divi 5 makes adding these HTML wrappers  straightforward when your content needs that extra structure. Here’s how to decide. Understanding The Figure And Figcaption Elements Both elements come from HTML5 and work together to mark up content that benefits from a visible caption. Before you can decide when to use them, you need to know what each one actually does and how they interact with browsers and assistive technology. Let’s break down each element separately, then look at why their relation...

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