Czy chcesz dowiedzieć się, jak dostosować motyw WordPress za pomocą Wtyczka Elementor ?
Dostosowywanie motywu WordPress jest jednym z głównych zadań podczas tworzenia witryn WordPress. Ponieważ kontroluje projekt strony internetowej, większość czasu spędza na niej wielu profesjonalistów.
Tworzenie niestandardowego motywu WordPress zwykle wymaga pracy z plikami motywu i edytorem kodu. Zmiany układu zachodzą w plikach szablonów, zmiany projektu za pośrednictwem CSS. Ponadto będziesz musiał stale odświeżać okno przeglądarki, aby pokazać swoje dostosowania, co może być nieco uciążliwe.
Na szczęście z Elementor, ten proces staje się niezwykle łatwy, więc warto to sprawdzić.
Ale wcześniej odkryjmy razem Jak zainstalować WordPress blogu kroki 7 et Jak znaleźć, zainstalować i aktywować WordPress na swoim blogu.
Wróćmy do tego, dlaczego tu jesteśmy.
Co to jest motyw WordPress
Motyw WordPress to w istocie zbiór szablonów, które definiują wygląd witryny WordPress.
Motyw WordPress obejmuje wszystko, co wpływa na projekt witryny internetowej, od nagłówków i stopek po schemat kolorów, układ i nie tylko.
Dostępnych jest wiele motywów, zarówno bezpłatnych, jak i premium, które pasują do niemal każdej branży portale fotograficzne, witryny klubów siłowni, strony internetowe salonów fryzjerskich, prawnicze strony internetowe, i wiele więcej.
Po co dostosowywać motyw WordPress?
Jednym z głównych powodów tworzenia strony internetowej jest promocja Twojej firmy. Czy jest lepszy sposób na zrobienie tego niż stworzyć stronę internetową unikalny, który promuje styl i design firmy.
Czy możesz sobie wyobrazić, że Amazon, eBay lub Google są tym, czym są bez ich unikalnego projektu?
Oczywiście, że nie i to jeden z powodów, dla których chcemy dostosować motyw WordPress. Chcemy, aby był wyjątkowy i dostosowany do przesłania naszej firmy.
Czasami, a raczej często, korzystasz z motywu WordPress, który jest nękany przez kiepski projekt, kolory, które nie pasują do siebie lub motyw, który jest zbyt ciężki i wpływa tylko na wydajność witryny. sieć. Motyw WordPress może być potężny, z wyjątkiem tego, co ci przeszkadza. Dostosuj go i zmień to, co może rozwiązać wszystkie twoje problemy i stworzyć lepsze wrażenia użytkownika.
Jak dostosować motyw WordPress
Istnieje kilka metod dostosowywania motywu WordPress.
- Ręcznie, za pośrednictwem modułu dostosowywania WordPress
- Z kodem
- Z Elementorem
Jak ręcznie dostosować motyw WordPress
Możesz dostosować wybrany motyw WordPress za pomocą wbudowanego narzędzia WordPress Customizer. Jeśli robisz to bez kodu, często jesteś ograniczony w tym, co możesz zmienić. Niektóre Motywy WordPress premium pozwala na więcej opcji dostosowywania, ale w istocie nie ma dla ciebie zbyt wielu opcji projektowania.
Zanim zagłębimy się w ten obszar, chcielibyśmy zwrócić uwagę, że podczas dostosowywania istniejącego motywu WordPress najlepiej jest użyć motyw potomny, a nie motyw nadrzędny.
Motyw potomny WordPress
Motyw potomny to motyw WordPress, który ma dokładnie takie same funkcje i cechy jak inny motyw WordPress, motyw nadrzędny. Motyw potomny służy do bezpiecznego dostosowywania i modyfikowania motywu bez wpływu na motyw nadrzędny i bez utraty możliwości jego aktualizacji.
Modyfikator motywu WordPress
Teraz, gdy wiemy, że najlepiej jest pracować z motywem potomnym, nauczmy się, jak dostosować motyw za pomocą dostosowywania WordPress. Aby uzyskać do niego dostęp, przejdź do pulpitu nawigacyjnego, kliknij apparence po lewej stronie i wybierz Nadać cechy osobiste.
Główne funkcje, które możesz modyfikować za pomocą tego modułu dostosowania, są następujące:
Dodanie tytułu, logo i ikony serwisu
Aby dodać lub zmienić tytuł, logo lub ikonę, możesz po prostu przejść do panelu Identity na stronie internetowej. i wybierz każdy z tych elementów, aby je zmodyfikować.
Zmiana kolorów motywu WordPress
kilka Motywy WordPress pozwoli ci zmienić ich schematy kolorów, ale nie wszystkie i zwykle tak jest Motywy WordPress premia. Jeśli motyw WordPress umożliwia zmianę schematu kolorów, zobaczysz tę opcję po uzyskaniu dostępu do modułu dostosowywania.
Dodanie menu nawigacyjnych
Konfigurator umożliwia również łatwe dodawanie i modyfikowanie menu nawigacji w witrynie.
Jak dostosować motyw WordPress za pomocą kodu
Zauważysz, że w zakładce Wygląd masz możliwość wyboru edytora motywów. Kliknięcie go przywita Cię oknem z kodem motywu. Ta opcja wymaga dobrego zrozumienia kodowania CSS i nie jest zalecana dla początkujących.
Tutaj będziesz miał dostęp do plików takich jak style.css, funkcje.php, i to jest dokładnie ten scenariusz, do którego będziesz potrzebować motywu potomnego, aby nie uszkodzić swojej witryny.
Innym sposobem dostosowania motywu przez kodowanie jest przesłanie plików za pomocą rozwiązania FTP. Proces obejmuje utworzenie poświadczeń FTP za pośrednictwem dostawcy usług hostingowych, pobranie i zainstalowanie rozwiązania FTP (takiego jak FileZilla), zalogowanie się na swoje konto i edycję plików, które następnie prześlesz przez to samo. Rozwiązanie FTP.
Odkryj nasz przewodnik na Jak zainstalować WordPress z FileZilla
Jeśli nie jesteś zaznajomiony z kodowaniem, nie zalecamy tej opcji.
Łatwo dostosuj motyw WordPress za pomocą Elementora
Możesz to zrobić bezpośrednio z interfejsu użytkownika. Nie ma potrzeby zmieniania ani jednej linii kodu ani ponownego ładowania okna przeglądarki, nawet raz.
Elementor pozwala szybko i łatwo zmienić każdy element witryny za pomocą kilku kliknięć myszką, a nawet zoptymalizować te funkcje pod kątem platformy mobilnej.
Elementor znacznie ułatwia ten proces, wykorzystując zawartość dynamiczną i umożliwiając podgląd stron. W ten sposób możesz od razu zobaczyć, jak zmiany w projekcie wpłyną na twoją rzeczywistą witrynę i zawartość.
Dostosuj nagłówek i stopkę
Elementor zapewnia pełną elastyczność, jeśli chodzi o projektowanie nagłówków i stopek. Wszyscy wiemy, jak nudne może być, że masz motyw WordPress i nie możesz zmienić ani jednego aspektu projektu nagłówka lub stopki. Potrzebujesz specjalistycznych motywów, wtyczek itp.
Z Elementorem to proste.
1. Utwórz szablon nagłówka
Najpierw skonfiguruj nowy szablon nagłówka. Aby to zrobić, przejdź do Elementor> Moje szablony.
Tutaj jednym ze sposobów na rozpoczęcie jest naciśnięcie przycisku Dodaj nowy u góry. Na następnym ekranie użyj menu rozwijanego, aby wybrać Nagłówek jako typ szablonu do zaprojektowania.
Możesz także przejść do tego ekranu, klikając zakładkę Nagłówek z poprzedniego ekranu, a następnie naciskając duży zielony przycisk, który się pojawi.
Wstępnie wybierze nagłówek jako typ szablonu. Tak czy inaczej, musisz dodać odpowiednią nazwę dla szablonu (abyś wiedział, co to będzie później), a następnie kontynuuj, klikając Utwórz szablon.
To cię tu zabierze.
Dzięki Elementor Pro możesz wybierać spośród wstępnie zaprojektowanych bloków nagłówka. Są to szablony projektowe, których możesz użyć jako punktu wyjścia dla własnego projektu, co zamierzamy zrobić w tym przypadku.
Gdy najedziesz kursorem na blok nagłówka, kliknij wstawka umożliwia natychmiastowe rozpoczęcie projektowania. W przeciwnym razie najpierw kliknij obraz, aby wyświetlić większą wersję. Wtedy zawsze możesz nacisnąć wstawka u góry.
W przeciwnym razie, jeśli chcesz zacząć od zera, po prostu zamknij okno, klikając X w prawym górnym rogu.
2. Zmień podstawowy projekt nagłówka
Po wprowadzeniu nowego nagłówka pierwszą rzeczą, którą zauważysz, jest to, że logo i menu, które skonfigurowaliśmy wcześniej, już tam są.
To jest dokładnie powód, dla którego je połączyliśmy i porozmawiamy o tym, jak je dostosować. Jednak najpierw zobaczmy, jak dostosować samą sekcję nagłówka.
Aby to zrobić, po prostu najedź na niego i kliknij przycisk edycji u góry. Spowoduje to otwarcie listy opcji edycji po lewej stronie.
Oto, czym możesz sterować w różnych menu:
- układ - Kontroluj szerokość sekcji, rozmiar przestrzeni między kolumnami, wysokość, pionową kolumnę i rozmieszczenie treści, przypisany tag HTML i ogólną strukturę.
- Styl - Tutaj możesz zmienić kolor tła, w tym efekty najechania kursoremnawet dodaj obraz lub wideo jeśli chcesz, dodaj efekty nakładki, obramowania i separatora, a także zmień ustawienia typografii.
- Zaawansowane - Ta część umożliwia dodawanie atrybutów CSS, takich jak margines, indeks z, animacje, identyfikatory i klasy. Pozwala także uczynić sekcję lepką i kontrolować ustawienia responsywne, a także dodawać niektóre Niestandardowy CSS.
Wszystkie powyższe są dość oczywiste i szybko dostaniesz to, czego chcesz.
3. Dostosuj elementy nagłówka
Możesz jednak edytować nie tylko całą sekcję nagłówka, ale także zawarte w niej elementy. Na przykład, aby dostosować logo witryny, po prostu je kliknij. To również zapewni opcje edycji po lewej stronie.
W przypadku logo daje to następujące możliwości:
- Treść - Zmień rozmiar obrazu, wyrównanie i miejsce, z którym jest połączony.
- Styl - Kontroluj szerokość i wysokość, dodawaj efekty CSS i efekty najechania kursorem, dołączaj obramowanie i cień, jeśli chcesz.
- Zaawansowane - Tutaj znajdziesz zasadniczo te same opcje, co w sekcji nagłówka.
Użyj ustawień, aby dostosować logo tak, jak chcesz, aby było dobrze wyświetlane w nagłówku. Pamiętaj również, że każdy element ma swój własny typ opcji, więc koniecznie sprawdź każdy z nich.
4. Dodaj elementy
Oczywiście z Elementorem możesz również dodawać elementy do nagłówka. Wystarczy kliknąć symbol w prawym górnym rogu, aby zobaczyć, co jest dostępne.
Podczas edycji szablonu nagłówka, Elementor automatycznie wyświetla odpowiednie bloki na górze listy, co ma największy sens w danych okolicznościach. W tym przypadku są to takie rzeczy, jak logo witryny, menu nawigacyjne i tytuł witryny.
Na przykład, jeśli chcesz dodać tytuł witryny obok logo, po prostu przeciągnij go i upuść. Jednak szablon nagłówka, który obecnie wybraliśmy, pozwala nam dodać go powyżej lub poniżej logo. Ale jest to problem, który będzie można łatwo rozwiązać.
W takim przypadku najedź kursorem na nagłówek i użyj symbolu plusa –+-aby dodać sekcję powyżej.
Kliknij tutaj na fioletowy przycisk, aby wybrać projekt z trzema kolumnami.
Następnie przeciągnij elementy z istniejącej sekcji nagłówka do nowej sekcji i dodaj tytuł strony w środku.
Ale poczekaj, styl jest zupełnie inny! nie ma problemu. Kliknij prawym przyciskiem myszy istniejący nagłówek i wybierz Kopiuj. Następnie kliknij prawym przyciskiem myszy nową sekcję i kliknij tutaj Wklej styl. Elementor zastosuje wówczas styl istniejącej sekcji, którą możesz później zamknąć.
Możesz wykonać ten sam proces z dowolnym innym elementem nagłówka i oczywiście ze wszystkimi innymi elementami zawartymi w Elementorze.
Dostosuj unikalny szablon posta
W Elementorze możesz także dostosować szablon pojedynczego posta. Oto jak :
1. Utwórz nowy model
Tworzenie szablonu działa w zwykły sposób. Jednak tym razem wybierz Jedna jako typ modelu. Następnie poniżej wybierz unikalny szablon, który chcesz edytować. W tym przykładzie z Post.
Jeśli chcesz stworzyć nowy projekt strony, edytuj stronę 404 (więcej na ten temat później) lub edytuj niestandardowy typ posta w szczególności wybierzesz coś innego. W obu przypadkach wprowadź nazwę i kontynuuj.
Na następnym ekranie możesz normalnie wybierać spośród predefiniowanych szablonów. Jednak w tym przypadku chcemy stworzyć nowy model od podstaw. Więc kliknij X w prawym górnym rogu, aby zamknąć to okno.
2. Skonfiguruj podgląd
Następnie ustaw okno podglądu na istniejący post. Możesz to zrobić, klikając ikonę oka u dołu opcji edytora, a następnie Ustawienia.
W menu, które zostanie otwarte, pod Podgląd dynamiczna zawartość, wybierz Publikować. Następnie w następnym wierszu możesz wyszukać i wybrać istniejący post według nazwy.
Gdy to zrobisz, stuknij Aplikuj & Podgląd. Chociaż w tym momencie nie będziesz w stanie nic zobaczyć (ponieważ nic nie ma na stronie), poinformuje Elementor, aby od teraz korzystał z danych w tym poście. Wkrótce przekonasz się, co to oznacza.
3. Utwórzmy sekcję powyżej
Najpierw utworzymy powyższą sekcję. Tutaj zwykle znajdziesz takie rzeczy, jak tytuł posta i metadane, takie jak autor, data i kategoria.
Pierwszym krokiem jest kliknięcie znaku + i tworzenie sekcji z pojedynczą kolumną.
Gdy to zrobisz, w sekcji układu możesz kontrolować jego szerokość, wysokość, położenie i styl. W tym przypadku nie ma tu wiele do zrobienia. Nie martw się, zawsze możesz wrócić i wprowadzić zmiany później.
Następnie przeciągnij widżet tytułu posta do nowej sekcji.
Kiedy to zrobisz, użyj wszystkich dostępnych opcji, aby dostosować projekt i układ do swoich upodobań. Na przykład oto moje ustawienia, jak to zrobić:
Jest też fajna funkcja, której powinieneś się nauczyć. Po kliknięciu symbolu klucza w tytule postu możesz dodać statyczną zawartość przed i po danych dynamicznych.
Na przykład, jeśli utworzysz szablon dla określonej kategorii postów, takiej jak wiadomości lub przepisy, możesz dodać go do tytułu posta w następujący sposób:
W ten sposób te dane pojawią się dla każdego posta w tej kategorii. Nie zamierzam tego używać w tym momencie, ale pomyślałem, że to dla ciebie ważna uwaga dodatkowa.
Pod tytułem wpisu wstawimy Post Informacia widget aby wyświetlić metadane postu.
Oto ustawienia, których używam:
Dodatkowo użyłem opcji stylizacji, aby projekt pasował do reszty strony. Upewnij się, że robisz to samo.
4. Skonfiguruj treść wiadomości
Po nagłówku czas na utworzenie treści strony. Jeśli chcesz, aby ta część miała inny wygląd niż nagłówek, musisz skonfigurować nową sekcję. Jednak utrzymuję to w prostocie, więc nie muszę.
Pierwszą rzeczą, którą chcemy wstawić, jest wyróżniony obraz. Aby to zrobić, możesz umieścić widżet o tej samej nazwie pod tym, co już znajduje się na stronie.
W zasadzie nie zmieniłem żadnych ustawień, po prostu zostawiłem wszystko tak, jak jest.
Następnie nadszedł czas na opublikowanie treści. Tutaj też masz odpowiedni blok.
Zauważysz, że w przypadku polecanych obrazów i treści postów Elementor automatycznie pobiera to, co jest już na stronie. Wprowadź wszelkie potrzebne zmiany w projekcie nowego bloku, na przykład baw się ustawieniami typograficznymi.
Poza tym to wszystko. Nie ma tu zbyt wiele pracy, żebyśmy mogli przejść do ostatniej części.
5. Skonfiguruj stopkę
W tym przypadku chcemy, aby stopka pokazywała profil autora, opcje udostępniania i komentarze czytelników. Aby to zrobić, najpierw musimy utworzyć nową sekcję z dwiema kolumnami. Aby uzyskać więcej miejsca dla profilu autora, możesz ustawić go na układ 66.33.
Następnie umieść widget Pole autora w lewej części.
Pamiętaj, aby dostosować styl do swoich potrzeb. Dodałem trochę koloru tła i nieznacznie dostosowałem ustawienia typografii.
Następnie nadszedł czas, aby dodać blok Przyciski udostępniania po prawej stronie.
Możesz zobaczyć moje ustawienia na powyższym zrzucie ekranu.
Następnie wystarczy utworzyć sekcję jeszcze jedną kolumnę w dół i przeciągnąć i upuścić do niej widżet Publikuj komentarze.
(Nawiasem mówiąc, jeśli kiedykolwiek będziesz miał problemy ze znalezieniem któregokolwiek z tych widżetów, po prostu użyj funkcji wyszukiwania).
Wprowadź wszelkie poprawki w sekcji komentarzy, które uważasz za konieczne (zostawiłem ją tak, jak jest) i jesteś gotowy do publikowania. Oto gotowy projekt:
Dostosuj szablon archiwum
1. Skonfiguruj szablon archiwum WordPress
Na razie znasz już rozwiązanie dotyczące tworzenia nowych modeli. Jedyna różnica polega na tym, że w tym przypadku wybierzesz Archiwum jako typ modelu.
Następnie, jak zwykle, masz do wyboru kilka klocków lub możesz również stworzyć własny model od podstaw. Jednak w przypadku archiwów masz tylko dwa widgety Elementor, które i tak są ważne.
2. Podaj tytuł archiwum
Pierwszy blok, o którym chcę porozmawiać, to tytuł archiwum Tytuł archiwum.
Oprócz zwykłych ustawień w ramach Styl i zaawansowane, można znaleźć ważną opcję, klikając symbol klucza pod Tytuł.
Tutaj możesz włączyć i wyłączyć, czy Elementor wyświetla typ archiwum na stronie, tak jak część, w której jest napisane Autor: poniżej. Dzieje się to za pomocą przycisku poniżej Uwzględnij kontekst.
Nawiasem mówiąc, jak zwykle możesz przeglądać różne archiwa za pomocą ustawień podglądu (Symbol oka> Ustawienia). W ten sposób możesz zobaczyć projekt unikalnych kategorii, tagów, autorów i nie tylko. Miej to na uwadze.
3. Skorzystaj z bloku publikacji archiwalnych
Drugim ważnym widgetem dla archiwów jest Archive Posts. Spowoduje to umieszczenie wszystkich postów należących do dowolnego archiwum na jednej stronie. Kiedy wybierzesz szablon, one już tam są, ale możesz też łatwo dodać je samodzielnie za pomocą tego bloku.
Rzućmy okiem na dostępne opcje dostosowywania stron archiwum:
- skóra - Wybierz wyświetlanie swoich postów w stylu klasycznym lub w stylu karty.
- kolumny - Określa liczbę kolumn, w których wyświetlane są Twoje posty.
- Pokaż obraz - Aktywuj polecane obrazy na stronach archiwum
- Kamieniarstwo – Wyświetla elementy w konstrukcji murowanej lub nie.
- Wielkość obrazu - Rozmiar obrazu, który Elementor powinien używać na stronach archiwum.
- Tytuł - Chcesz wyświetlać tytuły postów, czy nie?
- Tag HTML tytułu - Jeśli tak, jaki znacznik HTML powinien być wokół niego umieszczony?
- Fragment - Dołącz fragmenty swoich postów lub pokazuj tylko tytuł.
- Fragment Długość - Określić długość ekstraktów.
- Metadane - Określa metadane postów dostępne dla odwiedzających.
- Separator między - Symbol separatora między informacjami metadanych.
- Czytaj więcej - Dołącz link „czytaj więcej”, tak czy nie?
- Odznaka - Pozwala dodać więcej informacji do postów, takich jak kategorie i tagi.
- Odznaka taksonomii - Tutaj możesz zdecydować, jakie informacje chcesz uwzględnić.
- Avatar – Dzięki temu możesz zmienić zdjęcie profilowe autorów artykułów
Oprócz powyższego masz kilka innych opcji. Pod Paging, możesz określić, jak powinno być obsługiwane stronicowanie archiwów. Na przykład, jak go wyświetlić, liczbę stron do uwzględnienia i wyrównanie tekstu.
Wreszcie Zaawansowane umożliwia ustawienie komunikatu, który będzie wyświetlany, gdy użytkownik trafi do pustego archiwum. Wszystko inne powinno być znajome. Pamiętaj tylko, że opcje stylu zmieniają się w zależności od wybranej skórki.
4. Kontroluj liczbę publikacji w archiwum
Krótka uwaga na temat szablonów archiwów. Aby zmienić liczbę postów, które pojawiają się w archiwum (lub na stronie Twojego bloga), musisz to zrobić w WordPress pod Ustawienia> Czytanie.
Tutaj wpisz liczbę postów, które mają widzieć Twoi goście.
personalizacja powierzchowny Motyw WordPress z Elementorem
Dostosowywanie motywów WordPress to chleb powszedni wielu profesjonalistów. Chociaż zwykle wiąże się to z dużym kodowaniem i edycją plików, w przypadku Elementora nie jest to już konieczne.
Jak widać powyżej, wtyczka jest pełnoprawnym edytorem motywów WordPress. Pozwala dostosować każdą jego część z poziomu interfejsu użytkownika. Możesz edytować nagłówek, stopkę, szablony stron i postów, szablony archiwów i nie tylko.
Dzięki możliwości korzystania z dynamicznej zawartości i podglądu dowolnej części witryny możesz zaimplementować wszystkie modne dostosowania
Krótko mówiąc, Elementor ułatwia dostosowanie motywu WordPress. Zamiast żmudnego wprowadzania zmian w dziesiątkach plików i setkach linii kodu, możesz to wszystko szybko zrobić w jednym miejscu.
Pobierz Elementor Pro teraz!
Wnioski
Tu jest ! To wszystko w tym artykule, który pokazuje, jak dostosować motyw WordPress za pomocą Kreatora stron. Jeśli masz jakiekolwiek wątpliwości, jak się tam dostać, daj nam znać w ciągu commentaires.
Możesz jednak również skonsultować się nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.
...
