Zrozumienie względnych kolorów w projektowaniu stron internetowych

W projektowaniu stron internetowych nawet najprostsze decyzje mogą się pomnożyć. To, co zaczyna się jako pojedynczy wybór projektu, szybko rozszerza się na dziesiątki wizualnych odmian interakcji, tła, granic i innych. Twoja kompilacja może zostać zaśmiecona z niedopasowanymi wartościami i manualnymi poprawkami bez spójnego systemu.

Względna składnia kolorów w CSS oferuje mądrzejsze, bardziej skalowalne podejście. Pozwala zdefiniować różnice wizualne w oparciu o jedno źródło, utrzymując spójny projekt i łatwy w zarządzaniu. Zwykle wymaga to napisania niestandardowego kodu. Ale dzięki Divi 5 możesz wizualnie używać tych nowoczesnych technik, od samego początku. Przyjrzyjmy się bliżej.

Powszechne problemy z zarządzaniem kolorami

Ten jeden idealny kolor marki, który wybierasz, może szybko pomnożyć w dziesiątki odmian rozrzuconych po Twojej stronie. Oto kilka problemów, które przyczyniają się do tego problemu:

Zarządzanie wariantami dla jednego koloru

Zaczynasz od jednego bazowego niebieskiego i szybko potrzebujesz dziesiątek odmian. Kolorowy zbieracz konstruktora stron staje się bałaganem. Jasnoniebieski, jaśniejszy niebieski, ciemnoniebieski, ciemnoniebieski, wyblakły niebieski - każdy zostaje zapisany jako osobny kolor.

Twoja marka Blue obejmuje dwudziestu różnych odcieni w Twojej witrynie. Niektóre sekcje używają oryginalnego niebieskiego, inne używają lżejszej wersji, którą zrobiłeś trzy tygodnie temu, a twoje przyciski używają ciemniejszego odcienia, który zrobiłeś, aby uzyskać lepszy kontrast.

Żaden z tych kolorów nie łączy się z innymi. Kiedy Twój klient chce fioletowego zamiast niebieskiego, czujesz się w obliczu ręcznie aktualizacji każdego koloru. Spędzisz godziny klikając moduły. Polujesz każdy odcień. Masz nadzieję, że ich nie przegapisz.

Zbiór wielu podobnych niebieskich odcieni po lewej zamienia się w rozproszone, niepowiązane fioletowe po prawej stronie, ponieważ aktualizacja ich jeden po drugim jest żmudna i wymaga stałej spójności. Co więcej, te warianty kolorów są zwykle gałki oczu i nie mają żadnego połączenia.

Problem krycia

Wielu budowniczych stron obejmuje sterowanie przezroczystości, które mogą być koszmarem dla spójności kolorów. Możesz stworzyć idealną niebieską nakładkę z 60% krycia, ale później potrzebujesz tego samego wyświetlonego czerwonego dla innej sekcji.

Twój konstruktor stron nie pamięta dokładnej mieszanki, więc pozostawiłeś oczu suwak krycia i próbujesz dopasować to, co zrobiłeś wcześniej.

Próby 1, 2 i 3 różnią się w cieniu i przezroczystość, ponieważ gałki oczne nie dają precyzyjnych rezultatów nawet przy precyzyjnych elementach sterujących.

Niektórzy budowniczowie stron pozwalają zapisać przezroczyste kolory. Inni nie. Skończy się na tym, że podobno wyglądający niebieski niebieski.

Wszystkie są nieco inne. Twój projekt traci spójność. Nie można wiarygodnie odtworzyć tego samego przezroczystego koloru w różnych modułach. Za każdym razem, gdy potrzebujesz przejrzystości, zaczynasz od zera. Zgadujesz o wartości krycia. Masz nadzieję, że pasują do twojego istniejącego projektu.

Tworzenie zmiennych ręcznie

Większość budowniczych stron oferuje jakąś formę oszczędzania kolorów, ale szybko staje się niemożliwa do opanowania. Oszczędzasz kolory z ogólnymi nazwami, takimi jak „żółty 1”, „żółty 2” i „żółte światło”.

Sześć miesięcy później nie masz pojęcia, który żółty co robi. Twoja zapisana paleta kolorów staje się bałaganem o podobnych kolorach o bezsensownych nazwach. Twoja biblioteka kolorów rośnie bez żadnego systemu organizacyjnego. Masz trzy różne pomarańcze, które wyglądają prawie tak samo, ale służą różnym celom.

Siatka wielu próbek kolorów z nakładającymi się odcieniami i niespójnymi, niejasnymi nazwami przyczynia się do zagraconej, mylącej palety, która jest trudna do skutecznego zorganizowania lub użycia.

Członkowie zespołu dodają swoje odmiany kolorów, tworząc zduplikowane odcienie o różnych nazwach. Twoja marka pomarańczowa istnieje jako „pomarańczowa”, „marka pomarańczowa”, „podstawowa pomarańcza” i „pomarańczowa główna”. Nikt nie wie, którego użyć.

Niektórzy programiści próbują to rozwiązać, pisząc niestandardowe zmienne CSS. Daje im to lepszą kontrolę nad relacjami kolorów.

Ale teraz stworzyłeś przeszkodę techniczną. Członkowie zespołu spoza technologii nie mogą już aktualizować kolorów, a Twoi klienci nie mogą sami dokonywać prostych zmian kolorów. Stajesz się odpowiedzialny za każdą niewielką regulację kolorów.

Jakie są względne kolory w CSS (i dlaczego ich potrzebujesz)

Względne kolory rozwiązują problemy z kolorami. Wybierasz jeden kolor marki. CSS tworzy wszystkie potrzebne wersje. Lekkie dla tła. Ciemne dla granic. Przezroczyste dla nakładek. Wszystko z jednego początkowego koloru.

CSS działa jako dynamiczne narzędzie kolorów. Mówisz: „Zrób ten żółty zapalniczka”. CSS wykonuje pracę. Twój czerwony przycisk musi zanikać podczas unoszenia się. CSS dodaje przezroczystość. Twój niebieski nagłówek potrzebuje ciemniejszej granicy. CSS tworzy to od razu.

Tradycyjne przepływy pracy wymagały więcej ręcznego wysiłku. Projektanci wykonali zestawy kolorów w Photoshopie. Koderzy używali narzędzi takich jak SASS. Budowniczowie stron internetowych musieli zgadywać w pasujących kolorach. CSS obsługuje to teraz automatycznie.

Jak CSS tworzy kolory z kolorów

Słowo „z” mówi CSS, aby używał istniejącego koloru jako punktu wyjścia. Dajesz CSS kolor i rozbija ten kolor na kawałki, których może użyć.

Twój początkowy kolor staje się podstawą. CSS dzieli go na części. Czerwone kwoty, zielone kwoty, kwoty niebieskie. Lub odcień, jasność i nasycenie, jeśli wolisz te elementy sterujące.

Możesz zacząć od dowolnego formatu kolorów. Użyj koloru sześciokątnego, takiego jak #e91e63. Powiedz CSS, aby pracował z nim jako HSL, aby uzyskać łatwe zmiany jasności. Wydaj go jako RGB, jeśli Twój kod tego potrzebuje. CSS przekształca wszystko automatycznie.

Kod jest zgodny z prostym wzorem. Najpierw mówisz, skąd uzyskać kolor, a potem mówisz, co o tym zmienić. Możesz zachować wszystko tak samo, ale dodać przejrzystość lub zmienić odcień, ale zachować jasność. Oba działają w ten sam sposób.

Łamanie kolorów na części

Różne formaty kolorów dają różne narzędzia. RGB pozwala osobno zmienić czerwony, zielony i niebieski. HSL daje kontrolę odcienia, nasycenia i lekkości.

Oto jak to działa. Piszesz RGB (z #FF4081 RGB). CSS bierze ten różowy kod sześciokątny i dzieli go na liczby czerwone, zielone i niebieskie. Następnie możesz użyć tych liczb, jak chcesz. Wzór pozostaje taki sam: funkcja koloru (z kanału kanału 1 kanału 2).

Zamiast pisać kolory od zera, opierasz się na istniejącym kolorze i zmieniasz tylko części, które chcesz zmienić.

Każda część zostaje przekonwertowana, aby dopasować to, co wybrałeś. Przekształcenie tego różowego sześciokątnego daje r = 255, g = 64, b = 129. Użyj ich jako IS lub zmień je za pomocą calc ().

Możesz także mieszać i dopasować kanały. Chcesz, aby wszystkie czerwone piksele były takie same? Użyj RGB (z var (–Color) GGG). Przyjmuje to zieloną wartość i wykorzystuje ją do czerwonego, zielonego i niebieskiego, tworząc szary ton z oryginalnego koloru.

Wsparcie w przeglądarce i inne względy

Duże strony nie mogą zignorować odwiedzających, ponieważ muszą pomieścić wszystkich. Stare wersje Safari działają inaczej. Wersje Chrome radzą sobie z pewnymi sprawami na własny sposób. Firefox, to własne. W końcu napiszesz trzy różne wersje kodu dla jednego efektu koloru.

Cała ta dodatkowa praca zajmuje czas na lepsze rzeczy. Możesz poprawić funkcjonalność witryny i dodać funkcje, które ludzie chcą.

Wielu programistów używa względnych kolorów selektywnie. Wewnętrzne narzędzia i projekty osobiste działają dobrze, ponieważ kontrolujesz przeglądarkę. Witryny marketingowe i praca klientów wymagają bardziej starannego planowania.

Technologia działa świetnie tam, gdzie jest obsługiwana. Pytanie brzmi, czy dodatkowa złożoność pasuje do harmonogramu projektu i zespołu, czy zdolność techniczna klienta. Ale w większości przypadków byłby to przesada i koszty ogólne dla większości członków zespołu.

Właśnie dlatego wkroczył zespół Divi. Widzieliśmy, jak projektanci stron internetowych zmagają się z kompatybilnością przeglądarki, jednocześnie tracąc potężne narzędzia kolorystyczne. Nasze rozwiązanie w Divi 5 przyjmuje najlepsze części względnych kolorów i owija je w systemie, który działa wszędzie i nie wymaga kodowania.

Jak Divi 5 ułatwia względne kolory

Teraz znasz moc względnych kolorów; Być może jednak zdałeś sobie sprawę, że nie jest tak łatwe do wdrożenia. Divi 5 przyjęło inne podejście i zbudowało elastyczność kolorów bezpośrednio w swoim interfejsie wizualnym. Ale dowiedzmy się, czym dokładnie jest Divi.

Co to jest Divi?

Divi jest najpopularniejszym konstruktorem stron WordPress. Priorytetowo traktuje projekt wizualny i zapewnia pełną kontrolę nad projektem.

Możesz obserwować, jak Twoje zmiany mają miejsce, dostosować rozmiary czcionek lub odstępy liniowe i natychmiast zobaczyć wyniki na swojej stronie. Otrzymujesz dostęp do ponad 200 modułów, które jeżdżą w dowolnym miejscu. Bloki tekstowe, nagłówki i elementy treści działają jako zespół. Brak sztywnych szablonów, które wciskają Twoje pomysły w niewygodne kształty.

Oto, co wyróżnia Divi: ponad 2000 gotowych układów zbudowanych dla prawdziwych firm. To nie są podstawowe szablony startowe. Każdy projekt jest skierowany do określonych branż. Znajdziesz układy, które mówią w języku odbiorców i pasują do potrzeb biznesowych.

Pomiń pustą stronę blues z szybkimi witrynami Divi

Szybkie witryny Divi naprawia, że zastraszające puste płótno, które zabija projekty przed rozpoczęciem. Otrzymujesz profesjonalne strony startowe o solidnym designie, które nasz zespół projektowy buduje za pomocą oryginalnych obrazów i dzieł sztuki, których nie znajdziesz nigdzie indziej.

Jeśli chcesz czegoś bardziej spersonalizowanego, Divi Quick Sites współpracuje z Divi AI w celu tworzenia niestandardowych układów na podstawie danych firmy. Opisz swoją firmę konsultingową lub restaurację, a tworzy odpowiednie strony z treściami specyficznymi dla branży.

To nie są podstawowe szkielety: otrzymujesz rzeczywiste nagłówki, treści pisemne i obrazy pasujące do typu firmy. Projektuje nawet nagłówki i stopki, strony produktów i szablony postów na blogu, między innymi dla Ciebie.

Od samego początku możesz ustawić czcionki i kolory marki lub pozwolić AI wybrać je dla Ciebie. AI działa w ramach tych wytycznych. Następnie wszystko pozostaje całkowicie edytowalne, więc możesz dostosować typografię, dopóki nie spełni twoich dokładnych potrzeb.

Całkowita kontrola nad projektem witryny, teraz z AI

Builder motywów stawia Cię odpowiedzialność za projekt na całej Twojej witrynie. Twórz niestandardowe nagłówki, które odzwierciedlają osobowość marki. Zbuduj układy blogów, które utrzymują czytelników w długich artykułach. Twoje 404 strony mogą pozostać na marce z pasującymi czcionkami i stylem.

Divi Ai, jak wspomniano wcześniej, umieszcza sztuczną inteligencję w swoim przepływie pracy projektowej. Utwórz nagłówki, które brzmią tak, jakbyś je napisałeś, i opisy produktów, które przechwytują głos marki.

Edycję zdjęć można wykonać wewnątrz budowniczego. Powiedz sztucznej inteligencji, jakie zmiany chcesz na obrazie, a ona obsługuje edycje.

Potrzebujesz świeżych zdjęć? To też je tworzy.

Kompletne sekcje stron, które idealnie pasują do Twojej firmy.

Plus fragmenty kodu, gdy ich potrzebujesz.

Divi 5: następna ewolucja

Divi 5 wchodzi w testy alfa z wyraźną misją: poprawić wydajność procesu projektowania stron internetowych. Słuchaliśmy prawdziwej opinii na temat tego, co cię spowalnia i co by ci pomogło.

Wszystko, co lubisz w obecnych pachach Divi. Właśnie sprawiliśmy, że działa lepiej. Interfejs wygląda na czystszy. Strony ładują się szybciej niż wcześniej. Kontrole odpowiadają właśnie po kliknięciu.

Odbudowaliśmy fundament za pomocą dzisiejszych standardów internetowych. Oznacza to mniej dziwnych błędów i gładszą wydajność ogólnie.

Spędzasz mniej czasu na walce z konstruktorem i więcej projektowania. Twoje witryny wyglądają bardziej profesjonalnie, ponieważ spójność dzieje się automatycznie. Klienci uzyskują lepsze strony internetowe, ponieważ możesz skupić się na ich potrzebach zamiast na problemach technicznych.

Wersja Alpha jest gotowa do użycia na nowych stronach internetowych, chociaż nie zalecamy przekształcenia istniejących witryn Divi 4 na Divi 5.

Co nowego w Divi 5

Divi 5 wprowadza poważne zmiany w budowaniu stron internetowych. Publiczna wersja alfa działa teraz świetnie w przypadku nowych projektów. Nasze zespoły programistów wysyłają nowe funkcje co dwa tygodnie, z kilkoma głównymi aktualizacjami wydanymi od czasu rozpoczęcia Alpha.

Oto kilka kluczowych aktualizacji:

• Nowoczesna baza kodowa przyspiesza wszystko, ładując tylko moduły, których faktycznie potrzebujesz, usuwając kod, który spowolnił Divi 4.
• Kompletny system układu FlexBox zawiera teraz nowe szablony wierszy, automatyczne centrowanie pionowe, owijanie zawartości i rozkład odstępów za pośrednictwem kontroli wizualnych.
• Zupełnie nowy konstruktor pętli , który powtarza moduły, grupy lub sekcje o dynamicznej zawartości i obsługuje zagnieżdżone pętle dla złożonych struktur danych.
• Względne kolory z HSL zapewniają dynamiczną kontrolę kolorów w oparciu o wartości odcienia, nasycenia i lekkości.
• System oparty na HTML-5 całkowicie zastępuje skróty , co oznacza mniej błędów i lepszą kompatybilność WordPress.
• Interfejs Visual Builder ma całkowitą metamorfozę, z jasnymi i ciemnymi trybami, paneli dokowania, oknami z zakładkami, skrótami klawiatury i ulepszonym widokiem warstw z bułką tartą.
• Konfigurowalne responsywne punkty przerwania zastępują trzy stałe Divi 4, zapewniając większą kontrolę za pomocą skalowania płótna, aby zobaczyć dokładnie, jak wyglądają projekty na różnych rozmiarach ekranu.
• Grupy modułów działają jak wszechstronne kontenery, które łączą elementy powiązane, dzięki czemu można je stylizować jako jednostki lub poruszać bez utraty relacji.
• Zmienne projektowe pozwalają ustawić kolory, czcionki, liczby, obrazy, tekst i adresy URL na całym świecie na całej witrynie.
• Presety grup opcji zapisują określone właściwości projektowe, takie jak typografia lub cienie, które działają w różnych typach modułów.
• Zaawansowane jednostki CSS obsługują teraz funkcje Clamp (), calc (), min () i max () za pośrednictwem interfejsu wizualnego bez kodu pisania.
• System interakcji tworzy wyskakujące okienka, przełączniki, przewijanie i efekty ruchu myszy bez zewnętrznych wtyczek.

Co się zbliża…

• Moduły WooCommerce odbudowane od zera za pomocą architektury Divi 5 o pełnej ustalonej i zmiennej kompatybilności.
• Inspektor Element zapewni nowe narzędzia debugowania i tworzenia dla zaawansowanych użytkowników.
• Podobnie moduł grupy karuzelowej może pomóc w stworzeniu karuzeli złożonej z grup, a następnie opracować zawartość dla każdego slajdu, wykorzystując kompletny zestaw elementów Divi do zaprojektowania dowolnego stylu karuzeli.

Budowanie palet, które skalą się z Divi 5

Twój kolorowy zbieracz staje się bałaganem, gdy potrzebujesz dziesiątek wariantów kolorów marki. Divi 5 naprawia to, łącząc każdy odcień z jednym kolorem podstawowym. Poniższe kroki pokazują, jak zbudować skalowalny i możliwy do utrzymania system kolorów.

1. Konfigurowanie podstaw podstawowych kolorów

Otwórz wizualny budowniczy i znajdź ikonę Manage Managera na lewym pasku bocznym. Kliknij, aby zobaczyć kolor kolorów Twojej witryny. Divi 5 jest wyposażony w wstępne zmienne kolorów, które już na Ciebie czekają: podstawowe, wtórne, nagłówki i kolory ciała.

Nie możesz usunąć tych ustawionych zmiennych, ale możesz zmienić ich wartości. Działa to idealnie, ponieważ te cztery kolory obsługują większość stron internetowych. Kliknij zmienną podstawową i wprowadź główny kolor marki. Staje się to podstawą każdej innej odmiany kolorów w Twojej witrynie.

Twoja podstawowa zmienna kolorów powinna odzwierciedlać najbardziej nasyconą wersję koloru Twojej marki. Pomyśl o tym jak o czystej, nierozcieńczonej wersji, zanim utworzysz lżejsze tła lub dodasz efekty przezroczystości. Daje to najwięcej zasięgu podczas budowania zmian później.

Wtórny kolor działa dobrze w przypadku akcentów, przycisków lub atrakcji, które muszą wyróżniać się na tle głównego koloru marki. Ustaw swój kolor na czele na coś, co dobrze czyta na twoich tłach. Kolor nadwozia zwykle pozostaje ciemnoszary lub czarny dla czytelności.

Te cztery ustawione zmienne łączą się z całym systemem Divi. Podczas budowania modułów te kolory pojawiają się jako szybkie opcje. Zmień swój podstawowy z niebieskiego na zielony tutaj, a każdy moduł za pomocą tych podstawowych zmiennych aktualizuje natychmiastową w witrynie.

Unikaj wcześnie tworzenia nadmiernych zmiennych niestandardowych. Zamiast tego zacznij od tych czterech ustawień wstępnych. Większość stron internetowych może potrzebować tylko tych podstawowych kolorów, z wariantami utworzonymi przez względne sterowanie kolorami Divi 5. Ale oczywiście, jeśli potrzebujesz, możesz dodać tyle zmiennych, ile chcesz.

2. Tworzenie odcieni kolorów z elementami sterującymi HSL

Teraz dodaj kolejną zmienną kolorów. Tym razem zbudujesz odcień z podstawowego koloru zamiast ustawienia nowego koloru podstawowego. W zbierku kolorów wybierz swoją podstawową zmienną kolorów z listy.

Teraz widzisz trzy suwaki: odcień, nasycenie i lekkość. Te kontrolują, jak zmienia się kolor podstawowy.

Odcień porusza się wokół koła kolorów od 0 do 360 stopni. Zostaw to w spokoju, tworząc odcienie tego samego koloru. Nasycenie wynosi od 0% do 100% i kontroluje, jak żywy kolor wygląda. Przy 0%każdy kolor staje się szary. Przy 100%zyskujesz pełną intensywność.

Lekkość działa od 0% do 100%. Ten suwak tworzy twoje rzeczywiste odcienie. O 0 otrzymasz czystą formę swojego koloru. Przenieś do 50% w przypadku jaśniejszych odcieni. Upuść go do -20% na ciemniejsze odcienie.

Możesz mieszać i dopasować te kolory HSL, aby w razie potrzeby budować nowe kolory i warianty.

Utwórzmy dwie odmiany naszego podstawowego koloru. Dodaj zmienną i nazwij swój nowy odcień coś czystego, takiego jak „podstawowe światło” lub „podstawowa ciemność”. Powtórz ten proces, aby tworzyć wiele odcieni. Typowa konfiguracja wykorzystuje podstawową podstawową lekkość 30% dla tła itp., A ciemność przy poziomie -15% lekkości.

Możesz także dodać tak jaśniejsze i ciemniejsze odcienie dla swojego drugiego koloru.

3. Budowanie zagnieżdżonych zmiennych kolorów

W kroku 2 wykonałeś światło podstawowe i przedstawne. Teraz możesz budować więcej kolorów z tych odcieni.

Utwórz nową zmienną o nazwie „Card Tacking Shadow”. Wybierz swoje podstawowe światło z listy. Zrzuć krycie do 50%. Daje to ledwie odcień do tła kart. Następnie utwórz „Poduszanie przycisków”. Wybierz podstawową ciemność. Zrzuć lekkość kolejne 10%, aby było jeszcze ciemniejsze. Teraz twoje przyciski mogą mieć ciemniejszy kolor, gdy ludzie unoszą się nad nimi.

Możesz także budować niestandardowe kolory ze swoich odcieni. Zrób „Tekst Shadow”, wybierając przyciski najeżdżające. Ustaw krycie na 15%. Teraz cień tekstowy łączy się z poduszką przycisku, który łączy się z pierwotną ciemną, która łączy się z pierwotną.

Spróbuj „akcent graniczny” z pierwotnego światła. Nasycenie guza do 100%, aby uczynić to bardziej. Daje to jasną granicę, która wciąż pasuje do Twojej marki. Każdy łańcuch staje się dłuższy. Wszystkie pięć kolorów sięgają jednego głównego wyboru.

Dodaj podobne odcienie dla swojego drugiego koloru, aby wybrać dobry wybór kolorów.

4. Stosowanie względnych kolorów do Twojej witryny

Zbudowałeś swój kolorowy fundament i stworzyłeś wszystkie te odcienie. Teraz przychodzi praktyczna część: wdrażanie ich w swojej witrynie.

Otwórz dowolny moduł w wizualnym budowniczym. Kliknij opcję kolorów dla tła, tekstu lub granic. Twoje zapisane zmienne kolorów pojawiają się tuż wewnątrz zbieracza kolorów. Nie musisz pamiętać o nazwiskach ani kodach sześciokątnych.

Wybierz swój podstawowy kolor głównych przycisków. Wybierz podstawowe światło dla tła sekcji. Użyj pierwotnej ciemności do granic i subtelnych akcentów, takich jak przyciski CTA. Każdy wybór łączy się z systemem kolorów podstawowych.

Twoje zmienne kolorów działają wszędzie: nagłówki, stopki, układy blogów i strony produktów. Członkowie twojego zespołu i klienci mogą wybierać kolory bez zgadywania. W pikiecie widzą „podstawowe światło” zamiast losowych kodów sześciokątnych. Wyraźne nazwy oznaczają mniej błędów i szybsze prace projektowe. Wszyscy wiedzą, który kolor służy, jaki cel.

Ten system oparty na zmiennej zapobiega niespójności wizualnej. Nie będziesz musiał oszczędzać kilkudziesięciu podobnych bluesów ani zastanawiać się, który cień użyć do efektów unoszenia. Twoje zmienne zapewniają strukturę, zachowując elastyczność projektowania.

5. Aktualizacja kolorów w razie potrzeby

Twój klient decyduje, że chce północy niebieskiego zamiast tylko niebieskiego. Dzięki tradycyjnej zarządzaniu kolorami oznacza to godziny przesiewania modułów i ręcznej aktualizacji każdego odcienia lub aktualizacji wielu globalnych kolorów jednocześnie. Dzięki względnym kolorom Divi 5 zmieniasz jedną zmienną i wszystko inne jest następujące.

Twoje podstawowe lekkie tła stają się jasnozielone. Pierwotne ciemne granice przesuwają się na ciemnozielone. Kolory zawisowe przycisków dostosowują się do ciemniejszego niebieskiego. Wszystkie zagnieżdżone relacje, które zbudowałeś, pozostają nienaruszone.

Cień w tle karty miał 15% nieprzezroczystości światła pierwotnego. Staje się 15% nieprzezroczystości nowego zielonego światła podstawowego bez jego dotykania. Tekst Shadow łączy się z poduszką przycisku, który łączy się z pierwotną ciemną, która łączy się z pierwotną.

Stary sposób oznaczał odtwarzanie harmonii kolorów od zera. Zachowujesz relacje podczas zmiany fundamentu, a Twój projekt pozostaje zrównoważony.

Twoje kolory, Twoje zasady

Niespójne użycie kolorów podważa dobry design. Oszczędzasz losowe odcienie z bezsensownymi nazwami, polujesz za modułami w celu aktualizacji i odbudowywanie palet od zera za każdym razem, gdy klienci zmieniają zdanie.

Względne kolory Divi 5 kończą ten koszmar przepływu pracy. Buduj raz z koloru podstawowego i automatycznie obserwuj każdą aktualizację odmiany w Twojej witrynie. System obsługuje kompatybilność przeglądarki, utrzymuje relacje i utrzymuje zorganizowanie kolorów, więc nie musisz bawić się z CSS.

Twój następny projekt zasługuje na lepsze zarządzanie kolorami. Pobierz Divi 5 i zobacz, jak się czuje zorganizowany projekt.