Posts

Exploring Divi 5’s New Top Bar UI

Image
The top navigation bar sits at the center of everything you do in Divi. So even small changes to how it’s organized can shift the entire editing experience. As Divi 5 brought in more tools and shortcuts, the top bar started carrying too much at once. Finding something as simple as the preview button took more attention than it should have. This update reorganizes the top bar to fix that. We’ll walk you through what changed, where everything lives now, and how it fits into your editing workflow. Why The Divi 5 Top Bar Was Updated Here’s the previous top bar alongside the updated one. In the old layout, every action sat at the same level. Save, preview, undo, view switching, page settings, all visible at once with barely any separation between them. Nothing guided your eye to what mattered most, so finding a specific tool meant reading through everything. Controls you reach for fifty times a day sat right next to options you might open once a session. The updated bar keeps all th...
Post a Comment
Read more

Divi 5 Public Beta 9 Release Notes

Image
The Divi 5 Public Beta is available today. If you prefer the experience to Divi 4, it’s ready for use. If you use Divi 5 , you’ll notice an update notification for Public Beta 9 . We release new Divi 5 versions every two weeks, and each one improves upon the last. If you haven’t tried Divi 5 yet, give it a test and let us know what you think. What’s New In Public Beta 9? We  implemented  119 bug fixes and improvements   and released two new features: the Command Center and new Menu Modules, Menu Looping, and Interactions . The official release date for Divi 5 is set for February 26th . Until then, we’ll continue to address the feedback of our beta testers, fixing bugs and making small improvements with each update. In my spare time, I’ve also been keeping the ball rolling on your most requested features. If you want to get an early inside scoop, I often post progress reports in the Divi Theme Users Facebook group. Join us! New Menu Modules, Menu Looping, and Inte...
Post a Comment
Read more

How To Create An Off Canvas Services Popup In Divi 5

Image
Off canvas menus appear everywhere on the web, but building one that works smoothly on desktop often means fighting with custom CSS or patching together mega-menu workarounds. Divi 5 handles this differently with Canvases and Interactions . We’ll build a global off canvas services menu triggered from a Theme Builder header template. The menu sits in its own canvas, completely separate from your page layout, and stays fixed while visitors scroll. On mobile, it gets a max-height and internal scroll so everything stays accessible on smaller screens. What Are Canvases In Divi 5? A canvas in Divi 5 is a separate workspace that exists outside your main page layout. Your page content lives in the main builder area, but canvases operate independently and stay hidden until triggered. Think of them as dedicated containers for interface elements that only appear when needed. You build off canvas menus, slide-in panels, popups, or drawers inside a canvas, and they wait in the background unti...
Post a Comment
Read more

When To Use Section, Aside, And Main HTML Elements In Divi 5

Image
Search engines and assistive technologies rely heavily on your page’s HTML structure to understand what each part is for. When everything is wrapped in generic <div> elements, they get less structural context, which can make your content harder to interpret and navigate. Using <main>, <section>, and <aside> can clarify your page structure and improve navigation for screen reader users. It also gives search engines a clearer context about which content is primary versus supporting. So when should you use each one? In this post, we’ll break down how these elements work and how Divi 5 makes it easy to assign semantic elements to any part of your layout. Let’s get into it. The Three Key Semantic Elements Semantic HTML includes many elements that describe page structure and content roles, each with a specific purpose. The elements you’ll use most often for structure are <main>, <section>, and <aside>. Understanding what they do individually he...
Post a Comment
Read more

Using Divi 5’s Flexbox Layout System For Responsive Web Design

Image
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...
Post a Comment
Read more