The Tech Zone

Canvases were recently introduced in Divi 5 , providing detached workspaces for building off-canvas menus, staging areas, modal popups, and more. Combine these Canvases with Interactions , and you have a complete system for controlling exactly how information flows while making your website interactive. That includes click triggers, scroll reveals, hover effects, and more. Working together, these features give you a high level of control, and the setup is simpler than you might expect. In this post, we’ll show you how to wire everything together in Divi 5. What Are Canvases In Divi 5? Building modern websites means managing layers of content. Your main page layout, sure. But also popups, slide-out menus, modal windows, and other elements that appear on demand. Things get messy. Canvases can give you separate workspaces for different parts of your design. Your page starts with a Main Canvas where your primary content lives. Then you can create additional Detached Canvases for sli...

Presets are how you stop rebuilding the same design choices over and over in Divi 5 . Once you’ve defined your buttons, text styles, or card layouts, the real advantage is being able to move those decisions into new projects instead of starting from zero. Divi 5 lets you export presets and import them into another site, so your preset library can travel with you. In this post, we’ll export a set of presets, import them into a new project, and look at what transfers cleanly, and what still depends on the setup of the receiving site. What Are Presets In Divi 5? Presets in Divi 5 are saved style settings you can reuse on multiple elements. You create a preset once and apply it multiple times, so you don’t have to style the same thing from scratch again. When you update a preset, every module using it updates too. And since presets are organized by module and option group, a Button preset affects only Button Modules, and a text-related preset affects text-based styling options. Divi ...

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

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

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