The Tech Zone

Presets in Divi 5 are a powerful way to keep your design consistent sitewide. And with the Preset Manager and Preset Preview, you can refine changes in a focused workflow before you commit them across your pages. Still, the best preset decisions often happen in context. That is where Divi 5’s Canvases come in. A detached canvas can act as a dedicated Preset Playground where you build realistic examples, compare variations side by side, and document what works, all while your live pages stay clean and untouched. Here’s how to set one up. Divi 5’s Preset System: A Quick Overview Divi 5’s Preset System gives you reusable styles that work across your entire site. Think of presets as design packages you create once and apply everywhere. When you update a preset, every element using it changes instantly. Element Presets capture complete designs for your core building blocks. These include Sections, Rows, Columns, and Modules. Style a Button Module with specific colors, typography, a...

WooCommerce category pages often look the same out of the box, but Divi 5 changes that. With the Loop Builder , you can redesign how products appear, using dynamic content that pulls product data like titles, featured images, and prices for every item in a category. Pair it with Divi 5’s CSS Grid , and you get full control over the layout. In this tutorial, you’ll learn how to create a custom category page that automatically updates with products from the right category, no code or extra plugins required beyond WooCommerce. How To Create A WooCommerce Category Page If you’ve ever set up a WooCommerce store, you already know what the default category pages look like: products arranged in a basic grid with an image, name, price, and Add to Cart button, all following the same template no matter which category you’re viewing. Switch themes, and the structure barely changes. Your “New Arrivals” category looks identical to your “Sale” category, which looks identical to “Accessories,” e...

Mega menus enhance site navigation on content-heavy websites, allowing users to access more options quickly without cluttering the header or requiring extra clicks. In previous versions of Divi, mega menus were created using the Menu module  with the custom CSS class  mega-menu to expand  submenus and arrange items in columns. With Divi 5 , Canvases offer a powerful new approach, enabling more flexible and complex mega menus featuring multi-column layouts, embedded images or icons, full modules, and more. In this post, we’ll explain what Divi 5 Canvases are and how you can use them to build an eye-catching mega menu in a few easy steps. Let’s dive in. What Are Divi Canvases? Divi Canvases are detached workspaces in Divi 5, separate from your main page layout. They provide a clean, isolated environment for building off-canvas elements, such as mega menus, popups, sidebars, and more, without cluttering the primary content area. Subscribe To Our Youtube Channel The...