Skip to main content

How to Build Reusable Components in Divi 5 (Design System Workflow)

In this video, I show you how to create reusable components in Divi 5 using a proper design system workflow with Krafter. Instead of manually fixing spacing, colours, and responsiveness on every page, you’ll learn how to build components that stay perfectly consistent across all screen sizes.

This method uses:

- Fluid spacing scales

- Token-based colour systems

- Reusable components

If you want your Divi websites to look professional, scalable, and easy to maintain, this is the exact system I use on real projects.

Prahla'd

Issue when reproducing it:

Hi Mak. Thanks for showing all the tricks :) i have though an issue when choosing autogrid for the row...column.

No matter how i do it, it doesn't show up with 3 groups on a single line, like on the video (9,39) but only 2.... The 3 Groups are on the same line only when i select Column row wich spread all the width of the page...

Meaning, there’s no difference between Content row and wide content row,,,,,,

I am using divi beta5 and Krafter 1.9.... Can you help me with that? 👍