I have previously purchased the Divi 5 Mastery ll Course. Is this new "Divi 5 Design System" a completely new course which requires a new purchase?

Mak, you do an outstanding job of managing this community and putting out excellent resources and content. One thing that could be better is your product naming. It gets very confusing at time differentiating what is a new course/plugin and what is an old one.

Please check your email for the download file.

Please let us know when we can download krafter Pro I bought this a while agao and not been able to use this sice i purchased it. I really need to use it on a big project so please tell us whne we can download and use.

In this video, I show you how to get started with the Divi Design System. Get the offer here!

If you already purchased the Divi Design System, I've just sent an email with a link to download the design system. Please check your inbox.

I am excited about this new course, but have a few questions. Can anyone please answer these before the end of the "Early Bird" 30% off ends?

1. Has anyone actually watched or reviewed this the NEW "Divi Design Workflow" and what do you think about it?

2. Is the NEW "Divi Design Workflow" system based on Krafter Pro, or is the design built from the ground up covered completely in the video?

3. I purchased the "Divi 5 Mastery II" a while back and it proved beneficial. Does the NEW "Divi Design Workflow" cover anything new that is not covered in my previous course and go well beyond "Divi 5 Mastery II"?

This new course does sound promising, however, does anyone recommend whether I should purchase this in addition to my "Divi 5 Mastery II" (which I'm still waiting on new modules for). Thanks in advance.

Over the past few weeks I've noticed something.

Most people are using Divi 5 exactly like they used Divi 4.

And that's a problem.

In Divi 4, it was normal to:

• Set font sizes manually
• Adjust spacing manually
• Pick colors manually
• Build sections one by one

But Divi 5 wasn't designed for that workflow.

Divi 5 was built around Variables, Presets and Design Systems.

Watch the video here!

If you're still designing everything manually, you'll eventually run into the same problem:

Your website becomes harder to maintain, slower to build, and inconsistent across pages.

I know because that's exactly what happened to me.

When Divi 5 launched, I was excited.

Then I realised my entire workflow needed to change.

So for the last 3 weeks I've been rebuilding it from scratch.

The result is the Divi 5 Design System.

Instead of deciding what size a heading should be every time...

• You select H1.

Instead of wondering what spacing value to use...

• You select Medium.

Instead of rebuilding layouts over and over...

You use predefined presets.

• Everything becomes faster.

• Everything becomes consistent.

• Everything stays responsive.

Tomorrow I'm opening access.

For the first 48 hours:

$47 Lifetime Access

Get 30% OFF Early Bird Price

After that it moves to an annual subscription.

You'll also receive:

✓ Divi 5 Workflow Course ($67 Value)

✓ Private Community

✓ Style Guide Template

✓ Future Design System Updates

✓ Free access to upcoming Pro Modules

If you've been struggling to find a workflow that actually makes sense in Divi 5, this was built for you.

*** KrafterPRO Members Get This Design System For FREE!

More details tomorrow.

Mak

Today I finished rebuilding 10 more Divi 5 modules using the new design system, and honestly, the difference is huge.

What looks like a small visual change on the surface is actually solving one of the biggest problems in Divi 5: consistency.

✅ Responsive typography
✅ Responsive icons
✅ Dark mode support
✅ Adaptive forms
✅ Better spacing
✅ Consistent styling across modules
✅ Faster website builds

The biggest lesson I've learned over the last two weeks is this:

You can build a website in Divi 5 without a design system... but you'll spend countless hours adjusting fonts, spacing, sizing, colours, and module settings over and over again.

A design system removes that repetitive work and keeps everything looking professional from desktop all the way down to mobile.

I've rebuilt everything from the ground up because several Divi updates changed how parts of the old system worked. It has been a lot more work than I expected, but the results are worth it.

Tomorrow I'll be sending a pre-launch discount code exclusively to Divi University members.

If you're not a member yet, now is the time to join (it's completely free).

Question for you:

👉 Which Divi module do you spend the most time styling manually?

Let me know in the comments. I'm curious to see where everyone is losing the most time.

Today was a big milestone.

I've now completed 5 modules for the Divi 5 Design System:

✅ Blurb

✅ Bar Counter

✅ Call To Action

✅ Countdown Timer

✅ Button Updates

What's exciting isn't just how they look. It's how much time they save. One of the things I've been demonstrating today is the difference between designing a module manually versus applying a design system preset.

Without a design system, you're constantly adjusting:

• Typography

• Spacing

• Colours

• Responsive sizing

• Alignment Over and over again.

With the design system, it's often just a single click. The goal isn't to make websites look pretty. The goal is to make website building faster, more consistent, and more professional.

I've also been working through a few Divi 5 quirks and preset issues, so there's been plenty of testing happening behind the scenes. For those of you following this journey, thank you for all the support and feedback so far.

Now it's time to keep building...

I've still got a lot of modules left to redesign before launch 😅

See you tomorrow for the next update.

In today’s update, I want to walk you through the latest improvements made to the design system. A lot of this came directly from feedback, especially around how headings should work inside Divi 5.

The goal is simple: make the system more logical, easier to use, and much faster when building professional websites.

1. Text and Headings Have Been Reworked

One of the biggest changes is how text and headings are now handled.

Previously, the heading styles worked well visually, but after feedback, it made more sense to connect the H1 to H6 structure directly with the correct heading elements. This makes the system cleaner from a semantic point of view and also easier to understand when building real websites.

Now, when you select a text module, you can quickly assign different text sizes directly from the text properties.

These include:

• Extra small text
• Small text
• Normal body text
• Large body text

This makes it much easier to keep your typography consistent across the whole website without manually adjusting font sizes every time.

2. More Useful Text Presets

The system now also includes more specialised text presets for common website elements.

These include:

• Eyebrow text
• Labels
• Badges
• Inverse badges
• Success labels
• Warning labels
• Error labels

This is useful when designing things like feature sections, pricing tables, alerts, cards, dashboard areas, and callout sections.

Instead of manually styling these small text elements every time, you can now apply a preset and get a consistent result instantly.

3. Heading and Display Presets

The heading system has also been cleaned up.

Inside the heading text settings, you now have responsive presets for:

• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6

There are also display styles for larger hero-style typography:

• Display Large
• Display Medium
• Display Small

These are designed to look good immediately across desktop, tablet, and mobile. The idea is that you should not have to keep fixing typography at every breakpoint. The system should do most of the heavy lifting for you.

4. Responsive Section Padding

Another important part of the update is section padding.

The design system now includes standardised section padding presets, ranging from extra small to large.

This removes one of the most annoying parts of responsive design: manually setting different padding values for desktop, tablet, and mobile.

Instead of guessing pixel values or changing em sizes for every screen size, the spacing automatically scales down as the screen gets smaller.

That means your sections stay consistent, balanced, and responsive without you constantly adjusting every breakpoint manually.

5. Structured Content Widths

A common mistake in web design is allowing text to stretch too wide across the page. When paragraphs become too wide, they become harder to read and the design starts to feel unprofessional.

To fix this, the system now includes specific width utilities.

Text Width

This is designed for normal body text. It keeps paragraphs at a comfortable reading width so the content feels easier to read.

Wide Text Width

This gives you a slightly wider text area. It works well for secondary headlines, intro text, or paragraphs that need a little more space.

Content Width

This is designed for normal layout content, especially things like multi-column blurbs, cards, and general website sections.

Text Width Large

This is useful for wider content areas, dashboards, or layouts where you need to display more information while still keeping the content controlled.

Full Width

This forces an element to go completely edge-to-edge. This is useful for full-bleed images, background sections, large visuals, and more dramatic layout effects.

These width utilities help make sure your designs feel intentional instead of random.

6. Semantic Background Colours

To make section building faster, the system now includes global background presets.

These allow you to quickly create visual separation between sections without manually choosing colours every time.

The current background options include:

• Muted
• Inverse
• Primary
• Secondary
• Subtle

This is especially helpful when you have multiple sections stacked together and need to create contrast between them.

Instead of guessing which background colour to use, you can apply one of the presets and keep everything aligned with the overall design system.

7. Gap Scale and Auto Grid System

The final major improvement is around spacing and grid layouts.

The design system now includes a more structured gap scale. This helps control the spacing between items inside groups, rows, and grid layouts.

You can clear default gaps and apply consistent responsive spacing such as:

• Extra small
• Small
• Medium

This gives you much more control over layouts without relying on random margin values.

8. Auto Grid Layouts

The Auto Grid system is one of the most powerful parts of this update.

At the row level, you can turn on Auto Grid and instantly create responsive multi-column layouts.

This is especially useful for:

• Feature grids
• Service sections
• Card layouts
• Blog grids
• Pricing tables
• Icon box layouts
• Product feature sections

Once Auto Grid is enabled, you can then control the gap between the grid items using the global spacing presets.

This keeps everything aligned, responsive, and consistent across different screen sizes.

Why This Matters

The main goal of this design system is to remove the guesswork from building websites in Divi 5.

Instead of manually styling every heading, paragraph, section, background, width, and grid, you now have a structured system that helps you build faster and more consistently.

This means:

• Better typography
• Cleaner spacing
• More readable layouts
• Faster responsive design
• More consistent sections
• Less manual tweaking
• A more professional workflow

This update brings the system closer to how professional UI designers think when building websites.

It is not just about making things look good. It is about creating a repeatable workflow that helps you build better websites faster.

So, does the Divi 5 Mastery II course replace the original Divi Mastery course I purchased? The Divi Mastery course is gone from my