Posts

How To Import & Export Design Variables In Divi 5

Image
Design systems cut down the repeated work in website design. They give you a predefined set of design decisions for color palettes, spacing scales, typography, and more. Divi 5 introduced Design Variables in April 2025, letting you define these values globally. If you’re a web designer or you run multiple sites, you know the pain of setting up the basics for every new project. Design Variables shine even more when you can reuse them across sites. So, we recently introduced import and export for Presets and Design Variables, making it easy to transfer your design system between sites in minutes. Set up your design system once, then use it across every project. Here’s how it works. What Are Design Variables In Divi 5? Design Variables store reusable values that you can apply across your entire site. They’re shortcuts for design decisions you make repeatedly. Manage everything through the Variable Manager in Divi’s left sidebar while using the Visual Builder. Click the icon, add...
Post a Comment
Read more

Introducing Speculative Prerendering For Divi 5

Image
We implemented speculative prerendering to speed up load times in the builder, and the results are going to blow you away. We want the Divi 5 building experience to be fast, faster than any other builder. The only thing faster than fast is instant , and with speculative prerendering, that’s exactly what you get. Instant load times when entering, exiting, and switching pages in the builder. For Divi Pros who spend all day bouncing in and out of the builder, this quality-of-life improvement really adds up. There’s much to explore, so let me jump into the builder and give you the full, off-the-cuff tour. 👇 Speculative Prerendering ⚠️ Note : The speculation API is supported by Chromium browsers, such as Chrome, Edge, Opera, and many others. Safari and Firerox have not implemented it yet. Unfortunately, users of those browsers will have to wait to benefit from this update. What is speculative prerendering? Long story short: Divi 5 predicts where you are navigating to based on your...
Post a Comment
Read more

Buttons vs Links: When To Use Each In Divi 5 (With Practical Examples)

Image
Your site is full of things people can click. Menus, buttons, icons, banners, and form submits. They can look identical, but the HTML underneath tells browsers, screen readers, and search engines what each element actually is. With Divi 5 , you can control that meaning directly in the builder using Semantic Elements and Custom Attributes . In this post, you will learn the practical rule for choosing links vs buttons, plus real Divi 5 examples you can copy into your own layouts. Buttons vs Links: The Difference Explained Links and buttons can look the same, but they do different jobs in your code. A link uses the <a> tag with an href attribute. It points to a URL. Click it, and you move to a new page, a different section, or an external site. A button uses the <button> tag for in-page actions. You can also apply role=”button” to a non-button element, but then it must be focusable and support keyboard activation so it behaves like a real button. Click it, and something h...
Post a Comment
Read more

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