The Missing Piece in Most Divi 5 Workflows!
Most Divi users spend hours adjusting margins and padding… But the layout still feels slightly off. Spacing looks inconsistent.
Sections feel cramped or too loose. Mobile layouts break. The reason is simple. Most designers are guessing spacing values.
In this tutorial I show you:
• Why the default Divi spacing scale is not production ready
• How professional designers control spacing
• Why guessing margins leads to inconsistent layouts
• How a fluid spacing scale fixes responsiveness
• How I apply spacing using the KrafterPRO design system
Once you start designing with a spacing system, everything changes.
Layouts become cleaner. Design becomes faster. And your websites finally start looking professional.
If you’re serious about designing professional websites with Divi 5, a design system is essential.
KrafterPRO was built specifically for that workflow.
It gives you a complete spacing, typography, color, and preset system for Divi 5.
👉 Learn more about KrafterPRO
https://diviuniversity.com/krafterpro
Hi Mak, any chance I can get a response on my support ticket or email?
Okay, I tried following the first half of the tutorial using one of your pages that I believe is included in the KrafterPRO package.
The backend of the layout seems to mirror what you described in your tutorial; however, the front end does not look the same. Even the border radius is missing.
The tutorials you provide about the KrafterPRO system are a great idea, but it would be helpful to post a demo page for us to download and import so we can follow along and ensure we're doing it correctly.
I think the KrafterPRO system is great idea, but I'm still trying to wrap my head around using some of the more advanced settings. So I appreciate you providing tutorials using it. I want to use KrafterPRO on my next client project, but need to make sure I’m using it correctly.
Bakari Hi, fellow member here. I see that on the left in your screen capture, the view is tablet and on the right it's desktop. Is it possible that you applied the radius to the image in tablet, but not in desktop?
I believe, just like Divi4, that the styles flow downward, meaning that if you set a style while at desktop, it will remain in effect on tablet and phone. But, if you start in tablet, you're essentially letting desktop at default.
I'd suggest re-editing your sample page, be sure to start in desktop view click on the image and notice what the Design/Border/Border Radius settings are, then change the view to tablet and see if the small radius shows up. That would prove that you applied the styling only starting at tablet.
Jim Kemble, thanks for replying. The page on the left was not in tablet
view. It was in split view with the video tutorial on the right. It was
definitely in desktop view.
Here's a screenshot of the page in the Builder in desktop view
followed by Preview View. What is most weird is that border radius
disappears on the front end (no screenshot of that). I tried clearing
cache, but that didn't help. I'll keep messing around with it when I
have time. Thanks for your help, though.