Załóżmy, że podoba Ci się ogólny wygląd Twojej witryny lub bloga, znalazłeś doskonałego dostawcę usług hostingowych i jesteś więcej niż zadowolony z wybranego motywu. Jest tylko jedna mała, ale wciąż ważna rzecz, którą chciałbyś zmienić. Czujesz się, jakbyś mógł dodaj bardziej osobisty akcent do swojej witryny WordPress zmieniając jego schemat kolorów. Aby ułatwić Ci ten proces, pokażemy Ci kilka różnych sposobów dostosowywania kolorów WordPress – w tym, jak to zrobić w motywach WordPress Qode Interactive.
Zanim pokażemy, jak zmienić kolory za pomocą opcji Dostosuj, powinniśmy pamiętać, że te konkretne opcje zależą od używanego motywu. Na potrzeby tego artykułu użyliśmy domyślnego motywu WordPress Twenty Twenty-One, więc jeśli używasz innego motywu w swojej witrynie i/lub nie masz tych opcji w swoim motywie, zawsze możesz sprawdzić metodę wtyczki (które omówimy nieco później).
Krok 1
Po pierwsze, po pierwsze, iść do Wygląd >> Dostosuj.
Krok 2
Raz tam, Wybierz Kolory i tryb ciemny patka.
Krok 3
Tutaj znajdziesz opcję zmiany koloru tła witryny, zwaną Wybierz kolor. Powinieneś kliknąć tę opcję.
Krok 4
Otworzy się panel kolorów, którego możesz użyć do dodaj własny kolor lub wybierz ten z palety. Jeśli chcesz skorzystać z drugiej opcji, możesz kliknij w dowolnym miejscu na palecie lub po prostu przeciągnij małe kółko dookoła dopóki nie stworzysz koloru, który najlepiej odpowiada Twoim potrzebom. Alternatywnie możesz również wpisz kod RGB w polu wejściowym po prawej stronie.
Krok 5
Tuż obok palety znajduje się również miejsce, w którym można określ, czy chcesz wybrać jaśniejszy czy ciemniejszy odcień koloru. Możesz to zrobić, przeciągając suwak w górę lub w dół.
Krok 6
Gdy będziesz zadowolony ze swojego wyboru, kliknij Wybierz kolor jeszcze raz.
Jeśli chodzi o elementy Twojej witryny, zawsze będą one obliczane i ustawiane automatycznie, zgodnie z wybranym przez Ciebie kolorem tła. To świetnie, ponieważ gwarantuje, że kontrast między tłem a elementami jest zawsze na tyle wysoki, aby był dobrze widoczny dla użytkowników.
Krok 7
Jeśli planujesz użyć jasnego koloru tła swojej witryny, będziesz mógł również skorzystać z opcji obsługi trybu ciemnego. To ustawienie umożliwia odwiedzającemu witrynę przeglądanie Twojej witryny w trybie ciemnym, czyli jeśli chce, aby była wyświetlana w ten sposób. Po prostu zaznacz opcję „Obsługa trybu ciemnego” a Twoja witryna będzie wyświetlana z ciemnym tłem i jasnym tekstem.
Krok 8
Ponadto, aby wyświetlić podgląd swojego ciemnego schematu, możesz Kliknij na Tryb ciemny: wyłączony przycisk (znajduje się w prawym dolnym rogu ekranu). Ta czynność spowoduje włączenie trybu ciemnego:
Krok 9
Gdy skończysz ustawiać kolory, naciśnij Publikować przycisk i gotowe.
Krok 10
Wreszcie, aby wrócić do pulpitu użytkownika, po prostu Kliknij x przycisk w lewym górnym rogu Dostosuj ekran.
Większość motywów WordPress premium pozwala z łatwością zmieniać ich kolory. Należy jednak pamiętać, że nie wszystkie motywy pozwalają na ten sam poziom dostosowania. Jeśli Twój motyw nie zawiera wielu opcji dostosowywania, zawsze możesz użyć jednego z narzędzi i wtyczek, które można znaleźć w sieci, aby dodać niestandardowe CSS zmienić wszystko, czego potrzebujesz. Oto jak zmienić kolory za pomocą Wtyczka CSS SiteOrigin.
1. Po pierwsze, dostęp do swojego Wtyczki ekran w panelu administracyjnym. Następnie, po znalezieniu wtyczki SiteOrigin CSS, zainstaluj i aktywuj.
2. Idź do Wygląd > Niestandardowy CSS.
3. Po otwarciu edytora CSS kliknij ikonę oka znajduje się w prawym górnym rogu edytora.
4. Teraz po kliknięciu oka pojawi się nowy ekran. Po lewej stronie zobaczysz panel sterowania, natomiast po prawej stronie ekranu będziesz miał podgląd na żywo tego, jak będzie wyglądać Twoja strona podczas edycji.
5. Gdy poruszasz myszą po stronie, zobaczysz elementy na stronie podświetlone po najechaniu na nie kursorem.
6. Po prostu kliknij element, który chcesz zmienić (na przykład kolor tła strony), a nazwa elementu zostanie dodana w lewym górnym rogu panelu sterowania.
7. Teraz Kliknij na Dekoracja patka.
8. Pojawi się kilka nowych opcji, a wśród nich będzie kolor tła.
9. Kliknij pole wejściowei ponownie spotkasz się z próbnikiem kolorów. Możesz wybrać dowolny kolor, przesuwając małe kółko lub wpisując kod koloru RGB w polu wejściowym. Będziesz mógł wyświetlić podgląd wszystkich zmian po prawej stronie.
10. Po wybraniu koloru, zaznacz pole wyboru.
11. Powrócisz do ekranu edytora CSS, gdzie zobaczysz, że Twój CSS został dodany. Wszystko, co musisz zrobić, to kliknij Zapisz CSS.
12. Wtyczka poinformuje Cię, że strona została zaktualizowana. Aby zobaczyć to na żywo, po prostu odśwież swoją stronę.
I w ten sposób możesz użyć wtyczki SiteOrigin CSS do zmiany kolorów na swojej stronie.
Każdy z motywów Qode Interactive jest dostarczany z mnóstwo opcji dostosowywania kolorów dla różnych części Twojej witryny. Istnieją dwa główne miejsca, w których można zmienić schemat kolorów witryny: ogólne ustawienia motywui na każdym sama strona/post.
Jakiekolwiek opcje dostosujesz w ustawieniach ogólnych, będą miały zastosowanie do całej witryny, podczas gdy elementy skonfigurowane na stronie lub poście będą (oczywiście) zastosowane tylko do danej strony/postu.
1. Ogólne ustawienia motywu
Każdy motyw ma własne ustawienia ogólne z opcjami, które można określić dla samego motywu.
Opcje są posortowane w grupy, przy czym każda grupa odnosi się do określonej części witryny. Zapewnia to łatwiejsze zarządzanie witryną. Istnieją pewne grupy opcji, które są dostępne we wszystkich naszych motywach, a niektóre opcje różnią się nieznacznie w zależności od motywu. To, jakie opcje będzie miał motyw, zależy w dużej mierze od celu motywu i jego wymagań.
1. Ogólny opcje
Tutaj możesz ustawić niektóre z najbardziej dominujących kolorów witryny, lubić Pierwszy/drugi kolor główny (główne kolory motywu) i Kolor tła strony. Przypominamy, abyś nie zapominał, że wszystko, co dostosujesz w opcjach ogólnych, będzie dotyczyło całej witryny.
Tutaj znajdziesz również opcje, takie jak Kolor zaznaczenia tekstu (wybierz kolory, które użytkownicy widzą podczas wybierania dowolnego tekstu na Twojej stronie) i Kolor tła modułu ładującego strony (kolor, który można zobaczyć przed załadowaniem strony).
2. Czcionki
Dzięki naszym motywom zmiana kolorów czcionek jest bardzo łatwa. w Czcionki sekcji panelu opcji, możesz ustawić kolory wszystkich nagłówków (od 1 do 6), akapitów, łączy, a także kolory najechania kursorem.
3. nagłówek opcje
Opcje nagłówka to gdzie można znaleźć wszystkie ustawienia związane z nagłówkiem, na przykład typ i wygląd nagłówka. Jeśli chodzi o kolory, możesz dostosować:
4. Mobilny nagłówek opcje
Niektóre motywy mają również oddzielne opcje kolorów nagłówka, który jest wyświetlany, gdy witryna jest wyświetlana na urządzeniach mobilnych. Tutaj możesz dostosować tło, tekst, a także kolory nawigacji.
5. Tytuł opcje
Tutaj możesz ustaw wszystkie kolory, które można znaleźć w Tytuł powierzchnia – Tło, Tytuł tekstu, Podtytuł, oraz Bułka tarta, jeśli są dostępne.
6. Treść na dole opcje
ten Treść na dole jest wyświetlanym obszarem widżetów pod treścią Twoich stron. w Treść na dole sekcji ogólnych opcji motywu, możesz ustawić kolor tła tego obszaru.
7. Stopka opcje
w przeciwieństwie do Tytuł oraz nagłówek opcje, w których możesz dostosować kolor tekstu, tutaj możesz ustawić tylko kolor tła swojej stopki. Kolor tekstu w stopce jest pobierany z widżetów używanych w stopce.
8. Elementy
Niektóre motywy mają ogólne opcje dla określonych elementów/skrótów motywu. Tutaj możesz ustawić domyślne kolory dla tych elementów.
9. Obszar boczny opcje
Niektóre opcje dostępne w Obszar boczny zakładka zawiera Kolor tła nakładki treści oraz Przezroczystość tła nakładki treści. Gdy obszar boczny jest aktywny, te dwie opcje służą do przyciemniania lub zmiany koloru strony w tle. Oprócz tych dwóch opcji, tutaj znajdziesz również opcje kolorów ikony otwierającej i zamykającej obszar boczny.
10. Szukaj opcje
Te opcje są zwykle używane do ustawienie koloru ikony otwierania/zamykania wyszukiwania, ale w zależności od motywu mogą pojawić się również inne opcje.
11. Formularz kontaktowy 7
Tutaj możesz dostosować wszystkie kolory związane z wtyczką Contact Form 7 (świetne narzędzie, które pozwala zbierać informacje, prosić odwiedzających o dodanie ich do listy e-mail itp.). Dostępnych jest wiele stylów, a dla każdego stylu możesz wybrać kolor tekstu, tła, obramowania i przycisku.
Ustawienia strony/postu
Jak wspomnieliśmy wcześniej, jeśli chcesz zmienić opcje kolorów dla określonej strony lub postu, możesz to zrobić na stronie lub w samym poście.
Poniżej obszaru edytora na każdej stronie/postu znajdziesz opcje dla określonych części tej strony lub postu. Oczywiście niektóre opcje ogólne (takie jak opcje obszaru bocznego) nie mogą być konfigurowane na stronie indywidualnie.
Jeśli nie widzisz niektórych z tych opcji w backendzie, oznacza to, że należy je włączyć. Możesz to łatwo zrobić przez dostęp do Opcje ekranu, znajduje się w prawym górnym rogu strony. Tam możesz sprawdzić wszystkie pola, które nie są zaznaczone, a odpowiednie opcje pojawią się w ustawieniach strony/postu.
Wniosek
I na tym kończy się nasz przewodnik dotyczący dostosowywania kolorów witryny WordPress. Jak widać, istnieje wiele różnych sposobów dostosowywania kolorów w WordPressie. Ogólnie, Twoje możliwości będą zależeć od zakresu opcji Twojego motywu. Jeśli nie chcesz być w ten sposób ograniczany, zawsze możesz zainstalować wtyczkę dostosowującą kolory co da Ci większą swobodę w personalizacji kolorów Twojej witryny w dowolny sposób. Jeśli jednak używasz (lub planujesz używać) jednego z motywów WordPress firmy Qode Interactive, jesteś w dużej mierze objęty zakresem dostosowywania kolorów. Obejmuje to również możliwość zmiany koloru tekstu WordPress, kolorów nagłówka i stopki oraz wszelkich innych sekcji i elementów witryny.
Wreszcie, jeśli kiedykolwiek będziesz potrzebować dodatkowej inspiracji, zawsze możesz sprawdzić niektóre z wielu dostępnych kombinacji kolorów, aby uzyskać dobry początek.
Wesprzyj naszą pracę ❤️
Jeśli spodobał Ci się ten artykuł, rozważ pozostawienie napiwku, aby pomóc nam dalej publikować wartościowe treści.
