Jak spersonalizować motyw WordPress, aby pasował do Twojej marki?

Opublikowany: 2017-07-14

Motywy WordPress mają różne formy i rozmiary, ale techniki dostosowywania motywów pozostają podobne. Jeśli wiesz, jak dostosować jeden motyw, znacznie łatwiej byłoby Ci poradzić sobie z innym.

W tym artykule chcielibyśmy omówić motyw WordPress Cloe Brooks dla witryn medycznych i pokazać, jak możesz dostosować jego projekt, układ i zasadniczo uczynić go swoim własnym.

Pusty motyw a zawartość demonstracyjna

Po zainstalowaniu motywu masz dwie opcje: albo zbuduj swoje strony i układy od podstaw, albo zainstaluj wstępnie utworzone dane fikcyjne, które wypełnią strony za Ciebie i sprawią, że Twoja witryna będzie piękna od samego początku.

Każdy sposób ma swoje wady i zalety, na przykład jeśli zdecydujesz się na zaimportowanie danych demonstracyjnych, konieczne może być późniejsze wyczyszczenie witryny i usunięcie niepotrzebnych stron, postów, kategorii itp. Jednak przy czystej instalacji może to być zbyt czas czasochłonne, aby odtworzyć oryginalne układy i ustawienia strony.

Radzimy skorzystać z opcji treści demo i zainstalować pełne dane demonstracyjne witryny. O wiele łatwiej byłoby zastąpić tekst i obrazy własnymi i usunąć resztę danych, niż budować wszystko od podstaw. W końcu usuwanie treści jest łatwiejsze niż tworzenie.

Logo witryny i favicon

Po instalacji treści demo możemy rozpocząć personalizację naszej strony. Najprostszym sposobem, aby to zrobić, jest przesłanie logo i favicon.

Te dwa elementy oddzielają Twoją witrynę od innych i wyróżniają ją.

Jeśli nie masz jeszcze logo, nie martw się. Zamiast tego możesz użyć tytułu witryny. Tytuł witryny wraz ze sloganem nadal może nadać Twojej witrynie profesjonalny wygląd i byłby lepszy niż źle wykonane logo graficzne.

Favicon to kolejny element tożsamości marki, który możesz tutaj ustawić. Jest wyświetlany na początku zakładki w Twojej przeglądarce. Aby przesłać faviconę, użyj obrazu .png o szerokości 512 pikseli.

Aby przesłać logo, przejdź do opcji Wygląd > Opcje motywu > Dostosowywanie iw sekcji „Logo główne” wybierz obraz logo. Jeśli Twoje logo wygląda na zbyt duże lub zbyt małe, możesz to zmienić, dostosowując wartość „Wysokość logo”.

Schemat kolorów

Schemat kolorów jest integralną częścią każdego projektu, a możliwość jego zmiany daje dużą swobodę personalizacji witryny.

Domyślnie motyw Cloe Brooks zawiera kombinację ciepłych i niebieskich pastelowych kolorów. Te odcienie kolorów dobrze pasują do witryny medycznej. Jeśli jednak nie pasują do kolorów Twojej marki lub po prostu chcesz, aby schemat kolorów był nieco inny, możesz je dostosować w panelu opcji motywu.

Przejdź do Wygląd > Czcionki i kolory i wybierz Schematy kolorów . Widać, że Cloe Brooks ma dwa domyślne schematy kolorów, jasny i ciemny. Są przydatne, jeśli chcesz szybko zmienić wygląd swojej witryny i chcesz zachować oryginalne kolory wybrane przez projektanta.

Można jednak również zmienić oryginalne kolory i całkowicie przeprojektować schemat kolorów. Prawdopodobnie najmniej czasochłonnym rozwiązaniem byłaby zmiana akcentów kolorystycznych motywu. W ten sposób możesz natychmiast zobaczyć znaczne zmiany w palecie kolorów witryny. Aby wprowadzić bardziej radykalną zmianę, możesz również dostosować kolory innych elementów witryny, takich jak pola wejściowe, główne i alternatywne kolory tła, kolory akcentów obramowania itp. Są to subtelne zmiany, ale konieczne, jeśli planujesz całkowicie zmienić projekt .

Kolejną świetną rzeczą jest to, że możesz wyświetlić podgląd zmian kolorów i zobaczyć je w połączeniu z innymi elementami witryny w panelu ustawień kolorów.

W niektórych przypadkach możesz zauważyć, że niektóre elementy w demo motywu nie mają nowo przypisanych kolorów. Oznacza to, że kolory tych elementów są przypisywane przez Visual Composer. Możesz otworzyć odpowiednie strony z tymi elementami i poprawić je lub zignorować je, dopóki nie zaczniesz przesyłać treści.

Przydatną opcją jest to, że możesz zapisać bieżące ustawienia schematu kolorów jako nowy schemat kolorów lub powielić istniejący, aby go zapisać w przypadku, gdy chcesz przełączyć się na oryginalne kolory motywu.

Po zakończeniu dostosowywania schematu kolorów przypisz go na karcie Styl nadwozia w Wygląd > Opcje motywu > Dostosowywanie.

Typografia

Chociaż typografia może wydawać się mniej ważna niż schemat kolorów lub obrazy w Twojej witrynie, w rzeczywistości czcionki mają jeszcze większy wpływ na Twoich widzów. Jeśli Twoje treści nie są niewłaściwie stylizowane, czytelnicy będą mieli trudności ze zrozumieniem Twojego przekazu.

Cloe Brooks ma elegancką, niestandardową czcionkę bezszeryfową, ale w razie potrzeby możesz ją zmienić na dowolną inną preferowaną czcionkę. Możesz wybrać dostępną czcionkę z kolekcji Google Fonts lub przesłać własną.

Ustawienia czcionki motywu można znaleźć w Wygląd > Czcionki i kolory > Czcionki. Ustawienia są wszechstronne i zapewniają doskonałą kontrolę nad stylem tekstu w witrynie. Dostosuj czcionki dla takich elementów, jak nagłówki, tekst podstawowy, linki, pola wejściowe, przyciski, elementy menu i nie tylko. Możesz wybrać styl czcionki, grubość, wysokość linii, dekorację, a nawet określić górne i dolne marginesy elementu.

Typografia to subtelna dziedzina, a jeśli jesteś początkujący, możesz łatwo zepsuć. Jeśli nigdy wcześniej nie zajmowałeś się typografią, ale nadal chciałbyś nadać swojemu motywowi inny wygląd, zalecamy zwrócenie uwagi na oryginalne czcionki motywu i zastąpienie ich czcionkami o tym samym stylu. Na przykład, jeśli oryginalny motyw używa czcionki bezszeryfowej, lepiej zastąpić ją inną czcionką bezszeryfową.

Kolejną wskazówką jest zachowanie kontrastu między różnymi grupami czcionek, np. nagłówkami i czcionką treści. Kontrast można uzyskać za pomocą rozmiaru, koloru, grubości czcionki i stylu czcionki.

Konta społecznościowe i informacje kontaktowe

Następnym krokiem byłoby wypełnienie danych kontaktowych i dodanie kont mediów społecznościowych do swojej witryny.

Możesz znaleźć ustawienia mediów społecznościowych, przechodząc do Wygląd > Opcje motywu > Społeczności.

Możesz dodać tyle kont, ile potrzebujesz, określając link do adresu i ikonę swojej sieci społecznościowej.

Aby zintegrować kanał Twittera ze swoją witryną, w tym miejscu musisz podać szczegóły interfejsu API Twittera, takie jak klucz klienta, tajny klucz klienta itp.

Twoje informacje kontaktowe można wprowadzić w Wygląd > Opcje motywu > Informacje kontaktowe. Możesz tam podać swój adres e-mail, adres firmy, godziny otwarcia, numer telefonu i inne. Te informacje będą używane w sekcjach nagłówka i stopki Twojej witryny.

Zawijanie

Chociaż jest wiele innych rzeczy, które możesz dostosować w motywie Cloe Brooks, tutaj omówiliśmy najważniejsze.

Omówiliśmy takie kroki, jak to, czy musimy zainstalować dane demonstracyjne oraz jak przesłać logo i favicon. Dowiedzieliśmy się również, jak poprawić kolorystykę i typografię naszej witryny. Na koniec dowiedzieliśmy się, gdzie dokładnie w naszym motywie możemy określić nasze dane kontaktowe i linki do kont w mediach społecznościowych.

Jak widać, dostosowanie motywu nie jest tak zniechęcające, jak mogłoby się wydawać na pierwszy rzut oka. Wymaga to trochę czasu i cierpliwości, ale jeśli Twój motyw jest odpowiednio zbudowany, proces staje się łatwy i intuicyjny. Jakie masz doświadczenia z dostosowywaniem motywów WordPress? Podziel się z nami swoimi przemyśleniami w komentarzach.