Skip to main content

Why a Variable and Preset Workflow with KrafterPRO Outshines the Class-Based System

In the early days of Divi 5, the idea of a purely class-based system like SiteKrafter was fascinating. From a developer's perspective, it offered the vision of a clean, lightweight code solution based on the logic of Tailwind CSS. However, the reality of web development has taught us that a tool must be more than just powerful; it must be intuitive and centrally controllable for a designer's daily workflow.

The Realization: Variables as the Heart of Consistency

Mak realized early on that a truly clean workflow for web designers is nearly impossible without central management. While classes often create an abstract layer between design and result, variables in the Divi 5 Variable Manager tap directly into the DNA of the design.

Without this central control, achieving true consistency and a consistently Fluid / Responsive Design (keyword: fluid clamp() functions) is almost impossible for designers to manage efficiently. This is why the focus has shifted consistently toward the Krafter PRO design system—moving away from complex class structures and toward a system that works where the designer feels most at home: within Divi’s native interface.

Krafter PRO: Transparency and Speed

The combination of variables and presets offers advantages that a pure class-based system often lacks in daily practice:

  • Traceability: A user immediately understands what a preset does. They can create their own presets, link them to global variables, and ensure that changes made in one place (e.g., a color or a spacing value) are instantly applied globally across all pages.
  • Central Management: Modifying a clamp() function in the Variable Manager controls the entire responsiveness of the website without having to keep track of hundreds of CSS classes.

If you are torn between Krafter PRO and a class-based model like SiteKrafter, ask yourself one core question: Are you an architect of code or a creator of results?

  • Choose Krafter PRO (Presets & Variables) if you prefer a fast, visual workflow where you can see and control changes directly within the Divi interface. It is ideal for designers who want to achieve consistency through simple, central levers (variables) without having to wrestle with the underlying CSS logic.

--> otherwise be a creator of restults by deep diving in code (Read my other Blog Articles)

Management Challenges: The Suffix Issue -

Naturally, this system brings its own technical hurdles. The current management of presets in Divi 5 often leads to duplicates with the "-Import" suffix during updates. This can quickly make the preset list cluttered and confusing.

Until Elegant Themes improves this, management remains the user's responsibility. A proven strategy is to add a custom suffix (e.g., xy-) to your own presets. This makes them easier to identify and protect during database cleanups by yourself (e.g., when deleting legacy data from the wp_options table).

Conclusion: The Designer Wins

In my opinion—despite the weaknesses in Divi 5's preset management—Krafter PRO is the more understandable, faster, and ultimately better choice for designers who want to understand and apply a modern web design workflow, whether they are beginners or advanced pros.


Frank Schlatter

Hi Pius Illa.

Your answer perfectly complements my article. It seems that Sitekreafter is stagnating and being overtaken by KrafterPro and its development in terms of features and the ease of custom extensibility (custom variables and presets). Personally, I'm more drawn to the class architecture due to my developer experience. However, the preset system is more open to use than a class system, which is dependent on API access and the API provider – although this is where things get a bit speculative. I use both systems simultaneously, but I find myself using variables and presets far more often. Aside from the current issues with the class system, which I can resolve myself when I have the time and inclination. If both models continue to be developed in the same way, then it's as you describe in your answer/article. Thank you for your reply.