Masz już Global Colors. Masz typografię globalną. Masz nagłówek i stopkę w Theme Builderze. Projekt wygląda spójnie zanim zbudowałeś choćby jedną właściwą stronę.
Teraz przychodzi moment który sprawia że dalsze budowanie jest coraz szybsze zamiast coraz wolniejsze.
To jest Design System.
Co już wiesz, czego jeszcze nie wiesz
Jeśli przeszedłeś przez poprzednie kroki tego bloku, to już pracujesz z częścią Design Systemu — być może nawet o tym nie wiedząc.
Design Variables które tworzyłeś dla kolorów i typografii? To jest pierwsza warstwa Design Systemu. Kolory brandu jako zmienne zamiast ręcznie wpisanych hexów to nie tylko wygoda — to fundament systemu który będzie teraz rósł razem z projektem.
Brakuje jeszcze dwóch warstw: Presetów i Option Group Presetów. I właśnie tu system przestaje być tylko schludny — zaczyna naprawdę pracować.
Trzy warstwy, jedna logika
Design System w Divi 5 to trzy poziomy które współpracują ze sobą:
Design Variables przechowują wartości. Kolory, fonty, liczby, tekst. Zmieniasz zmienną — zmiana pojawia się wszędzie gdzie ta zmienna jest używana. To już znasz.
Element Presets przechowują gotowy wygląd całego elementu. Budujesz raz jak ma wyglądać Primary Button — i potem używasz tego presetu wszędzie gdzie potrzebujesz takiego przycisku. Zmiana presetu aktualizuje wszystkie przyciski w serwisie.
Option Group Presets przechowują powtarzalne grupy stylów — border, shadow, spacing, typografię — które możesz stosować w różnych typach elementów. Karta usługi i sekcja testimonial to różne elementy, ale mogą współdzielić ten sam styl obramowania albo ten sam wewnętrzny spacing.
Razem tworzą system gdzie decyzje projektowe są podejmowane raz i obowiązują wszędzie.
Dlaczego to ma znaczenie właśnie teraz
Moment kiedy zaczynasz budować właściwe strony to najlepszy czas na zdefiniowanie podstawowych presetów. Nie dlatego że musisz — możesz budować strony bez presetów i wszystko zadziała. Ale każda strona którą budujesz bez presetów to strona pełna ręcznych decyzji które potem trudno zsynchronizować.
Kiedy budujesz pierwszy przycisk CTA na stronie głównej — to jest właściwy moment żeby zapisać go jako preset, a nie tylko ustawić raz i zapomnieć. Następny przycisk na stronie usług będzie już gotowy w dwie sekundy. I będzie identyczny.
Kiedy budujesz pierwszą kartę z usługą — zapisujesz ją jako preset. Druga, trzecia, dziesiąta karta będzie spójna bez żadnego wysiłku.
To jest ta magia o której mówi każdy kto pracuje z Divi 5 przez dłuższy czas: projekt który jest dobrze zbudowany systemowo staje się coraz łatwiejszy w miarę jak rośnie, zamiast coraz trudniejszy.
Gdzie zacząć
Nie musisz definiować kompletnego systemu przed pierwszą stroną. Wystarczy kilka podstawowych presetów które pokryją 80% powtarzalnych elementów w typowym projekcie:
- Primary Button — główne wezwanie do działania,
- Secondary Button lub Ghost Button — drugorzędne akcje,
- Feature Card — karta z ikoną, tytułem i opisem,
- Section Standard — standardowa sekcja z wewnętrznym spacingiem,
- Heading Style — styl nagłówka sekcji jeśli różni się od globalnego H2.
Resztę budujesz w trakcie — kiedy widzisz że tworzysz coś po raz drugi, to sygnał żeby zapisać to jako preset.
Jak to wszystko spina się w całość
W tym momencie projekt ma wszystkie fundamenty:
- kolory brandu w Design Variables,
- typografia globalna obowiązująca w całym serwisie,
- nagłówek i stopka w Theme Builderze,
- pierwsze presety gotowe do użycia.
Kiedy teraz otwierasz builder na stronie głównej, na stronie usług, na stronie kontakt — pracujesz na systemie. Przyciski mają swój preset. Kolory są zmiennymi. Nagłówek jest gotowy. Typografia trzyma się sama.
Możesz skupić się na tym co naprawdę wymaga uwagi: na treści, układzie i tym żeby strona dobrze opowiadała historię firmy. Nie na pilnowaniu czy ten przycisk ma ten sam odcień co poprzedni.
Jeśli chcesz wejść głębiej w każdą z tych warstw — Variables, Presets i Option Group Presets — mamy dla nich osobny, szczegółowy artykuł: Divi 5 Design System po ludzku: Variables, Presets, Option Groups — po co to komu w realnym projekcie.