Jak zastosować palety kolorów na swojej stronie Divi?

Opublikowany: 2021-09-05

Niewiele jest rzeczy gorszych w Internecie niż nijakie strony internetowe. Jasne, niektóre strony internetowe celowo wybierają brutalistyczny lub minimalistyczny wygląd (patrząc na twoją Craigslistę), ale nawet te nie są nijakie . Mając solidne palety kolorów to sposób murowany zrobić stronę internetową wyróżniać się z beżowych mas, te banalne monochromatyczne eshops że De Press więcej niż im prasie. Na szczęście Divi oferuje kombinację naszego systemu Magic Color i funkcji Global Colors. Możesz z łatwością zastosować palety kolorów do swojej witryny Divi. Wyniki z pewnością zachwycą odwiedzających.

Ogólne wskazówki dotyczące palet kolorów

Bez względu na to, jak łatwo jest dodać paletę kolorów do swojej witryny Divi, konieczne jest użycie odpowiedniego rodzaju palety dla swojej branży i marki. Jeśli masz już markowe kolory, to jest to oczywisty wybór. Poza zagłębianiem się w teorię kolorów (co jest bardzo interesujące), mamy kilka wskazówek, które mogą pomóc Ci dowiedzieć się, od czego zacząć. nowa paleta kolorów.

1. Zdecyduj się na stronę internetową w ciemnych lub jasnych kolorach

W palecie kolorów, której będziesz używać, niewątpliwie będziesz mieć jasne i ciemne kolory. Kontrast jest obowiązkowy w palecie kolorów, aby treść pisana nie zginęła.

To prowadzi nas od razu do pierwszego pytania, które musisz sobie zadać, gdy chcesz zastosować paletę kolorów do swojej witryny; chcesz stworzyć stronę w ciemnym czy jasnym kolorze? Tylko dlatego, że wybierzesz jeden, nie oznacza, że ​​nie możesz ich połączyć, ale dokonanie wyboru ułatwia wybór palety kolorów.

2. Wybór koloru

Teoretycznie możesz sam określić, ile kolorów chcesz mieć w swojej palecie kolorów. Nie ma standardowego sposobu zastosowania lub określenia palet kolorów. Aby jednak stworzyć ładną równowagę kolorów za pomocą Divi, zalecamy użycie pięciu kolorów.

Aby pomóc Ci zastosować w witrynie pięciokolorowe palety kolorów, wybraliśmy jeden rodzaj metody, który będziemy konsekwentnie stosować do tego samego układu podczas prezentowania różnych palet kolorów. Ale zanim zagłębimy się w to, przyjrzyjmy się różnym typom kolorów, które musisz mieć w swojej palecie kolorów, jeśli chcesz postępować zgodnie z naszą metodą.

Kolory tła

palety kolorów

Upewnij się, że wybrane kolory tła pasują do siebie. Użyjesz tych kolorów tła blisko siebie i uzyskasz piękne rezultaty; muszą mieć pewną harmonię.

Kolor czcionki

zmiany palety kolorów

Następną rzeczą, którą musisz wybrać, jest kolor czcionki. Logicznie rzecz biorąc, kolor czcionki zależy od wybranych kolorów tła. Jeśli wybrałeś jasne kolory tła, upewnij się, że kolor czcionki jest ciemny i odwrotnie.

Kolor hiperłącza i wezwania do działania

zmiany palety kolorów

Wybrany przez Ciebie kolor hiperłącza jest jednym z kolorów, które ożywiają Twoją witrynę. Upewnij się, że ten kolor wyróżnia się spośród innych kolorów w Twojej palecie, ponieważ będziesz go używać w wezwaniach do działania, które umieszczasz w swojej witrynie.

Kolor na ostatnie akcenty

zmiany palety kolorów

Wreszcie, możesz wybrać inny, gotowy do użycia kolor, który wprowadzi kolor do Twojej witryny. Chociaż ten kolor nie jest tak ważny jak kolor hiperłącza, pomoże Ci w uzupełnieniu balansu kolorów w Twojej witrynie.

3. Upewnij się, że jest wystarczająco dużo kontrastu

Jak wspomniano wcześniej, konieczne jest zapewnienie kontrastu między niektórymi kolorami w Twojej palecie kolorów. Jeśli używasz palety kolorów na stronie internetowej, ten kontrast przede wszystkim pomoże ci uczynić czytelną treść, którą udostępniasz. Bo jeśli twoja treść nie jest łatwa do odczytania, jaki jest jej cel?

4. Znajdź odpowiedni balans kolorów

Istnieją różne sposoby określania, jak często chcesz używać określonego koloru z palety kolorów. Stworzenie dobrego balansu kolorów jest konieczne, jeśli nie chcesz, aby poczuli się przytłoczeni kolorami, których używasz w swojej witrynie.

Upewnij się, że używasz bardziej neutralnych kolorów w swojej palecie kolorów przez większość czasu i użyj innych kolorów, aby zaakcentować dostarczaną zawartość.

Jak dodać paletę kolorów do swojej witryny Divi?

Mając to wszystko na uwadze, nadszedł czas, aby zagłębić się w Divi i zastosować nową paletę kolorów Twojej witryny!

Domyślna paleta Divi

Przede wszystkim wejdź do pulpitu WordPress i przejdź do Divi – Opcje motywu . Na karcie Ogólne zobaczysz wpis zatytułowany Domyślna paleta selektorów kolorów . Pozwala to wybrać dowolne 8 kolorów, do których chcesz mieć szybki dostęp za każdym razem, gdy otwierasz opcje kolorów w konstruktorze Divi. Domyślnie są to żywe kolory, których używa wiele osób, ale nie są to kompletna paleta, która powinna być używana na pojedynczej stronie internetowej.

domyślna paleta kolorów

Należy pamiętać, że nie dotyczy to kolorów samej witryny. Przedstawia je tylko jako szybkie opcje w kreatorze.

Wejdź do Divi Builder

Niezależnie od tego, czy ustawisz paletę w ustawieniach Divi, nadal będziesz mieć możliwość zastosowania różnych kolorów do elementów na swojej stronie. Aby to zrobić, przejdź do Divi Builder i wprowadź ustawienia dowolnego modułu, który chcesz dostosować do nowej palety.

narzędzie do wybierania kolorów

Pod aktualnie wybranym kolorem dowolnego elementu zobaczysz ikonę wielokropka (trzy kropki) . Kiedy klikniesz na to, otworzysz narzędzie Divi's Magic Color. Konstruktor bierze pod uwagę ostatnio używane kolory i kolory na samej stronie, aby dać ci serię wielu palet składających się z uzupełniających kolorów, które powinny dobrze ze sobą współpracować.

Ustaw kolory jako globalne

Gdy już zdecydujesz, jakich kolorów chcesz użyć, nadszedł czas, aby ustawić je jako globalne. Kolory globalne można ustawić tak, aby zmieniały się na całej stronie, niezależnie od modułu lub elementu . Oznacza to, że jeśli chcesz zamienić 5 różnych kolorów, nie będziesz musiał tego robić ponad 100 razy, indywidualnie nad wystąpieniami tego koloru. Zrobisz to 5 razy.

Aby rozpocząć, przejdź do dowolnego modułu z próbnikiem kolorów. Pod nim zobaczysz link o nazwie Global . Kliknij go, a ogólna paleta zniknie. W tym miejscu możesz ustawić, jakie kolory mają być dostępne globalnie, klikając ikonę plus + .

światowy

Gdy pojawi się nowy selektor, kliknij zielony znacznik wyboru, aby dodać bieżący kolor jako opcję globalną.

globalne kolory

Nie ma znaczenia, gdzie jest biały okrąg. Wartość szesnastkowa jest dodawana do kolorów globalnych. Zobaczysz teraz domyślny kolor dodany obok ikony plusa. I widać, że kolor został zastosowany do witryny z powodu ikony kształtu kropli na kolorze zamiast zwykłego koła.

kropla oznacza globalny kolor

Dodatkowo możesz kliknąć prawym przyciskiem myszy wybrany kolor i wybrać „Konwertuj na globalny”, aby dodać go do listy.

globalna konwersja divi

Powtórz ten proces dla każdego koloru w wybranej palecie, aby ostatecznie cała paleta została zapisana pod linkiem Global. Jest to bardzo ważne, gdy przechodzisz przez stosowanie nowej palety do wszystkich elementów na stronie.

Zastosuj kolory globalne

Następnie chcesz zastąpić wszystkie wystąpienia tego samego koloru na swojej stronie, które można dostosować globalnie. To, co chcesz zrobić, to wejść do elementu z kolorem, który chcesz zmienić i kliknąć go prawym przyciskiem myszy. Następnie wybierz Znajdź i zamień z menu kontekstowego. Nie zmieniaj tutaj tego koloru na globalny . To część następnego kroku.

Znajdź i zamień

Następny ekran będzie miejscem, w którym zdecydujesz się zastąpić ten kolor swoim globalnym. Upewnij się, że w obszarze Zamień na kliknij Globalny, a następnie wybierz globalny kolor, który chcesz rozciągnąć na stronę. Pamiętaj, aby zaznaczyć pole „Zamień wszystkie znalezione wartości w każdym typie opcji, nie ograniczając się do [wstaw bieżący typ elementu]”. Zapewni to, że bez względu na wszystko, ten kolor zostanie zastąpiony.

znajdź i zamień na global

Teraz możesz edytować ten konkretny globalny kolor, a kiedy to zrobisz, każde jego wystąpienie ulegnie zmianie. Uwaga, nie wybierasz nowego koloru z palety. To zamieni tylko bieżący kolor. Edytujesz kolor, aby zmienić go we wszystkich miejscach, ponieważ oznaczyłeś każde wystąpienie tego pojedynczego koloru jako globalne.

zbieranie kolorów

Możesz edytować go jako zbiorowy za pomocą selektora kolorów. Wystarczy kliknąć kroplę, aby wybrać nową.

edycja kolorów

Potem po prostu powtarza ten proces dla każdego koloru w nowej palecie. Tylko jedna zmiana dla każdego koloru w Twojej palecie. Nie zamiana każdego elementu w określonym kolorze.

Zawijanie

Wybór i zastosowanie globalnej palety kolorów do witryny Divi nigdy nie było łatwiejsze. Możesz skorzystać z naszej funkcji Magiczny kolor, aby pomóc Ci wybrać paletę, a następnie ustawić je jako kolory globalne dla swojej witryny. Gdy to zrobisz, po prostu wybierz kolor, który chcesz zamienić, i użyj wbudowanej funkcji wyszukiwania i zamiany Divi, aby zastąpić te kolory na stronie. Dzięki temu przepływowi pracy na pewno zaoszczędzisz mnóstwo czasu, przeprojektowując różne witryny i zmieniając niektóre z naszych darmowych pakietów układów.

Cieszyć się!

Artykuł wyróżniony obrazem autorstwa ART.ICON / shutterstock.com