The Answer of Mak's Design System for confused Lifetime-Members and which one to use and how
Requests like the one from Rene van Dongen keep coming in, and as he mentions in his post, many others feel the same way. To shed some light on the situation, I’d like to use this post—as a former SiteKrafter user and now an exclusive KrafterPRO user—to provide a clear explanation.
From Chaos to Consistency: The Evolution of KrafterPRO
Ever since the early days of the Divi 5 Alpha and Beta, it was clear to Mak that the "old way" of designing websites was reaching its limits. Designing wasn't consistent, and creating responsive layouts often felt like a never-ending task.
The Problem: Manual Work and Inconsistency
Before things changed, we didn't have the clamp() function. If you wanted a website to look good on all devices, you either had to write complex code or manually adjust the design for every single screen size. It was a massive time-sink.
If you changed a font or a color, you had to hunt it down and update it everywhere. Managing colors meant keeping meticulous notes—otherwise, you were just "guessing" and hoping for the best. Adjusting a design months later was a nightmare because you had to remember exactly how you built it.
The Breakthrough: SiteKrafter
Mak saw a better way. He created SiteKrafter, an absolute amazing class-based system using Tailwind logic inside Divi 5 as a child theme. It was a success! But as Elegant Themes moved forward with the Variable Manager and Preset Manager, the game changed again - and extreme fast...
Why Presets and Variables Matter
Visual builders are powerful, but they can be overwhelming. Choosing between pixels, rem, em, or vh is confusing for beginners. This is where Presets saved the day.
By using Presets, we can create fluid, responsive elements directly within Divi 5. Combined with the clamp() function and Variables, your design becomes:
- Consistent: Everything matches perfectly.
- Fast: No more repetitive styling.
- Responsive: It works on every screen automatically.
From SiteKrafter to KrafterPRO
While SiteKrafter was a masterpiece, it was complex. Mak realized that for most Divi users, a system that is transparent and easy to understand is better. That is why KrafterPRO was born.
It wasn't always easy. We faced "Update Chaos" where presets would duplicate and create a mess in the manager. This wasn't Mak's fault—it was simply how Divi 5 handled presets and variables differently.
The Solution: The KrafterPRO Plugin
Mak listened to the community. Even when he couldn't reply to every message, he saw the need for a solution. The KrafterPRO 2.0.x Plugin was developed to solve the update chaos and make the design system future-proof.
Now, instead of just a design, you get a complete product:
- Design System JSON: This creates all your variables and presets in one go.
- Theme Builder Templates: Ready-to-use Headers, Footers, and 404 pages.
- Components: Pre-built sections you can drop into any page to save even more time.
What about SiteKrafter?
SiteKrafter is currently "outdated" (sorry Mak, It breaks my heart to write "outdated", as I fully support the class-based model) compared to the new preset model. However, in a very generous move, Mak gave SiteKrafter users Lifetime Membership to KrafterPRO. This secures your investment and gives you access to the latest tools.
...and who knows how soon we'll be able to use this component-based model again. I already have a few ideas for that... maybe for the automatic application of KrafterPRO Preset sets, installed in the right place 'as if by a ghost hand' across an entire site to customize all standard modules found there. This might be even better using JavaScript, or perhaps with an AI hosted by Mak, keeping the entire value chain within Mak’s ecosystem... - (A note from Frank Schlatter)
The Bottom Line
KrafterPRO is the design system of the hour. I
It’s faster, cleaner, and built with the future of Divi 5 in mind.
How to Install Your Files in KrafterPRO
The KrafterPRO plugin makes the setup process much smoother. When you download your package, you will find three main JSON files. Here is where they go:
- The Design System JSON: Drag this file directly into the Presets area within the KrafterPRO plugin. This single action automatically generates all your variables and presets for you.
- The Theme Builder JSON: This file contains your "global" layouts like Headers, Footers, and 404 pages. Install this in the Divi Theme Builder.
- The Components JSON: These are your pre-built sections. You can import these to have ready-to-use modules that you can simply drop onto any page.
Why is there a separate area for Variables?
This is built for the future! It allows Mak to send out updates for variables independently, or for you to swap out design settings between different projects easily. It even allows you to export individual variables or presets - something Divi 5 doesn't offer natively yet.
Reinstall your variables.json file (either from Divi 5 Variable Manager or exported from the KrafterPRO plugin) by importing it into the KrafterPRO plugin again. However, variables exported natively by Divi 5 must be tested first.
Installation instructions are all in Mak's installation video and the use of the design system will be found on Mak's youtube channel.
By sharing the history of Mak’s design system—from the early days of Divi 5 Alpha and Beta, through the relaunch of Divi 5, and up to the present day—I hope to provide a helpful roadmap. My goal is to offer clarity without being overly complex and to help ease any frustration you might have felt along the way.
Well said Frank, thank you!
As the old boys in the Muppet-Show said: "Applause, Applause!"
I'm on vacation the next 14 days in Portugal, and I'm looking forward to it.
But when I'm back, I will start to work on all my 6 Sites with new Krafter 2.x. Looking forward to it.
Thanks Mak for developing and Frank for the explanations!
Klaus
Hi MAK and Frank.
Thanks for the info.
Do I just delete SiteKrafter Pro and install KrafterPro afterwards?
Best, Tim
Tim Bøttiger I believe that is the best move to avoid errors from what I have read.
Since I primarily use KrafterPRO presets and variables, I don’t need the SiteKrafter class framework. That’s why using my own child theme was the right choice for me. To be clear: a child theme isn’t strictly necessary unless you have specific needs (I’ve written a detailed blog post about this).
I also don’t treat every update as mandatory. While working on a live project that needs to be finished, I avoid updating the KrafterPRO presets. Once the project is complete, I export the variables and presets and save them in a dedicated project folder. This ensures I can always revert to the exact same presets if I need to make adjustments later. This process will likely improve soon with the KrafterPRO plugin.
However, when I move a project to a staging environment, I do run KrafterPRO updates. This allows me to check if anything changes in the modules styled with these presets or if I need to reassign them. During this phase, it’s often helpful to keep the "imported" prefix version alongside the previous preset version. If everything looks good, I use the plugin to delete the old presets and finalize the new ones.
One thing I always do is create a backup. I usually exclude media files to keep the process fast, but everyone should decide their own strategy—whether it's a full backup or separate media via FTP.
I’ve had no issues using the SiteKrafter child theme purely with presets and variables. Ultimately, it was just a decision of whether I really needed that specific child theme if I wasn't utilizing its core features. You can find more info in my older blog posts about why I choose KrafterPRO over SiteKrafter, the differences between child themes, and what to consider when externalizing CSS.
For small projects or users who rarely touch CSS, a Divi 5 child theme is usually not necessary. I prefer using one because I like to organize my CSS in an external style.css (or multiple files) for testing purposes. But for small to mid-sized projects focused on visual building, you can easily skip it.
Bottom line: The SiteKrafter child theme isn't necessary for me because I stick to the KrafterPRO preset system and don't mix the two.
Frank Schlatter thanks for your post. I'm not as sharp and don't have the experience that you have in working with wordpress. I'm interested in using a tool like KrafterPro IF there aren't always advanced issues that I don't understand. I need a plug-in that helps with responsive content and makes my work easier, also in light of my lack of insight into the vast wordpress engine room. So my short question: "Can I install KrafterPro 2.0" and get a boost in my work designing content for my website? " Best Tim
Frank Schlatter you have clearly stated what many of us have discovered through the SiteKrafter to Krafter to KrafterPro evolution and beyond. So many of us believe in and support Mak's work. It's a roller coaster at times, but all good things take time. Frank, thanks for your meaningful comments, perspectivel updates, and for all the hours you have put in helping Mak work through the changes as Elegant Themes and Divi5 evolve.
Mak - Kudos to you my friend. You are doing an incredible job as a one-man-shop, and producing some stellar tools to help web developers make the most of Divi5. Love you my friend.
Appreciate y'all.
I was trying to find the best way to implement Klamp into everything. So nice not to have to tweak every view or make media quesries for every occasion where a font seems off.
The clamp() function is certainly no secret, but the real key is knowing browser compatibility. While older browsers might struggle, their market share is small and continues to shrink.
However, the function itself is only half the battle—the true magic lies in the parameters you set within it. We’ve put a lot of effort into the KrafterPRO presets to handle this perfectly for you. While you could use external tools to calculate these values yourself, it’s a tedious process. The alternative—using traditional media queries or manually styling every single device size—simply doesn’t fit a modern, efficient workflow.
I encourage everyone to experiment: try creating your own variables using clamp() and see how they behave. It’s a fantastic way to sharpen your skills and deepen your understanding of modern CSS.
But at the end of the day, that’s exactly why we built KrafterPRO. It offers a sophisticated, ready-to-use design system so you can focus on what matters most: designing and rolling out high-quality websites. ("we" represents Mak and the comunity feedback)
NOTE;
clamp() isn't the only tool for responsive websites. There are other interesting preset solutions, such as the Autogrid preset. It's important to remember that responsiveness isn't everything—the entire design system matters: consistency, fluid/responsive behavior, time savings, and reusability - all in the new and modern workflow of creating websites in Divi 5.
Frank Schlatter to clarify I was just mentioning clamp because I appreciate how KrafterPro makes use of it. Thanks for chiming in with the correct spelling.
Thank you.
Thanks Frank for grabbing all the necessary horns. The two of you have made the transitions much smoother.
On a side note, your mention of the three musketeers, whoops... the three JSONs, and when I unzipped the 2.0.11 this afternoon, I noticed three JSON files, but they're but TWO, and named:
KrafterPRO-Design-System-v2.0.11.json
KrafterPRO-Starter-Template.json
Might you clarify for us the disconnect?
It would be of benefit for those new to KrafterPro
The ones you mentioned above:
The Design System JSON
The Theme Builder JSON
The Components JSON
Thanks in advance from Southwest Ohio
Michael Langham Yes, they love creating confusion here. I really have no idea what the point is in constantly renaming things. And don’t even think about asking support, because your ticket will simply be closed. But if you post it here, there’s a good chance you’ll get a helpful answer from Frank Schlatter. For me, the confusion was short-lived, as I find the starter template completely useless. So I just dropped the design-system JSON into the variables section.
Rene van Dongen Any major release Divi 4 moving to Divi 5 is an indicator that there are going to be major changes and plugins are going to break and there will be challenges ahead. Mak has been doing an excellent job adapting and trying to help everyone else here get ahead of the shift. I have been building websites for 16 years using WordPress and standardized on Elegant Theme for the past several years and Mak is moving fast and breaking his own things in the name of progress. The trade off is having some unexpected outcomes but from what I am seeing here Mak lands on his feet and keeps running in the right direction. It's not out of a love for confusion but an effort to keep from stagnating and it is my humble opinion that those who find the patience to learn the system and support the effort will be stronger for it with the outcome. I was in your shoes so I can relate with the confusion enough to share a "hang in there" because the difference that propelled me forward was the patient encouragement form the attached community. The answer are in the responses and keeping aneye on what is being posted regularly.
Hi Michael,
To clarify the "three JSONs" confusion: Before the KrafterPRO plugin existed, there were indeed three separate JSON files (not to be confused with plugins!).
At that time, KrafterPRO was a design framework that initially consisted of just a single Design System JSON file. Later, more JSONs were added to help users build websites faster without having to create all Theme Builder designs from scratch. We even included some components in a "Components JSON" as a little bonus.
Back then, these files had to be imported manually into Divi 5. However, the rudimentary way Divi 5 handled variables and presets caused issues; every update created duplicates in the Preset Manager because there was no versioning in the file names.
This tedious process is exactly why the KrafterPRO PLUGIN was born—to automate and simplify these imports. What exactly will be available for download via the plugin in the future is entirely up to Mak. While it started as a simple management tool, KrafterPRO has truly grown up. What began as pioneering work is now a market-ready product, and the vision behind it belongs solely to Mak.
Just for the sake of completeness: Like you, I am simply a community member who jumped on this train early on. I am not involved in Mak's company, nor am I being paid by him. All my posts come from my own conviction and a desire to help.
Thanks to all of you!