Każdy projekt ma kolory. Kolor główny marki, kolor akcentu, kolor tła, kolor tekstu. Zazwyczaj jest ich kilka i zazwyczaj każdy zna je na pamięć albo ma je zapisane w brandbooku.
Problem nie jest w tym, że nie wiadomo jakie kolory zastosować. Problem jest w tym, gdzie i jak je zapisać w Divi 5 — żeby działały wszędzie i żeby zmiana jednej wartości nie oznaczała godziny poprawek po całym serwisie.
Do tego właśnie służą Global Colors.
Czym są Global Colors w Divi 5
Global Colors to paleta kolorów zdefiniowana na poziomie całego serwisu, dostępna w każdym miejscu gdzie Divi pozwala wybrać kolor. Kiedy tworzysz nowy moduł i klikasz picker koloru, Twoje Global Colors są tam od razu — zamiast za każdym razem wklejać hex ręcznie.
To wygodne, ale to dopiero początek.
Prawdziwa wartość Global Colors jest gdzie indziej: jeśli jakiś element korzysta z koloru globalnego, a nie z ręcznie wpisanej wartości hex — to zmiana koloru globalnego aktualizuje ten element automatycznie.
Zmiana jednej wartości. Efekt w całym serwisie.
To jest różnica między projektem który można utrzymać, a projektem który po pierwszej zmianie identyfikacji rozsypuje się w godziny pracy.
Jak to wygląda bez Global Colors
Żeby docenić Global Colors, warto przez chwilę pomyśleć o tym co się dzieje bez nich.
Budujesz stronę główną. Kolor główny marki to #1A3C6E — głęboki granat. Wklejasz go w przycisku. Potem w nagłówku sekcji. Potem w tle jednej sekcji. Potem w ikonach. Potem na stronie usług, na stronie O nas, na stronie kontakt.
Po miesiącu ten hex pojawia się w 60–80 miejscach w projekcie, każde ręcznie wpisane.
Klient decyduje że jednak woli ciemniejszy odcień. Albo rebranduje się i zmienia kolor główny.
Nie ma dobrego wyjścia. Albo siedzisz i poprawiasz jedno po drugim, albo ryzykujesz że coś pominiesz i projekt jest niespójny.
Z Global Colors — zmieniasz jedną wartość. Koniec tematu.
Gdzie ustawić Global Colors w Divi 5
Global Colors w Divi 5 zarządzasz przez Design Variables. Znajdziesz je w panelu buildera po lewej stronie, w sekcji Variables.
Możesz tam tworzyć zmienne kolorów i nadawać im nazwy. Nie musisz trzymać się nazw technicznych w stylu „color-primary”. Możesz nazywać je tak jak myślisz o projekcie — „Kolor główny”, „Akcent”, „Tło sekcji”, „Tekst nagłówka”. Ważne żebyś wiedział co dana zmienna oznacza i żebyś używał jej konsekwentnie.
Kiedy już masz kolory zdefiniowane jako zmienne, możesz przypisywać je do elementów przez picker koloru — zamiast wklejać hex, wybierasz zmienną z listy. Od tej chwili ten element „zna” kolor przez zmienną, a nie przez wpisaną wartość.
Ile kolorów definiować na starcie
Tutaj jest pułapka na wielu projektujących po raz pierwszy w Divi 5: próba zdefiniowania wszystkiego od razu.
Nie musisz mieć dwudziestu zmiennych kolorów przed rozpoczęciem projektu. W większości serwisów wystarczy kilka podstawowych:
- kolor główny — używany w przyciskach, akcentach, wyróżnieniach,
- kolor pomocniczy — używany jako tło sekcji, obramowania, elementy drugorzędne,
- kolor tła — domyślne tło strony,
- kolor tekstu głównego — nagłówki i treść,
- kolor tekstu pomocniczego — podpisy, opisy, mniejszy tekst,
- kolor akcentu — jeśli identyfikacja tego wymaga.
Sześć zmiennych wystarczy na spokojne 80% typowego projektu stronowego. Resztę możesz dodawać w trakcie jeśli okaże się potrzebna.
Ważniejsze niż kompletna lista jest konsekwentne stosowanie — jeśli zdefiniowałeś kolor główny jako zmienną, to każdy przycisk, każdy nagłówek sekcji i każdy akcent w projekcie powinien z niej korzystać, a nie z ręcznie wpisanego hexu.
Nazewnictwo ma znaczenie
Jeden praktyczny punkt, który robi dużą różnicę w projektach trwających dłużej niż tydzień: nazwy zmiennych kolorów powinny opisywać funkcję, nie wartość.
Zmienna nazwana „Granat #1A3C6E” traci sens kiedy klient zmienia kolor na fiolet. Zmienna nazwana „Kolor główny” działa bez względu na to jaką wartość hex ma w danym momencie.
To samo dotyczy sytuacji gdy ktoś inny przejmuje projekt — czy to kolega, czy Ty sam po trzech miesiącach przerwy. Zmienna „Tło sekcji wyróżnionej” jest natychmiast zrozumiała. Zmienna „Kolor 4” już niekoniecznie.
Kilka minut na dobre nazewnictwo na początku projektu oszczędza sporego zamieszania później.
Kolory globalne a kolory w presetach
Kiedy w kolejnych krokach będziesz budować Presety — dla przycisków, kart, sekcji — pamiętaj żeby te presety też korzystały ze zmiennych kolorów, a nie z ręcznie wpisanych wartości hex.
To jest moment gdzie cały system zaczyna działać razem.
Preset przycisku korzysta ze zmiennej „Kolor główny”. Zmienna „Kolor główny” ma wartość #1A3C6E. Wszystkie przyciski w serwisie korzystają z tego presetu. Kiedy klient zmienia kolor główny — zmieniasz jedną zmienną i wszystkie przyciski w całym serwisie aktualizują się automatycznie.
Bez tej zależności presety nadal pomagają w spójności, ale tracisz możliwość globalnych zmian przez jedną wartość.
Jeden krok przed budowaniem stron
Ustawienie Global Colors to jeden z pierwszych kroków przy nowym projekcie w Divi 5 — zaraz po tym jak wiesz jakich kolorów będziesz używać.
Nie musisz mieć finalnie zatwierdzonego brandu żeby zacząć. Możesz pracować na roboczych kolorach, które potem zastąpisz właściwymi. Ważne jest żeby od samego początku używać zmiennych — nawet jeśli wartości się zmienią, struktura systemu zostaje.
W praktyce to wygląda tak: dostajesz brandbook albo ustalasz kolory z klientem, wchodzisz do Design Variables, tworzysz sześć zmiennych z odpowiednimi wartościami i odpowiednimi nazwami, i dopiero potem otwierasz builder do pracy nad stronami.
Dziesięć minut na początku. Kilka godzin zaoszczędzone przy każdej większej zmianie.