Jak utworzyć system kolorów z Divi 5

Losowe wybory kolorów rzadko prowadzą do spójnego projektu. Jeśli profesjonalnie budujesz strony internetowe, potrzebujesz celowego systemu. Możesz zbudować prawdziwy system kolorów wewnątrz Divi 5 przy użyciu zmiennych zarządzania kolorami i projektowaniem. Są to kolory, które wyznaczasz bezpośrednio w edytorze wizualnym, możesz uzyskać dostęp do dowolnego pola kolorów i wyposażone w wiele innych udogodnień (które pokażemy poniżej).

Ten post pokaże, jak skonfigurować elastyczny, skalowalny system kolorów w Divi 5.

Co to jest system kolorów?

System kolorów jest w zasadzie wcześniej zaplanowaną paletą kolorów używanych konsekwentnie w Twojej witrynie. Pomaga wszystko wyglądać celowo w stylu, a nie losowo zrzuconym razem. Do dobrego systemu zwykle potrzebujesz:

• Kolor podstawowy : główny kolor marki.
• Kolor wtórny : Wsporniki i kontrastuje z pierwotnym.
• Kolor tekstu : jasne i czytelne dla nagłówków i akapitów.
• Accent : Inne kolory dla alertów, powiadomień i innych ważnych rzeczy (opcjonalnie).
• Kolory tła : zazwyczaj neutralne lub subtelne odcienie.

Reguła 60-30-10 dotyczy koloru w projektowaniu stron internetowych. Zasadniczo neutralne kolory (takie jak tło sekcji i przestrzeń ujemna) byłyby używane dla 60%konstrukcji, podstawowego koloru dla 30%i wtórnych/akcentów dla pozostałych 10%.

Jak wybrać kolory stron internetowych

Kolory marki i kolory używane w Twojej witrynie nie są decyzjami, które należy podjąć lekko. Tworzenie celowej palety kolorów zależy od umiejętności projektanta, psychologii kolorów, branży i zróżnicowania marki. Ale gdy masz podstawowe kolory i zasoby marki (takie jak odmiany logo), możesz zacząć tworzyć system projektowy.

Możesz wykonać kilka szybkich zadań, aby przygotować się do kompilacji witryny, jeśli masz ograniczone zasoby projektowe. Po pierwsze, zrób pobieżny odczyt psychologii kolorów. Poszukaj wartości marki, które chcesz przekazać (zaufanie, młodzieńość, innowacje itp.) I spróbuj dopasować kolory w oparciu o te wartości. Następnie spójrz na niektóre marki domowe, które według ciebie pasowały do ​​wartości marki. Jakich kolorów używają? Jak wykorzystują je na swojej stronie internetowej, reklamach i postach społecznościowych?

Wartości Twojej firmy mogą być nawet określone przez rodzaj wykonanej pracy. Ślusarze i hydraulicy muszą być niezawodne, więc niebieski to świetny sposób na przekazanie tego. Planiści finansowi i krajobrazu zajmują się wzrostem i zrównoważonym rozwojem (w odpowiednich dziedzinach), więc zielony jest tam dobrą kotwicą. Rolnicy kwiatów, centra opieki nad dziećmi i restauracje mogą pochylać się na czerwono i żółci, aby połączyć energię i witalność z ich markami. Gdy masz ogólny pomysł, użyj czegoś takiego, aby stworzyć prostą paletę.

Budowanie systemu kolorów w Divi 5

Divi 5 jest wyposażony w menedżer zmiennych projektowych, który jest najłatwiejszym sposobem obsługi globalnych kolorów. W nim masz cztery wstępnie przypisane globalne kolory do pracy z pudełka. Są:

1. Kolor podstawowy
2. Kolor wtórny
3. Kolor tekstu
4. Kolor tekstu nadwozia

Krok 1: Zdefiniuj swoje kolory podstawowe jako zmienne

Na lewym pasku bocznym Divi otwórz menedżera zmiennych projektowych. Znajdź sekcję kolorów i powinieneś zobaczyć te cztery różne wartości domyślne.

Te cztery etykiety nie mogą zostać usunięte, ale możesz wybrać, jaki kolor należy ustawić. Oprócz tych czterech możesz dodać tyle kolorów, ile chcesz, klikając przycisk Dodaj globalny kolor . Śmiało i wprowadź wartości sześciokątne kolorów z generatora kolorów.

Zmienne te natychmiast stają się dostępne wszędzie w Builder Divi's Visual Builder, który jest bardzo przydatny. Ale pamiętaj, aby je zapisać!

Krok 2: Twórz odcienie i odcienie z kolorami HSL

Korzystając z filtrów HSL Divi, możemy tworzyć odcienie (jaśniejsze wersje naszych kolorów) i odcienie (ciemniejsze wersje naszych kolorów). W tym projekcie będziemy dokonywać tylko wariantów dla kolorów pierwotnych i wtórnych. Możesz użyć generatora palety kolorów, aby utworzyć te warianty kolorów.

Pierwszym krokiem jest stworzenie kolejnego globalnego koloru. Jednak zamiast wkleić wartość sześciokątną, wybierz istniejący kolor, aby tworzyć warianty (odcienie i odcienie).

Teraz musimy zastosować filtr do tego koloru podstawowego, aby utworzyć wariację. Kliknij układ kolorów, a następnie wybierz „Filtruj kolor” lub kliknij próbkę kolorów, aby uzyskać nową względną zmienną kolorystyczną.

Zrób to dla każdej warianty kolorów. Pamiętaj, aby podać swoje warianty kolorów rozpoznawalne i zapisz.

Na przykład, ponieważ kolor podstawowy jest dość ciemny, możemy dodać kilka lżejszych odcieni i kilka ciemniejszych odcieni. To powinno dać mi wiele opcji, gdy zastosujemy mój system kolorów do projektu strony.

Powtórz powyższe kroki dla kolorów wtórnych i/lub akcentowych. Podczas tworzenia tych wariantów zawsze wybierz kolor podstawowy, a następnie zastosuj na nim filtry. W ten sposób, jeśli kiedykolwiek zmienisz swój podstawowy kolor, te odmiany pójdą w ich ślady.

Stosując kolory w projektach za pomocą Divi

Twoje zmienne istnieją teraz. Czas ich użyć. Zaczniemy od pustej strony Divi i pracujemy sekwencyjnie w kierunku ładnie zaprojektowanego układu.

Krok 1. Utwórz szkielet swojej strony

Możesz zacząć od szkieletu zamiast pustej strony, która może pomóc lepiej zrozumieć system kolorów. Po zrozumieniu ogólnej struktury i przepływu strony możesz zacząć dokonywać wyborów projektowych. Możesz także użyć jednego z wielu pakietów lub stron startowych Divi. Nie ma znaczenia, czy mają już zdefiniowane kolory; Możemy łatwo je zmienić.

W tym przykładzie postanowiliśmy zmodyfikować pakiet układu konsultacyjnego i skorzystać z układu strony głównej. Jeśli zrobisz coś podobnego, możesz zaimportować ustawienia wstępne. Będziesz jednak chciał edytować kolory w tych ustawieniach. Dla prostoty zmodyfikujemy style bezpośrednio na poziomie modułu/elementu.

Krok 2. Typografia i kolor

Domyślnie Divi używa globalnych kolorów nagłówka i tekstu nadwozia, dzięki czemu tekst jest czysty i czytelny. Zawsze możesz zastąpić te z góry określone wybory kolorów, zmieniając kolor tekstu na modułach lub ustawieniach, ale nie powinieneś tego robić zbyt często.

Zwróć uwagę, w jaki sposób kolor nagłówka jest niepewny w module. Divi automatycznie przypisuje dla Ciebie globalny kolor do nagłówków i tekstu nadwozia. Oczywiście możesz go zastąpić, wybierając inny kolor.

Możesz dostosować kolor, który łączy, aby były bardziej zauważalne i przyciągnąć kliknięcia.

Mogą istnieć inne moduły (oprócz modułów nagłówkowych i tekstowych) z tekstem, który chcesz stylizować. Moduły takie jak formularz kontaktowy, licznik odliczania i moduł blogu mogą wymagać jednoznacznego stosowania kolorów.

Krok 3. Przyciski stylizacji

Przyciski Divi są domyślnie proste i przyjmują twój podstawowy kolor. Ale nie jesteś zmuszony do tej decyzji, jeśli chcesz czegoś innego. Otwórz panel Ustawienia modułu, przejdź do zakładki Projekt i wybierz przycisk . W ustawieniach przycisków włącz „Użyj niestandardowych stylów przycisku”. Ustaw swoje tło na wybrany globalny kolor i tekst przycisku na czytelny kolor, jak biały.

Jeśli masz dwa przyciski obok siebie lub wiele przycisków na stronie, możesz utworzyć osobny ustawień przycisków dla wtórnego stylu przycisku przy użyciu drugiego koloru lub innego akcentu.

Utwórz stany zawisowe z odcieniami i/lub odcieniami

Państwa zawisowe dodają interakcje i poczucie celu. Użyj wcześniejszych odcieni i odcieni ze stylami zawisowymi. Wdrożenie przycisków jest oczywiste, ale można go używać również subtelnie w innym miejscu.

Kliknij ikonę kursora obok opcji koloru tła, aby włączyć stany zawieszające. Ustaw kolor tła najemnika. Kiedy użytkownicy unoszą się nad przyciskiem, wizualnie reaguje, naturalnie prowadząc interakcję.

Krok 4. Tworzenie sekcji z kolorowymi ustawieniami i gradientami

Sekcje w Divi domyślnie mają przejrzyste tła. Oznacza to, że jeśli pozostaną niezatrzymane, zwykle pokazują się jako biały. Możesz dodać trochę intrygi, tworząc neutralne odmiany kolorów w oparciu o odcień jednego z głównych kolorów.

Ten kolor tła jest bliski czarnej, ale ma ten sam podstawowy odcień, co główny kolor, który nadaje mu subtelną spójność „na temat”.

Możesz także eksperymentować z gradientami za pomocą wariantów kolorów. Sztuką tutaj nie jest użycie zbyt wielu kombinacji kolorów. Chcesz zdyscyplinowanego, spójnego designu opartego na parach kolorów i hierarchii.

W tym momencie przypomnienie jest w porządku. Chcesz zaoszczędzić większość tych par kolorów i decyzje na ustawienia wstępne (grupa opcji lub ustawienia wstępne). Po utworzeniu i wdrożeniu zmiennych projektowych w projekcie za pośrednictwem ustawień wstępnych, możesz użyć swojego systemu projektowego, aby tworzyć kolejne strony znacznie szybciej. Zapewnia to również pracę ze spójnymi wzorami projektowymi w całej witrynie.

A jeśli później ustalisz, że kolor jest nieco wyłączony, możesz dostosować wartości HSL koloru podstawowego, a wszystkie instancje tego koloru (i wszystkie kolory stosunkowo utworzone na podstawie tego koloru) zmieni się dla Ciebie.

Podsumowanie systemu kolorów Divi 5

Przemyślany system kolorów jest jednym z najłatwiejszych zwycięstw w projektowaniu stron internetowych, a Divi 5 daje narzędzia, które sprawią, że działał dla Ciebie. Mając zaledwie kilka kroków, możesz:

• Zdefiniuj swoje podstawowe kolory marki jako zmienne projektowe wielokrotnego użytku
• Rozszerz je na przydatne odcienie i odcienie z filtrami HSL
• Zastosuj je konsekwentnie w tekście, przyciskach, formularzach i sekcjach
• Zapisz swoje wybory jako ustawienia wstępne, aby każda nowa strona była zgodna z tymi samymi zasadami

Wypłata jest większa niż estetyka. Silny system kolorów stwarza przejrzystość, kieruje odwiedzającymi w kierunku działania i sprawia, że ​​Twoja marka czuje się spójna na każdym zakątku Twojej witryny. A ponieważ wszystko w Divi jest oparte na zmiennych, jedna regulacja do koloru podstawowego może natychmiast przetrwać całą stronę. Oznacza to mniej majsterkowania i większą pewność, że Twój projekt będzie utrzymywał razem podczas skalowania.