Jak stworzyć niestandardowy szablon wpisu na blogu Elementor

Opublikowany: 2022-01-14

Dobrze uformowana strona z pojedynczym postem zapewnia czytelnikom dobre samopoczucie, gdy czytają Twój post. Pomaga również przyciągnąć nowych lub istniejących użytkowników do Twojej witryny, zmniejszyć współczynnik odrzuceń, poprawić widok strony witryny i nie tylko. Dlatego musisz skupić się na projekcie strony z jednym postem.

Jeśli szukasz idealnego przewodnika po stworzeniu niestandardowej strony z pojedynczym postem za pomocą Elementora, poniższy przewodnik będzie dla Ciebie idealny.

W tym przewodniku pokażemy, jak zaprojektować od podstaw szablon postu na blogu Elementor lub stronę. Wcześniej powinieneś mieć jasne pojęcie, dlaczego musisz utworzyć niestandardową stronę z pojedynczym postem.

Zacznijmy:

Dlaczego musisz zaprojektować swój niestandardowy szablon postu na blogu Elementor

How To Create Custom Elementor Blog Post Template

Najpopularniejsze motywy WordPress mają własne ramy do projektowania pojedynczych postów. Ale domyślny format pojedynczego postu w motywie może nie spełniać Twoich potrzeb. Załóżmy, że musisz dodać niestandardowe wyskakujące okienko do swojej strony z jednym postem, ale motyw użyty do zaprojektowania witryny nie pozwala na to.

Co zrobisz następnie? Z tego punktu widzenia musisz zaprojektować niestandardową stronę z pojedynczym postem, aby dodać potrzebne funkcje. Istnieje jednak kilka innych ważnych aspektów, które możesz wziąć pod uwagę przy tworzeniu niestandardowej strony posta na blogu dla swojej witryny. Godne uwagi fakty to:

  • Zapewnij lepsze wrażenia użytkownika
  • Zmniejsz współczynnik odrzuceń
  • Popraw projekt strony z jednym postem
  • Dodaj niestandardowe funkcje
  • Zapewnij lepszy widok postów

2 sposoby tworzenia niestandardowych szablonów wpisów na blogu Elementor

Możesz utworzyć niestandardowy szablon postu na blogu Elementora na dwa proste sposoby:

  1. Metoda 1: Utwórz szablon bloga Elementor od podstaw
  2. Metoda 2: Utwórz stronę pojedynczego posta za pomocą gotowego szablonu Elementor

Upewnij się, że zainstalowałeś i aktywowałeś zarówno wtyczkę Elementor (bezpłatną), jak i Elementor Pro w swojej witrynie.

Jeśli jesteś nowy w Elementorze, sprawdź ten przydatny blog Jak prawidłowo korzystać z Elementora.

Metoda 1: Utwórz szablon bloga Elementor od podstaw

Jeśli chcesz zaprojektować własny szablon pojedynczego posta od podstaw, możesz to zrobić za pomocą widżetów Elementor.

Krok 1: Dodaj kolumnę i sekcję

Najpierw musisz dodać sekcję i wstawić kolumnę w zależności od potrzeb. Aby to zrobić, kliknij ikonę (+) i kolumnę w sekcji.

Add Column

Krok 2: Dodaj widżet obrazu funkcji

Następnie możesz dodać wymagane widżety do kolumny. Tutaj dodajemy widżet Polecany obraz , aby wyświetlić nasz obraz funkcji posta. Możesz znaleźć widżet z menu po lewej stronie i przeciągnąć i upuścić widżet w odpowiednie miejsce.

Add Feature Image Widget

Zawartość obrazu funkcji

Możesz zarządzać obrazem funkcji w obszarze Zawartość . Możesz zmienić rozmiar obrazu , ustawić wyrównanie , dodać podpis i wstawić łącze , jeśli chcesz.

Content of Feature Image

Obraz funkcji stylu

Możesz dostosować projekt obrazu za pomocą opcji Styl. Przejdź do obszaru Styl , zmień niezbędne ustawienia, aby obraz funkcji był bardziej atrakcyjny.

Style Feature Image

Krok 3: Dodaj nową kolumnę i ustaw układ

Po dodaniu obrazu funkcji chcemy dodać inne widżety. Wcześniej lubimy dodać nową kolumnę i ustawić układ za pomocą ustawienia Zaawansowane . Sprawdź obrazek poniżej, widzisz, że ustawiamy Content Width->Boxed i definiujemy Width jako 850px .

Dodajmy do tej kolumny inne widżety.

Add New Column & Set Layout

Krok 4: Dodaj widżet informacji o wpisie

Dodaliśmy widżet Informacje o wpisie, aby wyświetlić nasze metadane wpisu. Znajdź widżet i upuść go w kolumnie.

Add Post Info Widget

Zawartość widżetu informacji o poście

W Treści możesz kontrolować Metadane widżetu Informacje o wpisie.

Content Post Info Widget

Ustaw wyrównanie widżetu z informacjami o wpisie

Jeśli chcesz dostosować projekt informacji o wpisie, możesz to zrobić tutaj, w obszarze Styl . Tutaj ustawiamy wyrównanie treści meta postu.

Style Post Info Widget

Zmień kolor i rozmiar ikony informacji o poście

Zmieniamy również kolor i rozmiar ikony. Możesz zmienić wygląd tekstu, przechodząc do obszaru Styl->Tekst . Ale nie przeszkadza nam domyślny projekt tekstu.

Style Post Info Widget

Krok 5: Dodaj widżet tytułu posta

Dodaj widżet Tytuł posta i wyświetlaj tytuł bloga. Możesz dodać widżet, wykonując powyższą procedurę.

Add Post Title Widget

Styl Tytuł posta

Możesz również zarządzać stylem tytułu, przechodząc do obszaru Styl . Tutaj możesz dostosować kolor tekstu, typografię, cień tekstu i tryb mieszania tytułu posta.

Style Post Title

Uwaga: Jeśli zainstalowałeś wtyczkę Happy Addons na swojej stronie, otrzymasz opcję Text Stroke .

Krok 6: Dodaj widżet treści posta

Teraz nadszedł czas na dodanie całej treści posta do naszej strony. Aby to zrobić, dodajemy do strony widżet treści posta .

Add Post Content Widget

Treść posta w stylu

Możesz ustawić wyrównanie zawartości, kolor tekstu i typografię zawartości.

Style Post Content

Krok 7: Dodaj widżet udostępniania społecznościowego

Dodaliśmy przycisk Social Share do udostępniania posta.

Add Social Share Widget

Krok 8: Dodaj widżet informacji o autorze

Dodaliśmy również widżet Informacje o autorze , aby pokazać szczegóły autora posta.

Add Author Info Widget

Pole autora stylu

W zależności od potrzeb możesz zmienić domyślny projekt Informacje o autorze, korzystając z opcji Styl. Tutaj masz różne opcje dostosowywania Image, Text i Button .

Style Author Box

Krok 9: Dodaj widżet post paginacji

Aby ułatwić nawigację po wpisach, dodaliśmy widżet Podział na strony. Teraz można łatwo poruszać się po postach.

Add Post Pagination

Krok 10: Dodaj powiązane posty

To bardzo powszechna funkcja, którą często widuje się na dole pojedynczego posta na blogu. Dlatego zdecydowaliśmy się dodać widżet Pokrewne posty do naszej strony. Ustawiliśmy również układ i zdefiniowaliśmy kolumny, posty na stronę i inne niezbędne ustawienia widżetów.

Add Related Posts

Krok 11: Dodaj widżet posta komentarza

Możesz łatwo zaimplementować opcję komentowania na swojej stronie posta, dodając widżet posta komentarza . Możesz ustawić skórkę komentarza i źródło komentarza za pomocą opcji Treść .

Add Post Comment Widget

Ostateczny podgląd projektu Elementor Single Post

Po dodaniu wszystkich niezbędnych widżetów i dostosowaniu projektu jest to obecny wygląd naszej strony z jednym postem.

Final Preview of Elementor Single Post Design

Metoda 2: Utwórz stronę pojedynczego posta za pomocą gotowego szablonu Elementor

W tej części naszego bloga pokażemy, jak utworzyć pojedynczy szablon postu za pomocą Kreatora motywów Elementor.

Zacznijmy:

Przejdź do kreatora szablonów szablonów

Najpierw musisz przejść do Szablony->Konstruktor motywów , aby utworzyć nowy szablon pojedynczego posta.

Go to Tempalte Teme Builder

Dodaj nowy pojedynczy post

Na następnej stronie masz kilka opcji. Kliknij kartę Pojedynczy post . Następnie kliknij przycisk Dodaj nowy pojedynczy post .

Add New Single Post

Utwórz szablon pojedynczego posta

Następnie znajdziesz opcję utworzenia szablonu. Wpisz nazwę szablonu i kliknij przycisk Utwórz szablon i poczekaj na nadchodzącą stronę.

Create Single Post Template

Wybierz odpowiedni wstępnie zaprojektowany szablon postu

Teraz nadszedł czas, aby wybrać odpowiedni gotowy szablon bloga dla swojej strony bloga. Po prostu zainstaluj szablon i użyj go.

Choose a Suitable Pre-Designed Post Template

Uwaga: Możesz również dostosować gotowy szablon do swoich potrzeb.

Otóż ​​to.

Zwiększ możliwości dostosowywania dzięki widżetom postów Happy Addons

Happy Addons jeden z lekkich i szybko rozwijających się dodatków do Elementora umożliwia zaprojektowanie niestandardowej strony z pojedynczym postem za pomocą potężnych widżetów postów. Obecnie zawiera 8 zaawansowanych widżetów postów, które są łatwe w użyciu i w pełni konfigurowalne.

Omówmy krótki opis tych widżetów, aby zrozumieć, dlaczego warto je wypróbować.

Lista postów (bezpłatna)

Chcesz zaprezentować swoje posty na blogu na liście? Nowy darmowy widżet Lista postów Happy Addons umożliwia wyświetlanie postów na blogu w formie listy. Wypróbuj ten widżet i zaprojektuj swój post na wyłączność.

Post List Demo HappyAddons

Zapoznaj się z dokumentacją widżetu Lista postów.

Zakładka Post (bezpłatna)

Możesz zauważyć, że wiele witryn wyświetla swoje posty za pomocą zakładki. A jeśli chcesz to zrobić, darmowy widget zakładki postów Happy Addons będzie idealnym narzędziem do tego projektu.

Post-Tab Demo HappyAddons

Przeczytaj dokumentację widżetu Post Tab i dowiedz się, jak z niego korzystać.

Taksonomia (bezpłatnie)

Chcesz unowocześnić swoją post taksonomię? Wypróbuj darmowy widżet taksonomii Happy Addons, od teraz możesz efektywnie udekorować swoje post Taxonomy w bardziej zorganizowany sposób.

Taxonomy Widget Demo

Sprawdź pełną dokumentację widżetu taksonomii.

Siatka postów (Pro)

Jeśli szukasz solidnego narzędzia do wyświetlania postów na blogu w układzie siatki, powinieneś wypróbować widget Siatka postów Happy Addons. Ten kreatywny widżet pozwala zaoszczędzić cenny czas na projektowaniu takich elementów internetowych i uatrakcyjnić stronę bloga.

Post Grid Widget Demo

Przeczytaj pełną dokumentację widżetu Post Grid.

Kafelki postów (Pro)

Widżet kafelków postów Happy Addons to kolejne zaawansowane narzędzie, które pozwala wyświetlać posty w bardziej zorganizowany sposób. Możesz dodać wiele postów jednocześnie i zarządzać ich szerokością i wysokością. Jest łatwy w użyciu iw pełni konfigurowalny.

Post Tiles Widget Demo

Postępuj zgodnie z dokumentacją widżetu Post Tiles i dowiedz się, jak korzystać z tego niesamowitego narzędzia.

Lista inteligentnych postów (Pro)

Dzięki temu ekskluzywnemu widżetowi Smart Post List możesz wydajniej wyświetlać posty na blogu w swojej witrynie Elementor niż kiedykolwiek wcześniej. Możesz dodawać przyklejone posty z możliwością wyświetlania skategoryzowanych list postów.

Smart Post List Widget Demo

Zapoznaj się z dokumentacją listy inteligentnych postów.

Post karuzela (Pro)

Ten wyjątkowy widżet Happy Addons umożliwia prezentowanie postów na blogu w układzie karuzeli. Wypróbuj widget Karuzela postów i uatrakcyjnij projekt swojego posta dla odwiedzających.

Post Carousel Widget Demo

Przeczytaj dokumentację Post Carousel i dowiedz się, jak z nią pracować.

Lista autorów (Pro)

Wypróbuj widżet Lista autorów New Happy Addons, aby stworzyć piękną listę autorów i pokazać, ile postów napisali.

Author List Widget Demo

Dowiedz się więcej o widżecie Lista autorów, czytając dokumentację.

Czy jesteś gotowy, aby zaprojektować swój niestandardowy szablon postu na blogu Elementor?

Teraz nadszedł czas, aby stworzyć własną stronę z jednym postem za pomocą Elementora.

Jeśli zastosujesz się do powyższych instrukcji, dowiesz się, jak zaprojektować od podstaw niestandardową stronę z pojedynczym postem Elementora. Omówiliśmy również, jak zwiększyć wartość swojej strony postów za pomocą widżetów postów HappyAddons.

Jeśli nadal masz pytania dotyczące projektu szablonu postu na blogu Elementora, możesz je zadać, korzystając z pola komentarza poniżej. Postaramy się jak najszybciej rozwiązać Twój problem.

Jeśli podoba Ci się ten pomocny przewodnik, udostępnij go na swoim kanale społecznościowym. Dołącz do naszego biuletynu, aby uzyskać więcej interesujących przewodników na temat WordPressa i Elementora.

Zapisz się do naszego newslettera

Otrzymuj najnowsze wiadomości i aktualizacje na Elementor