Porównanie kolorowych zbieraczy Divi 4 i Divi 5

Kolor ustawia ton przed odczytaniem jednego słowa, ale tradycyjni zbieracze kolorów utrudniają osiągnięcie prawdziwej spójności marki. Zamiast precyzji często otrzymujesz zgadywanie i zbliżone przybliżenia.

Właśnie dlatego Divi 5 całkowicie ponownie wyobrażał sobie swój system kolorów. W tym poście porównajmy to bezpośrednio z kolorowym zbieraczem Divi 4 i pokażemy, jak bardzo potężniejszy i elastyczny stał się.

Kolorowe zbieracze porównywali

Ułóż je obok siebie, a natychmiast zobaczysz, jak potężny jest nowy interfejs. Kolorowy picker Divi 4 dobrze nam służył ze znajomym widmem tęczowym i podejściem do wyboru.

Przeciągniesz ten biały okrąg, aby wybrać kolory, pracować z kodami sześciokątnymi i organizować rzeczy za pomocą zapisanych, globalnych i najnowszych zakładek. Te małe białe trójkąty na próbkach kolorów powiedziały ci, które z nich były globalnymi kolorami.

Oprócz wyglądu, kolorowy Picker Divi 4 miał świetny fundament. Narzędzie Magic Color było całkiem sprytne, wyciągając się z kolorów strony i najnowszych typów, aby zasugerować palety, które faktycznie działały razem. Ten rytm zaczyna się od zera za każdym razem.

Gdzie Divi 4 stał się ograniczony

Jednak nie wszystko było idealne. Wszystko używało tylko kodów sześciokątnych lub RGBA. Otrzymanie lżejszej wersji twojego niebieskiego oznaczało zgadywanie lub użycie innej aplikacji, aby to rozgryźć. Jeśli Twoja branding często potrzebuje 20% ciemniejszych lub o 40% jaśniejszych kolorów niż główny kolor marki, Divi 4 nie mógł tego za Ciebie zrobić.

Każdy kolor żył sam. Nie można zbudować inteligentnych systemów kolorów, w których kolory są ze sobą powiązane w samym Divi. Budowanie właściwych współczynników kontrastu przyjęło ręczne prace poza Divi.

Jakie są 5 zmian wizualnych Divi

Divi 5 utrzymuje wizualny picker, ale dodaje precyzyjne suwaki z o wiele więcej opcji (omówimy to dalej). Globalna karta przekształciła się w dynamiczną ikonę zmiennej, która łączy się bezpośrednio z zmiennym systemem Divi, który obejmuje kolory.

Same próbki kolorów stały się mądrzejsze; Pokazują ci, z którym kolorem pracujesz i jak łączy się on z twoim systemem.

To, co widzisz, to Divi przechodzące od indywidualnego zbierania kolorów do systemu kolorów. Divi 4 został zbudowany dla „Potrzebuję tego konkretnego niebieskiego”. Divi 5 został zbudowany dla „Potrzebuję niebieskiego, który jest o 20% lżejszy niż mój podstawowy kolor i aktualizacje automatycznie, gdy całkowicie zmieniam kolory marki”.

Interfejs musiał się zmienić, ponieważ to się zmieniło.

Nowy kolorowy picker Divi 5

Nasz zespół odbudował system kolorów, ponieważ stare podejście nie mogło obsługiwać nowoczesnych przepływów pracy. Ten nowy picker koncentruje się wokół odcienia, nasycenia i lekkości (HSL), względnych relacji kolorów i głębokiej integracji z zmiennym systemem Divi 5.

Zamiast pracować z izolowanymi kodami sześciokątnymi, możesz teraz zbudować rodziny podłączonych kolorów, w których zmiana jednego koloru automatycznie aktualizuje wszystkie powiązane odmiany. Istnieją osobne suwaki dla odcienia, nasycenia, lekkości i krycia, które pozwalają dokonywać precyzyjnych regulacji. Interfejs pokazuje dokładnie, z jakim kolorem pracujesz poprzez wskaźniki wizualne.

Próbki kolorów wyświetlają teraz informacje o sobie. Możesz zobaczyć, czy kolor jest wartością statyczną, zmienną lub względnym kolorem z zastosowanymi modyfikacjami HSL. System pokazuje wszystkie szczegóły kolorów, które musisz znać.

Jak faktycznie działa nowy system

Względne kolory zaczynają się od podstawowej zmiennej koloru i pozwalają stosować odmiany. Wybierz swoją podstawową zmienną niebieską, zmniejsz lekkość o 20%i zapisz ją jako zmienną „Royal Deep Blue”.

Divi 5's HSL Color Picker vs Divi 4's Color Picker

Oba systemy pomagają zarządzać kolorami w całej witrynie, ale działają na zupełnie różne sposoby. Zrozumienie tej różnicy wyjaśnia, dlaczego interfejs musiał tak dramatycznie zmienić i dlaczego nowe podejście przyspiesza budowę.

Jak działają globalne kolory Divi 4

Globalne kolory Divi 4 działały jak podstawowy system palet. Zapisz swoją markę Blue raz, a następnie kliknij ją, gdy tylko potrzebujesz tego dokładnego odcienia. Później zamień ten niebieski na inny i obejrzyj każdy przycisk, nagłówek i aktualizację tła na całej witrynie.

Większość ludzi ustanowiła w ten sposób trzy lub cztery główne kolory marki. Pokonuje polowanie na kody sześciokątne lub próbuje pamiętać, czy użyłeś #2E86C1 lub #3498DB dla twoich linków.

Problem pojawił się później, gdy miałeś osiem globalnych kolorów i nie pamiętasz, dlaczego uratowałeś ten szczególny odcień szarości. Czy to było do tekstu? Granice? Nakładki tła? Globalne kolory nie miały etykiet ani opisów do biegania pamięci.

Dlaczego Divi 5 przeszedł do zmiennych projektowych

Zmienne projektowe obsługują teraz więcej niż tylko kolory. Czcionki, liczby odstępów, obrazy i struny tekstowe mają takie same leczenie. Wszystko żyje w jednym menedżerze zmiennym zamiast pływać wokół różnych paneli.

Każda zmienna otrzymuje właściwą nazwę i opis. Zamiast „Global Color 3” możesz to nazwać „Tekstem nagłówka szarym” lub „subtelnym nakładką tła”. Sześć miesięcy później będziesz wiedział dokładnie, do czego służy.

Ale tutaj rzeczy stają się interesujące. Zmienne mogą odwoływać się do siebie i tworzyć relacje. Ustaw swój podstawowy zielony jako fundament. Utwórz „spalony mchu”, który przyjmuje tę zieleń i zmniejsza jego jasność. Następnie zbuduj „cień (spalony mchu)”, który przynosi ten spalony kolor mchu i spowina krycie do 15%.

I oczywiście wszystkie trzy warianty aktualizują automatycznie, jeśli zmienisz swoją podstawową zieloną na pomarańczową. Spalona wersja pozostaje mniej jasna niż jakikolwiek kolor, który wybierzesz, a cień odpowiednio dostosowuje się. Relacje się trzymają.

Kluczowa różnica w praktyce

Globalne kolory oznaczały posiadanie tego samego koloru w wielu miejscach. Zmienne oznaczają relacje kolorów, które dostosowują się razem. Państwa zawieszone pozostają w kontakcie z kolorami podstawowymi. Kolory cieni odnoszą się do Twojej palety marki zamiast żyć jako losowe szarości. System utrzymuje te połączenia bez konieczności wykonywania dodatkowej pracy.

Konfigurowanie systemu kolorów w Divi 4 vs Divi 5

Tworzenie odpowiedniego systemu kolorów określa, czy Twoja witryna wygląda profesjonalnie, czy jak mozaika losowych wyborów. Obie wersje Divi oferują sposoby uporządkowania twoich kolorów, ale ich podejścia nie mogą być bardziej różne. Oto jak budować systemy kolorów w każdej wersji i dlaczego proces ma znaczenie dla twojego przepływu pracy:

Konfigurowanie kolorów w Divi 4

Twoje wybory kolorów kształtują sposób, w jaki odwiedzający doświadczają Twojej witryny. Spójrz na podejście do zarządzania kolorami Divi 4 bierze:

1. Dodaj swoje globalne kolory

Konfiguracja kolorów Divi 4 polegała na globalnym systemie kolorów i organizacji ręcznej. Zaczniesz od nawigacji do opcji kolorów dowolnego elementu, a następnie tworzysz globalne kolory, nawigując do zakładki „Global”, klikając ikonę Plus obok koloru lub edytując istniejący kolor globalny, klikając go. Interfejs pozwala bezpośrednio wprowadzać kody sześciokątne lub używać wizualnego pickera do wyboru kolorów.

Czy masz już zastosowany kolor, który chcesz przekonwertować? Kliknij go prawym przyciskiem myszy i wybierz „Przelicz na globalny”. Dodaje to dokładny kolor do twojej globalnej palety i przełącza moduł, aby używać globalnej wersji. Jest to bardzo pomocne, gdy zdajesz sobie sprawę, że powinieneś uczynić coś globalnego od samego początku.

Magiczne sugestie kolorów

Magiczna funkcja Divi 4 buduje skoordynowane palety z istniejących wyborów projektowych. Zamiast zgadywać, które kolory działają razem, to narzędzie tworzy sugestie na podstawie tego, czego już użyłeś.

Poszukaj trzech kropek (elipsy) pod EyeDropper swojego aktywnego koloru. Kliknij te kropki, aby uzyskać kilka sugestii palety kolorów. Divi przygląda się, jakie kolory użyłeś na swojej stronie i w najnowszych projektach, i pokazuje, że kombinacje powinny współpracować.

2. Stosowanie globalnych kolorów

Używanie ich jest dość proste po skonfigurowaniu niektórych globalnych kolorów. Kliknij w dowolny moduł, w którym chcesz zastosować kolor. Następnie przejdź do zakładki projektowej i znajdź ustawienie kolorów, które chcesz zmienić.

Kliknij Global, aby zobaczyć swoją globalną paletę kolorów. Kliknij dowolną globalną próbkę kolorów i natychmiast dotyczy twojego modułu.

3. Modyfikowanie globalnych kolorów

Tutaj sprawy stają się interesujące. Kiedy chcesz zmienić globalny kolor, nie musisz polować na każdy moduł, który go używa. Po prostu przejdź do dowolnego ustawienia kolorów, kliknij kartę globalną i znajdź kolor, który chcesz edytować.

Konfigurowanie kolorów w Divi 5

Budowanie odpowiedniego systemu kolorów w Divi 5 robi cztery kroki. Zgodnie z tym podejściem pokonuje starą metodę odgadywania kodów kolorów, gdy potrzebujesz nieco innego odcienia:

1. Utwórz zmienną kolorów podstawowych

Otwórz menedżer zmiennych projektowych i dodaj swoje podstawowe kolory marki jako istniejące podstawowe i wtórne zmienne kolorów. Możesz także dodać więcej kolorów, takich jak kolory trzeciorzędne lub akcentujące. Stają się twoimi kolorami podkładu. Twoje podstawowe kolory powinny reprezentować twoją główną paletę marki, która określa twoją tożsamość wizualną.

2. Zbuduj względne kolory z bazy

Teraz możesz tworzyć warianty kolorów połączone z kolorami podstawowymi. Dodaj nowy kolor w menedżerze zmiennych projektów i wybierz swój kolor podstawowy.

Użyj suwaków HSL, aby go dostosować: niższa lekkość o 25% w przypadku tekstu nagłówka, 20% dla tekstu nadwozia; Podnieś lekkość o 20% dla stanów zawisowych lub zmień nasycenie dla stonowanych tła. Podaj te odmiany jasne nazwy, takie jak „Deep Orange” i „Bright Crimson” lub „Hover State (kolor podstawowy)”, „wyciszone tło (kolor wtórny)”.

Wszystkie zmienne projektowe mogą być ułożone w stos, dzięki czemu możesz budować więcej kolorów z twoich utworzonych. Wszyscy pozostają w kontakcie z systemem.

Jeśli później zmienisz kolor podstawowy, te powiązane kolory aktualizują automatycznie, utrzymując nienaruszone relacje.

3. Zastosuj zmienne do swoich elementów

Użyj ikony treści dynamicznej w dowolnym polu kolorów, aby uzyskać dostęp do swoich zmiennych. Interfejs pokazuje, czy każdy kolor jest statyczny, zmienna, czy względny kolor z modyfikacjami HSL.

Wybierz z zorganizowanego systemu kolorów zamiast tworzyć losowe jednorazowe kolory, które łamie spójność.

Po zmianie właściwości dowolnego z twoich baz lub skonstruowanych kolorów wszystko odziedziczone po nich automatycznie dostosuje się do nowych zmian. Nie trzeba ręcznie szorować i wymieniać kolorów, gdy zdecydujesz się odświeżyć markę.

4. Presety budynkowe, które odwołują się do zmiennych kolorów HSL

Zbuduj swoją strategię za pomocą ustawień grupowych opcji dla określonych części projektowych. Presety te różnią się od ustawień elementów. Grupy opcji Westorunki docelowe grupy stylów, takie jak kolory tła, granicy lub tekstu za pomocą zmiennych.

Zapisz cień jako ustawienia grupy opcji przy użyciu zmiennej koloru cienia w oparciu o kolor podstawowy.

Użyj tego ustawienia na kolumnach, sekcjach, wierszy i modułach.

Utwórz osobne ustawienia grup opcji dla różnych kolorów: jeden dla granic z kolorem akcentu, drugi do tekstu z kolorowym kolorem itp. Wymieszaj te ustawienia wstępne w elementach bez zmiany innych stylów.

Presete elementów zapisują pełne konfiguracje modułów, w tym treść i wszystkie style. Wykonanie wstępnego wstępnego elementu dla stylistych przycisków blokuje w używanych ustawieniach grup i zmiennych kolorów. Natychmiastowe zastosowanie go daje dokładnie taki sam przycisk.

5. Rozpowszechnianie kolorów w całej stronie

Funkcja atrybutów Extree idzie dalej, pozwalając na kopiowanie właściwości projektowania między elementami. Po udoskonaleniu kolorystyki ikon za pomocą zmiennych możesz rozszerzyć te atrybuty na inne ikony w ramach wiersza, strony lub całej witrynie.

Utrzymuje to relacje kolorów podczas rozpowszechniania spójnej stylizacji bez pracy ręcznej.

Divi 5 znajduje się i zamień cechy prędkości w procesie konwersji istniejących miejsc o rozproszonych kolorach statycznych. Kliknij prawym przyciskiem myszy dowolne pole kolorów i wybierz „Znajdź i wymień”.

Ustaw swój zakres, aby skierować określone elementy, całe sekcje lub całą stronę. W „Zamień” wybierz nową zmienną z zakładki globalnej. Sprawdź „Wymień wszystkie znalezione wartości”, aby zamienić każdą instancję tego koloru na zmienną.

Działa to idealnie podczas migracji starszych wzorów do nowego systemu kolorów. Możesz zastąpić dziesiątki podobnych, ale nie identycznych pomarańczy w sekundach jedną spójną zmienną.

Wszystkie aspekty działają razem: Ustal zmienne kolorowe, użyj znajdź i zamień, aby oczyszczyć istniejące niespójności, a następnie użyj rozszerzonych atrybutów, aby utrzymać standardy projektowe podczas budowania nowych sekcji. Następnie zbuduj strony normalnie, ponieważ style można łatwo zastosować za pomocą ustawień opcji i ustawień wstępnych elementów.

Nowy zbieracz kolorów będzie pasował do twojego przepływu pracy

System kolorów Divi 5 naprawia problemy z przepływem pracy, które spowalniały projekty od lat. Nie musisz już używać zewnętrznych narzędzi do znalezienia odpowiedniego odcienia. Suwaki HSL zapewniają precyzyjną kontrolę bez opuszczania konstruktora.

Twoje decyzje kolorowe pozostają w kontakcie dzięki zmiennym projektowym. Kiedy zmienisz podstawowy kolor marki, powiązane kolory aktualizują automatycznie, zachowując relacje. To bije ręcznie polując na każdą niebieską odmianę stworzoną przez oko.

Wypróbuj nowy system kolorów w Divi 5 już dziś!