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.

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”.

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ś.