Kolory brandu w Divi 5 — ustaw Design Variables raz i zapomnij o hex kodach na zawsze
Masz logo, masz brandbook albo przynajmniej znasz kolory firmy. Teraz trzeba je wpisać do Divi 5 w taki sposób żeby działały w całym serwisie — bez wklejania tego samego hex kodu w kółko i bez polowania po modułach gdy klient zmieni zdanie o odcieniu.
W tym artykule konfigurujesz Design Variables dla kolorów od zera. Zajmie to kwadrans. Procentować będzie przez cały projekt.
Krok 1 — otwórz panel Variables
Otwórz dowolną stronę w Divi Builderze.
W lewym panelu buildera znajdź ikonę Variables — wygląda jak małe kółko z kreską, albo szukaj etykiety „Variables” w dolnej części panelu. Kliknij żeby otworzyć panel Design Variables.
Zobaczysz listę zmiennych — na nowym projekcie pustą albo z kilkoma domyślnymi zmiennymi Divi. Możesz je usunąć i zacząć od czystej karty, albo nadpisać wartości domyślne swoimi.
Zmienne
Krok 2 — utwórz pierwszą zmienną koloru
Kliknij „Add Variable” albo ikonę plusa w panelu Variables.
Divi zapyta o typ zmiennej. Wybierz „Color”.
Pojawią się dwa pola:
Nazwa zmiennej — wpisz nazwę opisującą funkcję koloru, nie jego wartość. „Kolor główny” zamiast „Granat”. „Akcent” zamiast „Pomarańczowy”. Za miesiąc gdy kolor się zmieni, nazwa nadal będzie miała sens.
Wartość — kliknij w pole koloru i wpisz hex kod swojego koloru albo użyj pickera. Możesz też wpisać wartość RGB lub HSL jeśli wolisz.
Kliknij Save.
Pierwsza zmienna gotowa.
Krok 3 — utwórz pozostałe zmienne
Powtórz proces dla każdego koloru brandu. Dla typowego projektu to sześć zmiennych:
- Kolor główny — podstawowy kolor marki, używany w przyciskach i akcentach
- Kolor pomocniczy — uzupełniający kolor marki
- Tło — domyślne tło strony, zazwyczaj biały lub bardzo jasny kolor
- Tło sekcji — kolor tła dla wyróżnionych sekcji, często jasny odcień koloru głównego
- Tekst główny — kolor nagłówków i treści
- Tekst pomocniczy — kolor podpisów i drugorzędnych informacji
Nie musisz tworzyć wszystkich na raz. Zacznij od koloru głównego, akcentu i tła — resztę dodasz gdy będziesz budować i zobaczysz czego potrzebujesz.
Krok 4 — użyj zmiennej w module
Teraz najważniejszy krok — żeby zmienne działały, musisz ich używać zamiast wpisywać hex kody bezpośrednio.
Otwórz dowolny moduł — na przykład Button. Wejdź w ustawienia Design → Button → Background Color.
Kliknij w pole koloru. Zamiast od razu wpisywać hex, poszukaj ikony zmiennej w pickerze koloru — zazwyczaj wygląda jak małe kółko albo link lub po prostu kolor z etykietą. Kliknij ją.
Pojawi się lista Twoich zmiennych. Wybierz „Kolor główny”.
Kolor ze zmiennej
Przycisk ma teraz kolor pobrany ze zmiennej. Zmienisz zmienną — zmieni się przycisk. I każdy inny element który korzysta z tej samej zmiennej.
Krok 5 — sprawdź czy zmiana działa globalnie
Żeby zobaczyć siłę tego podejścia w praktyce, zrób szybki test.
Wróć do panelu Variables. Kliknij na zmienną „Kolor główny” i zmień jej wartość na inny kolor — cokolwiek wyraźnie różniącego się od oryginału.
Wróć do buildera i sprawdź przycisk który przed chwilą ustawiłeś. Zmienił się automatycznie.
Teraz zmień wartość zmiennej z powrotem na właściwy kolor marki.
To jest dokładnie to co się stanie gdy klient poprosi o zmianę koloru za trzy miesiące. Jedna zmiana, efekt w całym serwisie.
Krok 6 — zastosuj zmienne w presetach
Zmienne kolorów są szczególnie potężne gdy działają razem z presetami elementów.
Kiedy tworzysz preset Primary Button, ustaw jego kolor tła przez zmienną „Kolor główny”, a kolor tekstu przez zmienną „Tekst na kolorowym tle” albo bezpośrednio przez białą zmienną. Nie wpisuj hex kodów w presecie — używaj zmiennych.
Efekt: zmiana zmiennej koloru głównego aktualizuje automatycznie wszystkie przyciski które korzystają z presetu. Bez wyjątków, bez pominiętych miejsc.
Kilka praktycznych uwag
Twórz zmienne zanim zaczniesz budować strony — im wcześniej masz zmienne, tym więcej elementów z nich korzysta od początku. Dodanie zmiennych w połowie projektu oznacza że musisz ręcznie zaktualizować elementy które były budowane bez nich.
Nie twórz zmiennej dla każdego odcienia — jeśli masz kolor który pojawia się tylko raz w projekcie, możesz wpisać hex bezpośrednio. Zmienne mają sens dla kolorów które powtarzają się w wielu miejscach.
Sprawdzaj picker koloru za każdym razem — nawyk klikania w ikonę zmiennej zamiast od razu wpisywania hex kodu. To jedna sekunda różnicy przy każdym module, ale przez cały projekt robi ogromną różnicę.
Eksportuj zmienne razem z presetami — jeśli budujesz podobne projekty dla klientów z tej samej branży, możesz eksportować zmienne i presety jako punkt startowy dla nowego projektu. Divi 5 pozwala eksportować ustawienia globalne przez narzędzia importu i eksportu.
Efekt po kwadransie pracy
Masz teraz sześć zmiennych kolorów które będą zasilać cały projekt. Każdy element który z nich korzysta jest automatycznie zsynchronizowany. Zmiana koloru marki to jedna operacja, nie godzina szukania po modułach.
To jest fundament systemu o którym pisaliśmy w sekcji „Nowy projekt z Divi 5”. Tutaj go właśnie zbudowałeś.
