Jeśli znasz stare Divi, to nowe słowa w Divi 5 mogą brzmieć jak zbędna komplikacja. Variables, Presets, Option Group Presets — wszystko to wygląda trochę jak język systemu projektowego dla dużych zespołów, a nie dla osoby, która po prostu chce zbudować stronę.
Problem w tym, że właśnie tutaj kryje się jedna z największych zmian w workflow Divi 5.
Bo Divi 5 nie zachęca już do ustawiania wszystkiego ręcznie moduł po module. Zachęca do budowania strony jak systemu. Elegant Themes wprost opisuje Design Variables, Element Presets i Option Group Presets jako warstwy jednego design workflow, w którym wartości, grupy stylów i gotowe komponenty współpracują ze sobą zamiast żyć osobno.
To brzmi technicznie, ale w praktyce chodzi o bardzo prostą rzecz:
przestać projektować przez przypadek.
Dlaczego stare podejście w Divi szybko robi bałagan
W starym modelu pracy z builderem bardzo łatwo było dojść do punktu, w którym strona wygląda dobrze na końcu projektu, ale jest kompletnym chaosem w środku.
Znasz ten scenariusz:
-
jeden przycisk ma 18 px paddingu, drugi 20 px,
-
trzy sekcje mają prawie ten sam odstęp, ale każda trochę inny,
-
karta w jednej części strony ma zaokrąglenie 12 px, w drugiej 10 px,
-
font nagłówka jest podobny wszędzie, ale jednak nie identyczny,
-
a gdy klient prosi o zmianę koloru akcentu, zaczyna się polowanie po całym serwisie.
To nie jest problem tylko Divi. To jest problem każdego narzędzia, w którym zbyt łatwo można ustawiać wszystko ręcznie.
I właśnie dlatego Divi 5 próbuje przesunąć użytkownika z trybu:
„ustawiam każdy element osobno”
do trybu:
„definiuję system, a potem składam z niego stronę”.
Czym właściwie jest design system w Divi 5
Po ludzku: design system w Divi 5 to sposób pracy, w którym nie zapisujesz wyglądu strony wyłącznie w pojedynczych modułach, ale w zestawie reguł i powtarzalnych wzorców.
Najprościej można to rozbić na trzy poziomy:
-
Variables przechowują wartości
-
Option Group Presets przechowują powtarzalne grupy stylów
-
Element Presets przechowują gotowy styl całego elementu
Elegant Themes opisuje ten układ bardzo podobnie: Design Variables dostarczają wartości, Element Presets kontrolują wygląd konkretnego elementu, a Option Group Presets pozwalają przenosić określone grupy ustawień między różnymi elementami.
Nie chodzi więc o to, żeby od razu robić z każdej strony wielki korporacyjny system projektowy. Chodzi o to, żeby przestać budować layout z przypadkowych decyzji, które potem trudno utrzymać.
Variables — czyli wartości, które chcesz kontrolować centralnie
W interfejsie Divi 5 te elementy są nazywane Design Variables, a w dokumentacji Elegant Themes często też po prostu Global Variables. To globalne wartości, które definiujesz raz i wykorzystujesz w wielu miejscach w całym serwisie. Mogą przechowywać kolory, fonty, liczby, obrazy, linki i tekst, a po zmianie jednej zmiennej aktualizują się wszystkie miejsca, które z niej korzystają.
To bardzo ważne, bo właśnie tutaj zaczyna się prawdziwa oszczędność czasu.
W realnym projekcie Variables mogą przechowywać na przykład:
-
kolor główny marki,
-
kolor akcentu,
-
font nagłówków,
-
font body,
-
podstawowy spacing między sekcjami,
-
promień zaokrąglenia kart,
-
szerokość kontenera,
-
numer telefonu,
-
adres,
-
link do głównego CTA.
I teraz najważniejsze:
zamiast wpisywać te wartości ręcznie w 20 różnych miejscach, przypisujesz elementy do jednej wspólnej wartości systemowej.
Jeśli potem zmieniasz np. kolor główny albo bazowy spacing, nie poprawiasz połowy serwisu ręcznie. Zmieniasz jedną zmienną.
To właśnie dlatego ET nazywa Variables „kręgosłupem” design systemu w Divi 5 i pokazuje workflow, w którym najpierw definiujesz wartości, a dopiero potem budujesz z nich presety i strony.
Najprościej można to ująć tak:
Variables nie mówią, jak coś ma wyglądać. Mówią, jaką wartość ma przyjąć dana decyzja projektowa.
Presets — czyli gotowe style dla konkretnych elementów
Druga warstwa to Element Presets.
Tutaj nie zapisujesz już pojedynczej wartości, tylko gotowy wygląd konkretnego elementu. Elegant Themes opisuje Element Presets jako możliwość zapisania designu modułu, sekcji, wiersza albo kolumny jako gotowego presetu, który można potem stosować ponownie wszędzie tam, gdzie używasz tego typu elementu. Zmiana takiego presetu może aktualizować wszystkie miejsca, które z niego korzystają.
To jest ogromna różnica względem pracy „na czuja”.
Bo zamiast:
-
budować każdy button od zera,
-
poprawiać każdy box osobno,
-
i od nowa stylować sekcję CTA w każdym miejscu,
możesz stworzyć własne wzorce, na przykład:
-
Primary Button
-
Ghost Button
-
Secondary CTA
-
Feature Card
-
Testimonial Card
-
FAQ Item
-
Hero Section
-
Content Section Narrow
Wtedy pracujesz już nie na pojedynczych ustawieniach, tylko na gotowych komponentach.
To bardzo przyspiesza pracę, ale jeszcze ważniejsze jest co innego:
zwiększa spójność.
Jeśli pięć różnych przycisków korzysta z jednego presetu, to nie rozjadą się po miesiącu przez serię drobnych ręcznych zmian.
Presety odpowiadają więc na pytanie:
jak ma wyglądać ten element jako całość?
Option Group Presets — najbardziej niedoceniona część systemu
To jest chyba najtrudniejsza warstwa do zrozumienia na początku, ale też jedna z najcenniejszych.
Element Preset zapisuje wygląd całego elementu.
Option Group Preset działa inaczej.
Elegant Themes wyjaśnia, że Option Group Presets nie są przypisane do jednego modułu, tylko do konkretnych grup ustawień, takich jak Typography, Border, Box Shadow, Background, Spacing, Filters, Button i podobne. Dzięki temu możesz stosować jedną grupę stylów w różnych typach elementów.
I to jest właśnie genialne.
Bo w realnym projekcie bardzo często nie chcesz powtarzać całego elementu, tylko pewną część jego zachowania wizualnego.
Przykład:
masz na stronie:
-
kartę feature,
-
box CTA,
-
accordion,
-
formularz,
-
sekcję z ikonami.
To nie są te same elementy.
Nie potrzebują tego samego pełnego presetu.
Ale mogą współdzielić:
-
ten sam border radius,
-
ten sam styl cienia,
-
ten sam sposób budowy nagłówka,
-
ten sam styl buttona,
-
ten sam spacing wewnętrzny.
I właśnie wtedy wchodzą Option Group Presets.
Zamiast kopiować cały styl modułu, możesz powiedzieć:
-
ten border style jest naszym standardem,
-
ten styl buttonów jest naszym standardem,
-
ten typ typografii nagłówków jest naszym standardem.
To jest bardzo systemowe i bardzo praktyczne.
Najkrócej:
Option Group Preset nie mówi, czym jest element. Mówi, jak ma wyglądać konkretna część jego stylu.
Jak to wszystko działa razem
To najważniejsze pytanie, bo właśnie tutaj wiele osób się gubi.
Najprostszy model myślenia wygląda tak:
-
Variables = wartości
-
Option Group Presets = powtarzalne grupy stylów
-
Element Presets = gotowe komponenty
Elegant Themes pokazuje dokładnie taki warstwowy workflow: najpierw definiujesz wartości w Variable Managerze, potem używasz ich przy budowie Option Group Presets i Element Presets, a na końcu budujesz strony z gotowych reguł zamiast statycznych, ręcznie wpisanych ustawień.
Dobry przykład:
Button
-
kolor brandowy = Variable
-
styl buttona = Option Group Preset
-
cały Primary CTA Button = Element Preset
Card
-
spacing skali = Variable
-
border i shadow = Option Group Preset
-
cały Feature Card = Element Preset
Typografia
-
font nagłówków = Variable
-
styl grupy Typography = Option Group Preset
-
konkretny moduł z gotowym nagłówkiem = Element Preset
I właśnie wtedy Divi 5 zaczyna mieć sens.
Bo nagle przestajesz patrzeć na builder jak na miejsce do ręcznego ustawiania wszystkiego od nowa. Zaczynasz patrzeć na niego jak na narzędzie do zarządzania regułami projektu.
Po co to komu w realnym projekcie
To jest moment, w którym trzeba odłożyć teorię i odpowiedzieć po prostu:
co z tego mam, jeśli buduję normalną stronę dla klienta albo własny serwis?
1. Szybsze zmiany
Jeśli kolor akcentu, font albo spacing są zdefiniowane jako Variables, nie musisz przeklikiwać całej strony po każdej korekcie.
To oszczędza bardzo dużo czasu.
2. Mniej chaosu
Strona przestaje być zbiorem prawie takich samych ustawień. Zamiast 12 wersji tego samego buttona masz 2 albo 3 sensowne warianty.
3. Lepsza spójność
To bardzo ważne, zwłaszcza przy większych projektach. Jeśli budujesz stronę etapami, to system bardziej pilnuje estetyki niż pamięć i dobra wola wykonawcy.
4. Łatwiejsza skalowalność
Dokładasz nowe sekcje bez wymyślania stylu od zera. To szczególnie ważne przy:
-
landingach,
-
stronach usługowych,
-
sklepach,
-
hubach contentowych,
-
i projektach rozwijanych miesiącami.
5. Łatwiejszy handoff
Jeśli przy projekcie pracuje więcej niż jedna osoba, system jest po prostu czytelniejszy niż ręczne wyjątki porozrzucane po modułach.
6. Lepsze adaptowanie gotowych layoutów
ET pokazało też workflow z Divi 5 Inspectorem, w którym imported layouts można łatwiej podciągać pod własne Variables i Presets zamiast przebudowywać wszystko od zera. To bardzo ciekawa rzecz dla osób, które pracują na gotowych układach, ale chcą je szybko „przetłumaczyć” na własny system projektowy.
Gdzie ludzie najczęściej robią błąd
Najczęstszy błąd nie polega na tym, że ktoś nie zna nowych funkcji.
Najczęstszy błąd polega na tym, że ktoś używa nowych funkcji po staremu.
Czyli:
-
ma Variables, ale nadal wpisuje większość wartości ręcznie,
-
ma Presets, ale używa ich nieregularnie,
-
robi Option Group Presets bez żadnego planu,
-
albo miesza wszystkie warstwy bez jasnego podziału.
Wtedy Divi 5 nie staje się systemem. Staje się po prostu bardziej rozbudowanym panelem ustawień.
A to nie o to chodzi.
Najuczciwsze zdanie, jakie można tu postawić, brzmi chyba tak:
Divi 5 nie daje sensu systemowego automatycznie. Ono tylko wreszcie daje narzędzia, żeby taki sens zbudować.
Jak wejść w ten workflow bez przesady
Dobra wiadomość jest taka, że nie musisz od razu projektować całego systemu na poziomie korporacyjnego design ops.
Da się wejść w ten model bardzo spokojnie.
Najprostsza ścieżka wygląda tak:
Krok 1
Na początek zdefiniuj tylko podstawowe Variables:
-
główne kolory,
-
font nagłówków,
-
font body,
-
3–4 poziomy spacingu,
-
podstawowy border radius.
Krok 2
Zrób 2–3 najważniejsze Element Presets:
-
primary button,
-
card,
-
hero section albo content block.
Krok 3
Z czasem wyciągnij wspólne fragmenty do Option Group Presets:
-
border style,
-
typography headings,
-
button style,
-
spacing group.
Krok 4
Dopiero potem rozbudowuj system.
To naprawdę wystarczy, żeby poczuć różnicę.
Nie chodzi o to, żeby od razu zbudować perfekcyjny framework. Chodzi o to, żeby przestać ręcznie przepisywać te same decyzje projektowe w nieskończoność.
Najważniejsze w 30 sekund
Divi 5 zmienia sposób pracy z builderem. Variables pozwalają zarządzać wartościami globalnie, Element Presetszapisują pełny styl konkretnego elementu, a Option Group Presets pozwalają przenosić konkretne grupy stylów między różnymi modułami. W praktyce chodzi o to, żeby przestać ustawiać wszystko ręcznie i zacząć budować stronę jak system.
Podsumowanie
Największa zmiana w Divi 5 nie polega na tym, że builder ma nowe funkcje.
Polega na tym, że wreszcie da się w nim myśleć jak projektant systemu, a nie tylko operator modułów.
Jeśli pracowałeś wcześniej w starym Divi, to nowe pojęcia mogą początkowo wyglądać jak nadmiar teorii. Ale kiedy spojrzysz na nie przez pryzmat prawdziwego projektu, wszystko zaczyna się układać:
-
Variables trzymają wartości,
-
Option Group Presets trzymają powtarzalne zasady stylu,
-
Element Presets trzymają gotowe komponenty.
A Ty przestajesz budować stronę z serii ręcznych wyjątków.
I właśnie dlatego ten cały „design system” w Divi 5 nie jest dodatkiem dla nerdów od design ops.
W realnym projekcie to po prostu sposób, żeby pracować szybciej, czyściej i z dużo mniejszym chaosem.
