Zmieniając kolory marki klienta w system kolorów Divi 5

Kolory marki zwykle zaczynają się od nakładania kodów sześciokątnych na nagłówkach, przyciskach i tła. Początkowo jest to wystarczająco proste, ale wraz ze wzrostem układu często potrzebujesz lżejszych wariantów koloru, stany zawisowego lub uzupełniających się akcentów. Zarządzanie tym ręcznie może stać się nieuporządkowane.

Nowy system kolorów w Divi 5 ułatwia to, pozwalając raz zdefiniować paletę i budować podłączone odcienie z początkowej palety kolorów. Każdy kolor pozostaje zsynchronizowany, nawet w miarę ewolucji projektu. W tym przewodniku dowiesz się, jak tworzyć elastyczny, skalowalny system kolorów, który utrzymuje wszystko spójne na stronie klienta.

Zrozumienie systemu kolorów Divi 5

Jeśli pracowałeś z globalnymi kolorami w Divi 4, już wiesz, jak przydatne jest raz zdefiniowanie koloru i zastosowanie go w swojej witrynie. Divi 5 opiera się na tym samym pomyśle, ale tym razem zamienia kolor w kompletny system, który skaluje się z tobą.

Subskrybuj nasz kanał YouTube

Oto trzy główne aktualizacje:

Zaczyna się od zmiennych projektowych. Zdefiniujesz swoją paletę marki w zakładce kolory w Manager Variable Manager, a wartości te stają się Twoim fundamentem. Po zdefiniowaniu są gotowe do użycia w dowolnym module lub sekcji. A kiedy marka ewoluuje w dół linii, wystarczy zaktualizować zmienne w jednym miejscu. Wszystko powiązane z nimi dostosowuje się samodzielnie.

Drugim aktualizacją jest filtr kolorów HSL. Suwaki pozwalają dostosować odcień, nasycenie i lekkość, zapewniając większą kontrolę podczas pracy z tonem i kontrastem.

Jeśli Twoja podstawowa zieleń wydaje się zbyt surowa na tło, możesz lekko ją zmiękczyć, dostosować jasność i zapisać tę wersję jako zmienną. Będzie to zupełnie nowy kolor, ale nadal jest powiązany z oryginalnym kolorem.

Otwiera to również przestrzeń do myślenia w relacjach, a nie izolowanych wartościach. Możesz połączyć zmienne, aby zawsze pozostać w pewnej odległości od drugiej, na przykład ciemniejszy, jaśniejszy, nieco cieplejszy lub bardziej stonowany. Są to nazywane kolorami względnymi, co jest trzecim ulepszeniem.

Na przykład kolor najeżdżający można zdefiniować jako 20% ciemniejszy niż podstawowy. Jeśli podstawowy kolor, stan zawisu utrzymuje swój związek bez konieczności ręcznych dostosowań.

Ten trzyczęściowy system tworzy elastyczny i uzasadniony system kolorów. Nie tylko stosujesz kolory jeden moduł na raz; Budujesz paletę, która może przesuwać się w razie potrzeby, jednocześnie utrzymując spójność i czystość projektu.

Dowiedz się wszystkiego o nowym systemie kolorów Divi

Jeśli do tej pory polegasz na kodach sześciokątnych, to właśnie ten przepływ pracy zaczyna się ograniczyć. I to jest twoja wskazówka na przeniesienie się do systemu kolorów gotowych na przyszłość.

Zmieniając kolory marki klienta w system kolorów Divi 5

Teraz, gdy wiesz, jak działa system kolorów Divi 5, przejdźmy przez to, jak to wygląda w prawdziwym projekcie. W tym przykładzie zaimportowaliśmy układ strony głównej rzeczywistości rozszerzonej z biblioteki Divi.

Zbudujmy scenariusz. Załóżmy, że klient chce dodać uzupełniający kolor, aby zrównoważyć odważną zieleń używaną w całej stronie. Zamiast ręcznego dodawania go w kilku miejscach, weźmy to jako szansę na przesunięcie układu na system kolorów Divi 5, abyśmy nie musieli wprowadzać ręcznych zmian w przyszłości, jeśli zostali zapytani ponownie.

Jeśli spojrzysz przez układ, zauważysz, że ta sama zieleń pojawia się w kilku miejscach, takich jak nagłówki, przyciski i elementy akcentu. Każdy używa stałego kodu sześciokątnego. Naszym celem jest zastąpienie tych zmiennymi kolorowymi i zbudowanie palety, która może dostosować się do zmian później.

Zwykle aktualizacja takiego układu oznaczałoby ręcznie edytowanie każdego modułu. Ale w kolejnych kilku krokach użyjemy zmiennych kolorów, filtrów HSL i podłączonej logiki kolorów, aby zbudować coś bardziej stabilnego. Możesz postępować zgodnie z tym samym układem lub użyć swojego projektu jako bazy.

1. Zapisz główny kolor klienta jako zmienną projektową

Jeśli Twój klient udostępnił nowy kod sześciokątny lub trzymasz się istniejącego koloru marki, pierwszym krokiem jest dodanie go do menedżera zmiennych projektowych. Staje się to twój kolor podstawowy i będzie podstawą dla zbudowanych wokół niego wariantów kolorów.

Dodanie podstawowego koloru

Aby rozpocząć, otwórz menedżer zmienny i przełącz na kartę kolorów .

Panel może już zawierać wartości domyślne dla tekstu pierwotnego, wtórnego, nagłówka i tekstu. W polu podstawowego koloru wprowadź kod sześciokątny dla głównego koloru marki i kliknij ZAPEWANIE Zmienne.

Dodanie wtórnego koloru

Następnie stworzymy względną wersję tego drugiego koloru przy użyciu podstawowej jako podstawy. W ten sposób wszelkie przyszłe zmiany w kolorze podstawowym przeniesie się automatycznie.

W tym przykładzie, ponieważ dodajemy uzupełniający kolor, aby zrównoważyć istniejącą zieloną, przypisamy to jako kolor wtórny. Tło układu jest czarne, więc to parowanie wyróżnia się wyraźnie.

Jeśli na razie pracujesz tylko jednym kolorem, możesz zostawić drugorzędne miejsce na czarne.

Kliknij próbkę kolorów wtórną , aby otworzyć okno koloru. Wszystkie zapisane wartości zostaną wymienione w globalnych kolorach, z pierwszym kolorem podstawowym.

Wybierz to. To przynosi kolor podstawowy jako punkt wyjścia.

Teraz kliknij ponownie próbkę, aby ponownie otworzyć okno, a następnie otwórz rozwijanie filtrów kolorów . To ujawnia suwaki HSL, w których można dostosować odcień, nasycenie i lekkość.

Użyj tych suwaków, aby kształtować nowy kolor. Gdy jesteś z tego zadowolony, zapisz. I po prostu masz drugorzędny kolor podłączony do podstawowej.

Jeśli chcesz zachować czarny kolor wtórnego koloru, ale nadal łączyć go z pierwotnym, obróć zarówno lekkie , jak i suwaki nasycenia aż do -100.

Aby zamiast tego stworzyć ciemniejszy odcień, zostaw odcień i nasycenie według IS i zmniejsz tylko lekkość.

W tym momencie możesz swobodnie eksperymentować. Dostosuj wartości, aż ton poczuje się odpowiedni dla twojego projektu. Niezależnie od tego, czy nowy kolor łączy się delikatnie z paletą marki, czy wyróżnia się jako kontrast, pozostanie powiązany z pierwotnym i ewoluując z nim.

2. Buduj kolory nośne za pomocą regulacji HSL

Z twoimi pierwszymi i wtórnymi kolorami następnym krokiem jest rozszerzenie palety. Te wspierające kolory dają Twojemu projektowi do oddychania. Dodają elastyczność, subtelny kontrast i rytm wizualny w całym układzie.

Aby utworzyć te odmiany, otwórz panel HSL i dostosuj suwaki:

• Twórz jaśniejsze odcienie dla sekcji lub tła, które wymagają kontrastu bez przyciągania uwagi.
• Używaj nieco ciemniejszych tonów do przycisków, stany zawieszonego lub odważnych nagłówków, które muszą się wyróżniać.
• Nieco przesuń odcień lub nasycenie, aby utworzyć kolory akcentu. Ten kolor jest świetny do dzielników, ikon lub innych małych wizualnych atrakcji.

Pokażemy ci, jak to zrobić raz, i możesz zastosować to samo podejście, aby zdefiniować wszystkie nowe kolory, które chcesz. Powiedzmy, że chcemy zrobić wersję wtórnego koloru. Utworzymy nową zmienną kolorów , nadajemy jej wyraźną nazwę, dostosuj suwaki, aby poprawić ton i zapisać go.

Teraz, gdy zmienna jest zapisywana, możemy zastosować ją do stanu zawieszonego przycisku, jak każdy inny kolor.

Dodając kolory wspierające, staraj się myśleć o nich jako o tonalnych wyrażeniach marki, odmianach odzwierciedlających różne poziomy nacisku, kontrastu lub nastroju. Na przykład tony miękkie działają dobrze dla tła, odważne zwracają uwagę na wezwania do działania, a stonowane odcienie są przydatne do nakładania lub tekstu wtórnego.

Możesz technicznie tworzyć wszystkie te ręcznie za pomocą kodów sześciokątnych. A jeśli budujesz tylko jednostronicową stronę, może to być w porządku. Ale w momencie, gdy twój klient chce zmienić kolor rdzenia, każdy skrót zaczyna wykazywać swoje granice. Mamy na myśli to, że nie śledzisz, ile miejsc użyłeś odcienia tła na stronie internetowej. W tym scenariuszu budowanie tych wariantów, ponieważ połączone zmienne zajmuje nieco więcej czasu z góry, ale po ich wprowadzeniu utrzymają spójność twojego projektu bez względu na to, jak często się zmieniają.

3. Zastąp istniejące statyczne kolory zmiennymi

Dzięki zapisaniu nowych zmiennych kolorów nadszedł czas, aby wymienić wartości sześciokodowe używane w całym układzie. To tutaj przechodzenie ze statycznego do dynamiki zaczyna realizować, nie tylko konsekwencji, ale także w przypadku utrzymania projektu w czasie.

Zacznij od zeskanowania układu dla dowolnych elementów, które nadal przy użyciu stałych wartości kolorów. Może to obejmować przyciski, nagłówki, tła, ikony lub dzielniki sekcji. W dowolnym miejscu, w którym kolor marki był stosowany ręcznie, jest teraz okazją do połączenia go z nowym systemem.

Aby to zrobić, Divi podaje dwie opcje: rozszerzyć atrybuty oraz znaleźć i wymień. Oba pozwalają szybko aktualizować wiele elementów, ale każdy świeci w nieco innej sytuacji.

• Użyj atrybutów rozszerzonych, gdy zastosujesz już poprawną zmienną do jednego elementu i chcesz dopasować resztę.
• Użyj Znajdź i zamień, gdy chcesz zamienić określoną wartość sześciokątną, gdziekolwiek się pojawia, nawet jeśli jest ona stosowana na różne elementy.

Zacznijmy od rozszerzonych atrybutów.

Za pomocą atrybutów rozszerzonych

W tym przykładzie chcemy przypisać nowy kolor wtórny do wszystkich H2 w układzie. Zaczniemy od zastosowania go tylko do jednego z nich.

Gdy to zrobisz, klikniemy element prawym przyciskiem myszy i wybierzemy atrybuty rozszerzone. W wyświetlonym panelu ustawimy zakres na całą stronę i typ elementu na tekst.

Po jednym kliknięciu każdy H2 na stronie przyjmuje ten sam kolor wtórny, który pozostanie zsynchronizowany, ponieważ jest powiązany z twoim podstawowym kolorem, jeśli ten kolor podstawowy kiedykolwiek się zmieni.

Za pomocą Znajdź i Wymień

Teraz spróbujmy znaleźć i wymienić, co działa szczególnie dobrze, gdy chcesz wymienić określoną wartość koloru na stronie.

W takim przypadku chcemy zaktualizować kolor tekstu. Aby to zrobić, przejdziemy do Ustawienia> Projekt> Kolor tekstu nadwozia , kliknij prawym przyciskiem myszy i wybierz Znajdź i zamień. Następnie unosimy się przez pole Wymień i wybierzemy naszą nową zmienną.

To wszystko, czego potrzeba. Każda instancja tego starego koloru jest teraz aktualizowana o nową zmienną.

Nie ma tu jednej metody. Atrybuty rozszerzenia to szybszy sposób przenoszenia tej zmiany w podobnych elementach, jeśli już aktualizowałeś jeden moduł ręcznie. Jeśli nadal pracujesz ze statycznymi kodami sześciokątnymi i chcesz je zmienić luzem, znajdź i wymień pomoże ci szybko się poruszać.

Wybierz dowolne podejście ułatwia czyszczenie. Po zakończeniu zobaczysz prawdziwą korzyść z tego systemu: jak reaguje Twój projekt po zmianie tylko jednego koloru.

Testowanie nowej kolorystyki

Wszystko, co zrobiłeś, dotyczyło konfiguracji. Teraz, gdy cała konfiguracja zaczyna pokazywać swoją wartość.

Po naimnym systemie spróbuj zmienić kolor podstawowy. Cały układ zareaguje w sekundach - tła, przyciski, efekty najemnika i wszelkie inne podłączone elementy będą aktualizować natychmiastowe aktualizowanie.

Przyszłe aktualizacje są również łatwiejsze niż kiedykolwiek. Załóżmy, że Twój klient chce przenieść się z neonowej zielonej na cieplejszy żółty, co oznacza ręczne aktualizowanie całej strony internetowej, każdej strony i każdego modułu.

Brzmi bolesnie, ale nie dla ciebie. Po prostu aktualizujesz kolor podstawowy, a reszta witryny następuje.

A może jest Czarny piątek i poprosili o kolor kolorów czerwono-czarnej. Aktualizujesz podstawowy do złotego tonu, a następnie dostosowujesz drugorzędne w głębszą czerwień. Układ natychmiast dostosowuje się, aż do ostatniego szczegółu.

W niektórych przypadkach kolor marki może pozostać taki sam, ale drugorzędny wymaga odświeżenia. To tylko kwestia dostosowania suwaków HSL. Nie trzeba dotykać każdego przycisku lub tła indywidualnie.

Tyle pracy kolorów polega na utrzymaniu równowagi. Utrzymujesz warianty, nawet gdy zmienia się kolor podstawowy. Ten system daje sposób kontrolowania tonu, kontrastu i nacisku w całym projekcie bez konieczności powtórzenia się.

I pamiętaj, że to, co tutaj zrobiliśmy, to tylko jedna strona. Ponieważ zmienne projektowe są globalne, ta konfiguracja rozciąga się na całą witrynę, w tym nagłówki, stopki, posty na blogu, strony docelowe i wszystko inne związane z twoją paletą.

Oznacza to, że każda przyszła aktualizacja, niezależnie od tego, czy kampania sezonowa, odświeżenie marki, czy nowy kierunek kolorów, zaczyna się od jednego miejsca. Aktualizujesz kilka zmiennych i obserwujesz, jak wszystko pasuje do twojego nowego schematu kolorów.

Divi sprawia, że twój kolor pracy jest przyszłościowy

Nietrudno jest wybrać odcień niebieskiego. Trudno jest utrzymać ten niebieski spójność w dziesiątkach modułów, układów, stron i kampanii oraz aktualizowanie go później bez łamania czegoś w tym procesie.

Divi 5 całkowicie to upraszcza. Dzięki narzędziom takiego jak nowy system kolorów, filtry HSL i zmienne projektowe, możesz zarządzać całą swoją tożsamością wizualną z jednego miejsca. Wiedza, że każdy kolor, w każdym układzie, pozostanie spójny i łatwy do aktualizacji, jest tym, co obiecuje Divi 5.

I to tylko jeden z wielu, które stworzyliśmy w ciągu ostatnich kilku miesięcy, w tym Builder Loop, układ Flexbox i całkowicie ponownie wyobrażony interfejs dla współczesnych projektantów stron internetowych. Jeśli jeszcze ich nie zbadałeś, teraz jest idealny czas.