Stop Expecting Perfection: The Truth About a Divi 5 Design Systems
What a Design System Can and Cannot Do
A design system is not a silver bullet. It won’t magically save you from the constant influx of updates and feature expansions rolling out from Elegant Themes in Divi 5. As I have mentioned in several of my previous articles, it is an ongoing race between Elegant Themes and third-party tool developers. Often, as creators, we find ourselves chasing the core software publisher. Other times, we come up with ideas that don't exist in the core software yet and develop tools to make life easier. None of this changes the reality of the situation. If you are interested in the backstory, you can look back through my older posts to see exactly what went down on the road to KrafterPRO.
The Reality of Presets and Variables
Elegant Themes mentioned early on that we should use strict naming conventions for custom presets created within Divi 5. The same goes for variables. In my opinion, Elegant didn't communicate this clearly enough, but that doesn't absolve us of our personal responsibility as web designers and creators.
The same applies to dealing with different versions of variables and presets. If you create new presets under the same name—or even if you change the names entirely—it does not mean that importing these new presets won't alter your existing website. Elegant Themes dictates how variables and presets behave, and they will continue to refine this system.
In Divi 5, the name of a preset doesn't mean much; the internal ID is what actually matters. If these IDs didn't exist, the chaos would be even worse. In theory, if you adjust an existing preset (retaining the same ID) to align with new Divi 5 updates, and then distribute this updated preset as a JSON file within a design system, you reap a huge benefit: you won’t have to manually reassign the updated presets across the dozens of sections on your live website.
That sounds great in theory. In practice, however, things often look different. New settings in updated presets frequently disrupt the visual layout of your live site. Suddenly, your hard-earned consistency goes right out the window. This is simply due to the rapid evolution of Divi 5. If a design system doesn't evolve alongside it, it quickly becomes obsolete.
Reinstall vs. Merge: The KrafterPRO Dilemma
So, what is the solution? Someone was actually thinking ahead. In the past, we needed a dedicated tool—the KrafterPRO plugin for WordPress. Its "Merge" function was designed to fix this exact issue, even when you end up with a massive backlog of identical or overlapping presets after installing multiple design system updates.
Early on, I had the idea to introduce strict versioning, but unfortunately, that specific feature didn't make it into the final plugin—though plenty of other great tools did. Then again, versioning might not even be the magic solution today. The truth is, there will probably never be an easy fix for backward compatibility in WordPress, especially for third-party developers. But that is a whole different topic.
So what should you do now? Use the Reinstall or the Merge function in the KrafterPRO plugin? That is the ultimate question. Both have their advantages. But no matter which route you take, you will always have to review and touch up your website. Is that true consistency? Yes, it is—even if it doesn't always look perfectly consistent along the way.
Best Practices for Your Workflow
The solution that Elegant Themes, Mak, and I have all highlighted before is this:
- Export and Save: Once a project is finalized and complete, export all variables, presets, and assets. Keep this file safe so you can re-import it whenever you need to do maintenance on that specific, working version of the website.
- Back Up Constantly: Do this in addition to regular full-site backups!
- Freeze Updates Mid-Project: Do not switch to a new design system version in the middle of building a website unless you are fully prepared to go back and fix broken layouts. The larger the project and the closer the deadline, the more critical this rule becomes.
Is this setup satisfying? Yes and no—for me, it’s honestly a bit more on the "no" side. However, it helps immensely to hold back on updates (excluding core Divi 5 updates, though I always run a full backup before those, too).
Is It Better to Skip Design Systems Entirely?
For me, the answer is a definitive no. While I now have the knowledge and capability to build my own custom design system tailored exactly to my needs, I am still incredibly impressed by what Mak has built. Many others who were highly active during the Divi 4 era have thrown in the towel. Mak didn't, and I deeply appreciate his foresight.
I have learned to manage and work around these quirks. In fact, I now use a highly hybrid workflow. Thanks to my strict naming conventions, my custom elements and the design system tools never get in each other's way.
Conclusion
With this overview, I hope I can relieve some of the anxiety, frustration, or disappointment you might be feeling. I want to show that by learning, gaining knowledge, and taking action, you can make small adjustments to harness the massive advantages of a design system. Just remember: it is not a "Silver Bullet" (or an Eierlegende-Wollmilchsau, as we say in German) that will effortlessly solve all of your problems, whether they stem from Divi 5 or from your own workflow.
Thanks for taking the time to think this through Frank, i've been wrestling with this today too, and had to conclude, new builds or anything not too far along, reset and go for krafterpro v3.0 but the existing bigger builds that are working on v2.1.8, i physically dont have the hours available to reset them all and start again (not to mention the disruption to the client)
My main question is do we know the presets / modules that mak has said stopped working with the latest divi updates and original krafterpro? knowing which ones and only importing those could make working on exisitng sites more bearable?
The question is put a bit too simply. The KrafterPRO plugin doesn't care which JSON file containing presets (in the correct format for the plugin) is being imported. The plugin cannot distinguish whether a preset will fully work with an Elegant Themes updated version of Divi 5. How could it? Elegant Themes never introduced version management for presets or variables, and I don't think it was ever intended. Furthermore, Elegant Themes is developing Divi 5 at an enormous pace, which isn't inherently a bad thing.
Take fonts as an example: depending on the selected Google Font, Divi 5 offers different setting options. Because these options vary depending on the font, it makes it difficult—even without KrafterPRO—to create a preset that applies settings globally for all fonts. Whether a preset can still be used can only be determined through your own testing. So, if you want to save many settings in a preset for a specific font in the future, you have to create a preset for exactly that font, which wasn't necessary before. This is just one example of how changes in Divi 5 can affect presets, though they don't always have to. Neither the KrafterPRO plugin nor the KrafterPRO design system is to blame for this. This is why Mak constantly revises the presets and adapts them to new features in the Divi 5 interface. However, because there is no preset versioning and you shouldn't simply assign new IDs to presets—consistency is the keyword here—it is what it is. Divi 5 will never be the perfect, ultimate tool in every aspect, just as no third-party tool can ever be adapted for everyone and everything.
Therefore, as users, we have to live with this. However, with a bit of personal responsibility and planning, we can counteract the chaos that some people seem to experience. A few basic rules help:
- Regular backups.
- Never replace presets in a live, running project.
- If you absolutely must do it anyway, duplicate your WordPress environment and thoroughly test the update in that staging area first.
- Regularly export the variables and presets belonging to a project, and make sure to do this especially at the end of the project.
- Use the protocols provided by Mak in the KrafterPRO plugin for project handovers. This way, you always know exactly what you used in a project and can restore it later.
- Secure a completed project via backup so that you can restore exactly that environment later if needed.
Important: Even without the KrafterPRO design system, it is advisable to develop a workflow like this (or a similar/own version) that allows you to restore everything at any given time. Once again: it is not the fault of the KrafterPRO design system that Divi is the way it is, and we all have to learn a lot to find a good and suitable path for ourselves.
For me, a design system is a clear and effective means to create consistent and fluid websites. It saves an enormous amount of time, even if a problem occurs here and there, or if something might not work as it did before after a Divi 5 update. For the most part, KrafterPRO presets are no different to me than presets I could have created without KrafterPRO. Despite everything, I don't want to recreate presets for every single project or small site and adapt them to Divi 5 changes. Often, waiting a bit helps, as Mak will eventually revise the design system.
However, without maintaining multiple parallel WordPress / Divi 5 installations, surprises can happen from time to time. Even if it seems tedious to maintain parallel staging environments, it is always better in the end and leads to faster development. Divi 5 is different from anything before it. Anyone who thinks they can or should develop everything just like in Divi 4 will eventually hit a massive wall—whether in terms of time or keeping track of things, depending on how fast the project grows.
I'm grateful for the things I've learned using KrafterPro, specifically the structure of a Divi design system, but having gone back and studied the tutorials on the Elegant Themes site, I'm more inclined to build my own. My needs are simple and I'm not a professional. The changes are coming fast from ET and it seems safer to avoid dependence on a third party. I tried the hybrid approach and got a Käse Milch Hähnchen or something. But that's just me -- I look forward to seeing what Mak can develop going forward, and remain open to changing my mind.
jason Interspersed amongst their blog posts are a numbered sequence of lessons. Almost all of the blog posts are worth attention, actually.
The first tutorial one is here:
Dirk 🙏
Thank you for this resource. I hadn’t seen this recent post. It’s brilliant to be able to transcribe it into .md format so I can include it in my future projects using Claude Cowork + Divi5 + KraterPro!