The Divi 5 canvas is a workspace detached from your main post content. You can use them as staging areas for design updates, a place to organize off-canvas components, or simply as a safe space to experiment with new ideas.
You can create global canvases to build website-level off-canvas menus and popups, as well as local canvases for specific posts.
-
Buy [Divi Design System](<https://diviuniversity.com/product/krafter-a >) here!
-
Buy the Divi Mastery Course for ONLY $27
In this video, I show you how to create reusable components in Divi 5 using a proper design system workflow with Krafter. Instead of manually fixing spacing, colours, and responsiveness on every page, you’ll learn how to build components that stay perfectly consistent across all screen sizes.
This method uses:
- Fluid spacing scales
- Token-based colour systems
- Reusable components
If you want your Divi websites to look professional, scalable, and easy to maintain, this is the exact system I use on real projects.
I have learned from Mak's video that you can apply autogrid to a content row. I have been able to use images as in his video as well as blub modules. I have not been able to do so with group modules. Has anyone tried that and if so, were you able to get autogrid to work with them?
In this video, I show the correct way to design using a spacing scale, so your layouts stay consistent, fluid, and responsive across all screen sizes.
Most websites break on mobile because spacing is guessed using random padding values. Instead, I demonstrate a proper spacing system where spacing and typography scale fluidly with the viewport — no media-query chaos.
I use Krafter to build this system, ensuring:
- Consistent vertical rhythm
- Fluid spacing that adapts automatically
- Responsive typography that feels natural
- A scalable design system that works on real projects
This approach removes guesswork and helps you design websites that look intentional, professional, and future-proof.
If you care about clean layouts, proper design systems, and responsive design done right, this method will completely change how you build websites.
Watch how I made a membership website from scratch, step by step.
Hey MAK,
I have some questions regarding Krafter?
- Can you include Advanced editing menu to Krafter? At the moment it is only for Design menu.
- Does Krafter works with WooCommerce plugin?
- Can we apply Krafter to templates like blog posts, pages etc.
Cheers,
I'm loving your tutorials. They;re a great help with getting up to speed with Divi5, and I love Krafter. However, I am very frustrated because, even though I have paid you for Krafter and Divi 5 Mastery, my dashboard doesn't allow me to download Krafter. I have the original version but a lot has been added since then.
Paul
Hi! Mack, I am excited to update the version of Krafter, but I'm confused about what I can use: Krafter 1.9, Sitekrfater Pro, or Krafter Presets, only Krafter 1.9, or all. Please reply
Mak,
Is there any way that you can create Krafter as a plugin that would allow you to push updates to us, rather than requiring us to log into Divi University, download the new versions of Krafter, and re-import it into each of our websites, in the Divi Library area?
Just like Site Krafter Pro, just like Divi, just like most things, if this was a plugin (rather than providing it to us as a stand alone .json file) I'd be hoping you could "push" the updates to us so your enhancements would automatically be updated within all of the websites that we're using "Krafter" in, and the same thing with Krafter Presets, etc.Â
I love the fact that you're continuously improving Krafter, etc., but if you could turn these items into a plugin, so you could push out updates that could be pulled into our websites without any other work on our end other than updating the plugin, this would be perfect.
Do you think you can do this for us??
Thanks,
Gary Gordon
In this Divi 5 video, I walk you through the latest improvements to Krafter — the Divi 5 design system built for speed, consistency, and professional layouts.
What’s new in this update:
- Auto Grid system for responsive layouts without manual column tweaking
- Updated button system for cleaner, more consistent UI across your site
- Expanded Krafter course — now 7 structured lessons covering setup, workflow, and real-world usage.
Krafter is designed to help you build websites in Divi 5 the same way UI designers work — using classes, presets, and systems instead of one-off styling.
If you’re a freelancer, web designer, or agency using Divi 5, this update makes your workflow faster, more scalable, and easier to maintain.

