Jak dostosować kolory motywu WordPress

Czy chcesz dowiedzieć się, jak dostosować kolory motywu WordPress? Być może znalazłeś motyw, który Ci się podoba, ale paleta kolorów zupełnie nie pasuje do Twojej marki. Istnieje kilka sposobów dostosowania kolorów motywu do własnych potrzeb.

W tym poście przyjrzymy się, jak dostosować kolory motywu WordPress za pomocą kodu i bez niego.

Stwórz swój formularz WordPress teraz

Jak zmienić kolor formularza kontaktowego w WordPress?

Po dostosowaniu kolorów motywu formularze w witrynie powinny pasować do stylu i kolorów. Najprostszym sposobem na to jest użycie WPForms.

Oprócz zbadania, w jaki sposób można dostosować kolory motywu za pomocą kodu i bez kodu, przyjrzymy się również bliżej sposobom korzystania z WPForms w celu uzyskania stylów formularzy. Krótko mówiąc, nowa funkcja Style formularzy sprawia, że ​​dopasowanie formularzy do witryny jest bardzo proste. Pokażemy Ci jak.

Jak dostosować kolory motywu WordPress

Wskoczmy i zacznijmy dostosowywać!

Dostosowywanie kolorów motywu WordPress za pomocą kodu

Jeśli jesteś dobrze zaznajomiony z CSS i nie masz problemów z edytowaniem plików i arkuszy stylów swojej witryny, użycie kodu do dostosowania motywu WordPress jest opcją.

Nie zalecamy jednak edytowania istniejącego pliku. Zamiast tego sugerujemy użycie innej wtyczki do tworzenia i dostosowywania motywów potomnych. Motywy potomne to zasadniczo kopie twojego motywu z tymi samymi atrybutami.

Edycja motywu potomnego to edycja kopii. Jeśli popełnisz jakiekolwiek błędy, możesz zamiast tego powrócić do motywu nadrzędnego. Pomoże to również uniknąć problemów w przypadku aktualizacji motywu nadrzędnego.

Krok 1: Zainstaluj wtyczkę motywu potomnego

Oto kilka propozycji wtyczek, których możesz użyć do tworzenia motywów potomnych:

• Konfigurator motywów potomnych
• Kreator motywów potomnych
• Wygeneruj motyw potomny
• Generator motywów potomnych WP

W naszym przykładzie użyjemy Konfiguratora motywów potomnych.

Krok 2: Skonfiguruj motyw dziecka

Po zainstalowaniu i aktywowaniu wybranej wtyczki motywu potomnego musisz uzyskać do niej dostęp w celu konfiguracji.

Miejsce, w którym wtyczka motywu potomnego pojawia się w WordPressie, może się różnić w zależności od używanej wtyczki. Uzyskaliśmy dostęp do Konfiguratora motywów potomnych, klikając menu Narzędzia na lewym pasku bocznym.

Po zlokalizowaniu wtyczki powinieneś zobaczyć ustawienia lub opcje tworzenia motywu potomnego.

Odkryliśmy, że Konfigurator motywów potomnych przeprowadzi Cię przez ten proces, co jest pomocne i upraszcza skomplikowane zadanie.

Po kliknięciu przycisku Analizuj pojawiły się kolejne kroki. Przejdź przez każdy z tych kroków, a na koniec będziesz gotowy do stworzenia motywu potomnego.

Krok 3: Dostosuj motyw swojego dziecka

Po utworzeniu nowego motywu potomnego kliknij Wygląd »Edytor plików motywu w menu na lewym pasku bocznym.

Gdy znajdziesz się w edytorze plików motywu, po prawej stronie zobaczysz rozwijane menu, w którym możesz wybrać motyw do edycji. Twój motyw potomny powinien znajdować się na tej liście.

Po wybraniu motywu podrzędnego możesz zmienić pliki na 2 sposoby.

Pierwszym sposobem jest edycja CSS bezpośrednio w edytorze plików, jak pokazaliśmy powyżej. Drugim sposobem jest użycie wbudowanego edytora CSS do podglądu zmian w trakcie ich wprowadzania.

Aby uzyskać dostęp do wbudowanego edytora CSS, przejdź do Wygląd »Dostosuj w menu na lewym pasku bocznym.

Na tej stronie zobaczysz podgląd na żywo swojej witryny WordPress wraz z opcjami wprowadzania zmian.

Jak widać w menu opcji, istnieje kilka zmian stylu, które można wprowadzić bez żadnego kodu. Może to zależeć od motywu i tego, co zostało już skonfigurowane.

W ramach tych opcji znajdziesz ustawienia umożliwiające aktualizację kolorów motywu.

Na przykład możesz wybrać, jakiego stylu przycisków chcesz używać w swojej witrynie.

A po wybraniu stylu możesz wybrać niestandardowe opcje kolorów dla tekstu przycisku, tła i obramowania.

Możesz także zmienić rodziny czcionek nagłówka i treści.

Pamiętaj jednak, że na dole znajduje się opcja menu Dodatkowe CSS . Może się okazać, że kod CSS jest nadal wymagany do niektórych zmian, które chcesz wprowadzić w kolorach motywu witryny. Jeśli tak, wpisz niezbędny kod CSS w tym menu rozwijanym i wyświetl podgląd zmian na żywo podczas ich wprowadzania.

Dostosowywanie kolorów motywu WordPress bez kodu

Jeśli martwisz się, że coś zepsujesz podczas zmiany CSS w swoim motywie, istnieje jeszcze łatwiejszy sposób dostosowania kolorów motywu WordPress. Możesz użyć wtyczki bez kodu, takiej jak Thrive Themes.

Thrive Theme Builder to narzędzie do dostosowywania motywów, które pozwala tworzyć własne motywy bez użycia lub znajomości jakiegokolwiek kodu. Ma interfejs typu „przeciągnij i upuść” do dostosowywania interfejsu, a Ty masz kontrolę nad wszystkimi aspektami projektu.

Krok 1: Zainstaluj wtyczkę i zakończ działanie kreatora witryny

Po zarejestrowaniu konta i zainstalowaniu wtyczki uruchamia się kreator witryny.

Możesz także ponownie uzyskać dostęp do kreatora witryny w dowolnym momencie z pulpitu nawigacyjnego Thrive Themes.

Po uruchomieniu kreatora witryny prosi o przesłanie logo i pokazuje, jak będzie wyglądać na jasnym i ciemnym tle. Nawet jeśli używasz jasnego tła, ciemne tło jest ważne, ponieważ ludzie używają trybu ciemnego na swoich urządzeniach.

Następnie możesz wybrać kolor swojej marki. Po kliknięciu pola koloru masz możliwość wyboru koloru za pomocą próbnika kolorów lub za pomocą szesnastkowego kodu koloru.

Przechodząc przez każdy krok kreatora, tworzysz własny niestandardowy motyw.

Wykonując resztę kreatora witryny, dostosujesz wygląd i sposób działania swojej witryny bez konieczności pisania ani jednej linijki kodu. Thrive Theme Builder sprawia, że ​​tworzenie unikalnego motywu witryny jest bardzo proste.

Krok 2: Dokonaj dodatkowych dostosowań z pulpitu nawigacyjnego

Jak wspomnieliśmy wcześniej, zawsze możesz wrócić do kreatora, jeśli chcesz wprowadzić zmiany. Możesz również uzyskać dostęp do tych funkcji za pośrednictwem pulpitu nawigacyjnego. Po zakończeniu działania kreatora klikaj inne opcje, aby wprowadzić dodatkowe dostosowania.

Jeśli chcesz szybko zmienić kolory i logo swojej witryny lub jeśli chcesz przesłać favikonę dla swojej witryny, możesz uzyskać do niej dostęp z kreatora lub z sekcji Branding na pulpicie nawigacyjnym. Podobnie, tutaj możesz zaktualizować typografię.

Po dostosowaniu wszystkich aspektów strony możesz zapisać motyw i od razu zacząć z niego korzystać.

Zmiana koloru formularza kontaktowego w wordpress

Jak wspomnieliśmy wcześniej, kiedy już pracowałeś nad aktualizacją kolorów motywu, chcesz się upewnić, że wszystko inne pasuje.

Weźmy na przykład swoje formularze. Jeśli masz stronę z zaokrąglonymi krawędziami i delikatnymi kolorami, pudełkowa forma z prostokątnymi przyciskami i ostrym kontrastem prawdopodobnie będzie wyglądać co najmniej trochę nie na miejscu.

Wprowadź WPForms. Opcje stylizacji formularzy sprawiają, że dostosowywanie formularzy do motywu jest dziecinnie proste.

Krok 1: Zainstaluj i aktywuj WPForms

Może jesteśmy stronniczy, ale uważamy, że WPForms jest najlepszym narzędziem do tworzenia formularzy. Przyjazny dla użytkownika interfejs typu „przeciągnij i upuść” umożliwia tworzenie i publikowanie pięknych, profesjonalnych formularzy w ciągu kilku minut. Ponadto opcje stylizacji formularzy pozwalają łatwo dopasować style formularzy do motywu witryny WordPress.

Aby rozpocząć stylizację formularzy w celu dopasowania kolorów motywu WordPress, zainstaluj i aktywuj WPForms. Jeśli potrzebujesz wskazówek, zapoznaj się z tym przewodnikiem dla początkujących, jak zainstalować wtyczki WordPress.

Krok 2: Utwórz formularz w WPForms

Po zainstalowaniu i aktywowaniu WPForms nadszedł czas na utworzenie formularza!

Aby rozpocząć, użyj przycisku Dodaj nowy .

Kreator formularzy otworzy się, abyś mógł stworzyć idealny formularz odpowiadający Twoim potrzebom. Zbuduj go od podstaw lub wybierz spośród setek dostosowywalnych szablonów.

Po ukończeniu formularza możesz użyć przycisku Osadź , aby osadzić go w poście lub na stronie w swojej witrynie. Możesz osadzić formularz na istniejącej stronie lub utworzyć dla niej nową stronę.

Krok 3: Edytuj style formularzy w edytorze bloków WordPress

Następnie otwórz wersję roboczą strony w kreatorze stron. W tym kroku musisz użyć edytora bloków WordPress, aby uzyskać dostęp do opcji dostosowywania.

Kliknij osadzony formularz. Opcje stylizacji formularza otworzą się na pasku bocznym po prawej stronie edytora strony. Zobaczysz, że możesz zmieniać style pól, etykiet i przycisków.

Podczas edytowania stylów pól można dostosować rozmiar i promień obramowania obszaru tekstowego. Im większy promień obramowania, tym bardziej zaokrąglony będzie obszar tekstowy. Możesz także wybrać kolory tła, obramowania i tekstu.

Następnie możesz zmienić styl etykiety. Zdecyduj, jaki kolor ma mieć etykieta, a następnie wybierz kolory podetykiety i podpowiedzi oraz komunikatu o błędzie.

Na koniec możesz dostosować styl przycisku.

Aby było jeszcze łatwiej, po dokonaniu wyboru stylu formularza kliknij Opcje zaawansowane. Zobaczysz pole zawierające kod CSS.

To jest niestandardowy kod dla Twojego formularza. WPForms automatycznie generuje go dla Ciebie. Możesz skopiować i wkleić go do pola Zaawansowane we wszystkich swoich formularzach, aby wszystkie pasowały do ​​stylów.

A jeśli chcesz zacząć od nowa, po prostu kliknij Resetuj ustawienia stylu, aby wyczyścić całe formatowanie.

Następnie możesz opublikować swój w pełni stylizowany formularz.

Teraz Twoje formularze pasują do kolorów motywu WordPress i nie musisz pisać ani jednego wiersza kodu, aby to się stało.

Następnie utwórz idealną interaktywną formę

Gotowy na poprawę formy? Teraz, gdy wiesz, jak dostosować kolory motywu WordPress i dopasować styl formularzy, nadszedł czas, aby przejść na wyższy poziom. Mamy kilka wskazówek, jak stworzyć idealny formularz interaktywny, aby utrzymać zaangażowanie użytkowników i zwiększyć liczbę konwersji.

Chcesz wysłać nieodpartą ankietę dla klientów? Sprawdź te przykłady ankiet klientów, aby Cię zainspirować!

Stwórz swój formularz WordPress teraz

Gotowy do zbudowania formy? Zacznij już dziś z najłatwiejszą wtyczką do tworzenia formularzy WordPress. WPForms Pro zawiera wiele bezpłatnych szablonów i oferuje 14-dniową gwarancję zwrotu pieniędzy.

Jeśli ten artykuł ci pomógł, śledź nas na Facebooku i Twitterze, aby uzyskać więcej bezpłatnych samouczków i przewodników WordPress.