Jak utworzyć niestandardowy szablon wpisu na blogu Elementor (łatwy przewodnik)

Szukasz najłatwiejszego samouczka, jak utworzyć niestandardowy szablon postu na blogu Elementor?

Blogi to jeden z najpopularniejszych i najskuteczniejszych sposobów budowania świadomości na temat Twojego produktu. Jeśli jednak chcesz czerpać największe korzyści z content marketingu, musisz zadbać o to, aby strona Twojego bloga miała urzekający wygląd i zawierała odpowiednie informacje.

Aby Twój post na blogu był atrakcyjny, musisz utworzyć własny, niestandardowy szablon bloga. Możesz też stworzyć wyjątkowy szablon postów na blogu, aby zaangażować odbiorców za pomocą Elementora. Możesz utworzyć niestandardową stronę bloga Elementora od podstaw, a także zbudować ją przy użyciu gotowych szablonów.

W tym artykule dowiesz się, jak w najprostszy możliwy sposób utworzyć szablon postu na blogu Elementor przy użyciu dwóch metod . Więc czytaj dalej…

Wtyczki, które musisz zainstalować, aby utworzyć niestandardowy szablon postu na blogu Elementora

Aby bez wysiłku utworzyć post na blogu w WordPress za pomocą kreatora stron Elementor, będziesz potrzebować obu

• Elementor (bezpłatny)

• i Elementora Pro.

Jak stworzyć od podstaw niestandardowy szablon bloga Elementora

Elementor Pro zapewnia wszystkie niezbędne widżety, których potrzebujesz, aby stworzyć oszałamiający niestandardowy szablon postu na blogu od absolutnego zera. Wystarczy wykonać poniższe kroki, aby utworzyć pojedynczy szablon postu Elementor:

Krok 1: Utwórz nowy szablon pojedynczego bloga

Najpierw musisz stworzyć jeden szablon bloga. W tym celu przejdź do pulpitu nawigacyjnego WordPress, a następnie przejdź do szablonów ⇒ Dodaj nowy

i kliknij przycisk Dodaj nowy . Po otwarciu nowego okna wybierz Pojedynczy post jako typ szablonu z listy rozwijanej, podaj wybraną nazwę , a następnie kliknij Utwórz szablon .

Teraz powinieneś zobaczyć gotowe układy (omówimy, jak z nich korzystać później). Ponieważ zamierzamy zbudować szablon bloga od podstaw, kliknij przycisk z krzyżykiem w prawym górnym rogu , aby zamknąć to okno.

Krok 2: Wybierz strukturę/układ szablonu postu na blogu

Teraz musisz wybrać strukturę szablonu swojego bloga, nie zaleca się używania całej szerokości strony, ponieważ użytkownik ma trudności z jej przeczytaniem. Aby wybrać strukturę dla szablonu niestandardowej strony bloga Elementora, kliknij ikonę + i wybierz tę, która Ci się podoba, a następnie kliknij strukturę, aby ją wstawić.

Uwaga: Aby zobaczyć, jak będzie wyglądał blog z utworzonym szablonem, wybierz istniejący blog z opcji podglądu zawartości dynamicznej . Aby to ustawić, kliknij opcję Ustawienia w lewym dolnym rogu.

Następnie wybierz Opublikuj z listy rozwijanej Podgląd zawartości dynamicznej , wpisz nazwę bloga, który chcesz wybrać w drugim menu rozwijanym poniżej. Na koniec kliknij Zastosuj i wyświetl podgląd .

Krok 3: Dodaj widżet Polecany obraz i dostosuj opcje stylu obrazu

Po utworzeniu układu na lewym pasku edytora wyszukaj widżet Polecany obraz. Po znalezieniu widżetu przeciągnij go i upuść w wybranej lokalizacji.

Po załadowaniu widżetu dostosuj rozmiar obrazu, wyrównanie, podpis, łącze i opcję lightbox.

Aby zmienić ustawienia stylu, przejdź do karty Styl . Tutaj możesz zmienić wysokość, szerokość, krycie, obramowanie, promień itp.

Krok 4: Dodaj i dostosuj widżet Elementor Post Info

Po obrazie funkcji powinieneś wyświetlić informacje związane z wpisem, które możesz zrobić za pomocą widżetu Informacje o wpisie . Podobnie jak w przypadku polecanego obrazu, najpierw wyszukaj widżet Informacje o wpisie, a następnie po prostu przeciągnij i upuść poniżej widżetu Polecany obraz.

Na karcie Treść edytora Elementor możesz ustawić układ jako domyślny lub wbudowany. Możesz edytować/usuwać opcje autora, daty, godziny i komentarzy . Możesz także dodać niestandardowe pole do widżetu informacji o wpisie, klikając przycisk + DODAJ NOWY.

Ponownie przejdź do karty Styl, aby dostosować ustawienia stylu, takie jak odstęp między listami, wyrównanie, kolor i rozmiar ikony, kolor tekstu i typografia.

Krok 5: Przeciągnij i upuść widżet tytułu posta i dostosuj

Teraz wyszukaj widżet Tytuł posta i przeciągnij i upuść poniżej widżetu informacji o wpisie.

Możesz dostosować rozmiar, znacznik HTML i wyrównanie znacznika tytułu posta.

Na karcie stylu znajdziesz opcje dostosowywania koloru tekstu, typografii, obrysu tekstu, cienia tekstu i trybu mieszania.

Krok 6: Dodaj i dostosuj widżet treści posta

Teraz przeciągnij i upuść widżet treści posta . Widżet treści postu w ElementsKit reprezentuje treść (główną treść) posta na blogu.

Krok 7: Przeciągnij i upuść widżet Ikony społecznościowe, aby dodać opcję udostępniania społecznościowego

Po treści posta dodaj widżet Ikony społecznościowe , przeciągając i upuszczając. Ikony społecznościowe zapewniają opcje udostępniania bloga na różnych platformach społecznościowych.

Możesz dodać / usunąć tyle ikon społecznościowych , ile chcesz. Ponadto możesz dostosować kształt ikon, liczbę wyświetlanych kolumn i wyrównanie. Możesz także dostosować ikonę, kolor i link platformy społecznościowej dla każdej ikony społecznościowej.

Przejdź do karty Styl, aby zmienić rozmiar ikony, kolor, dopełnienie, odstępy, typ obramowania.

Krok 8: Dodaj widżet Pole autora i dostosuj ustawienia widżetu

Wyszukaj Pole autora i przeciągnij i upuść widżet za ikonami społecznościowymi. Możesz również dodać niestandardowego autora , jeśli chcesz, z listy rozwijanej źródła. Możesz wybrać opcję ukrywania/ukrywania zdjęcia profilowego, wyświetlanej nazwy i biografii . Możesz także dostosować inne ustawienia, takie jak tag HTML, łącze, układ, wyrównanie.

Przejdź do karty Styl, aby dostosować opcje, takie jak rozmiar obrazu, obramowanie, kolor i typografia autora, biografia itp.

Krok 9: Dodaj widżet nawigacji po wpisach dla opcji stronicowania

Widżet Nawigacja po wpisach Elementor oferuje opcje nawigacji dla czytelników, dzięki czemu mogą przełączać się na różne blogi. Aby dodać widżet nawigacji po wpisie, tak jak przed wyszukiwaniem w edytorze, a następnie przeciągnij i upuść po widżecie pola autora.

Możesz pokazać lub ukryć etykietę stronicowania lub znak strzałki. Masz około 8+ opcji projektowania strzał. Możesz także dostosować tekst poprzedniego i następnego poziomu.

Możesz zmienić kolor i typografię etykiety, tytułu, strzałki i obramowania zarówno dla widoku normalnego, jak i po najechaniu kursorem.

Krok 10: Przeciągnij i upuść widżet postów, aby wyświetlić powiązane posty

Aby zaprezentować powiązane posty, użyjemy widżetu Elementor Posts . Przeciągnij i upuść widżet postów za widżetem nawigacji po postach. Za pomocą tego widżetu możesz zmienić kolor skóry, ustawić liczbę kolumn, liczbę postów na stronie, pozycję obrazu i wiele innych ustawień. Możesz także zmienić różne style układu, ramki, obrazu i zawartości.

Krok 11: Dodaj widżet komentarzy do postów

Aby umożliwić użytkownikom komentowanie Twoich postów, musisz dodać widżety komentarzy do postów. Wyszukaj widżet komentarzy do postów, a następnie przeciągnij i upuść poniżej widżetu postów.

Krok 12: Zaktualizuj i zobacz niestandardowy szablon strony bloga Elementora

Teraz, gdy cały projekt jest gotowy, kliknij przycisk aktualizacji . Jeśli pojawi się okno ustawień publikowania, kliknij Zapisz i zamknij.

Oto podgląd niestandardowego szablonu postu na blogu Elementora, który właśnie utworzyliśmy.

Jeśli uważasz, że opisana powyżej metoda jest zbyt czasochłonna, możesz wybrać metodę opisaną poniżej, w której nie musisz budować i projektować każdej sekcji od zera.

Jak utworzyć stronę z jednym postem za pomocą gotowego szablonu Elementor

Jeśli planujesz użyć gotowego szablonu dla swojej niestandardowej strony bloga Elementor, możesz to zrobić w zaledwie 3 krokach. Sprawdźmy jak:

Krok 1: Utwórz nowy szablon pojedynczego wpisu na blogu z pulpitu nawigacyjnego

Podobnie jak w przypadku pierwszej metody, musisz utworzyć nowy pojedynczy szablon bloga. Aby uzyskać więcej informacji na temat tworzenia nowego szablonu, przewiń trochę w górę i sprawdź pierwszy krok pierwszej metody (jak zbudować szablon bloga od podstaw).

Krok 2: Wybierz gotowy szablon Elementor Single Post

Po kliknięciu Utwórz szablon zobaczysz okno biblioteki Elementor z wieloma niestandardowymi szablonami pojedynczych postów. Tutaj możesz wybrać dowolny z bloków pojedynczych postów, które lubisz. Najedź na szablon swoich preferencji, kliknij wstaw.

Krok 3: Wybierz gotowy szablon Elementor Single Post

Po załadowaniu szablonu kliknij przycisk publikowania, aby zapisać wszystkie nowe szablony bloga.

Oto ostateczny wygląd posta na blogu z postem na blogu Elementor przy użyciu gotowego szablonu pojedynczego posta.

Jak utworzyć stronę z najnowszymi postami w Elementorze za pomocą ElementsKit

Teraz, gdy masz atrakcyjny szablon pojedynczego posta, nadszedł czas, aby utworzyć niestandardową stronę z listą blogów, aby wszystkie Twoje blogi były wyświetlane w sposób kojący i przyjazny dla użytkownika. Przyjrzyjmy się, jak możesz utworzyć niestandardowe najnowsze posty Elementor za pomocą ElementsKit.

Krok 1: Zainstaluj i aktywuj ElementsKit

Aby stworzyć oszałamiającą stronę z listą blogów, wraz z narzędziem do tworzenia stron Elementor, będziesz potrzebować ElementsKit. ElementsKit to wszechstronna wtyczka do Elementora z ponad 85 widżetami i modułami, dzięki którym tworzenie stron internetowych jest łatwiejsze niż kiedykolwiek.

Krok 2: Włącz widżet związany z listą postów

Po aktywacji musisz włączyć widżet związany z postem, aby zbudować stronę z listą postów. ElementsKit udostępnia szereg widżetów do wyświetlania list blogów, w tym posty na blogu, siatkę postów, listę postów, widżet karty postów itp. Możesz włączyć widżet, którego chcesz używać.

Krok 3: Dodaj widżet i dostosuj

Teraz przejdź do strony z listą blogów, wyszukaj widżet i po prostu przeciągnij i upuść. Po załadowaniu widżetu możesz dostosować powiązane ustawienia, aby spersonalizować stronę z listą blogów. Przyjrzyjmy się, jak będzie wyglądać strona z listą blogów z kilkoma widżetami ElementsKit i ich opcjami dostosowywania.

Posty na blogu:

Za pomocą widżetu post na blogu możesz wyświetlać swoje blogi w formacie blokowym, siatce z kciukiem i siatce bez projektu kciuka . Możesz także ustawić liczbę postów do wyświetlenia w wierszu, włączyć/wyłączyć paginację i wiele innych opcji. Aby uzyskać więcej informacji, zajrzyj na nasz blog, aby dowiedzieć się, jak wyświetlać najnowsze wpisy na blogu.

Siatka postów:

Za pomocą wtyczki siatki postów możesz dostosować, które blogi kategorii chcesz wyświetlać na liście blogów. Możesz także wybrać liczbę postów do wyświetlenia oraz numery kolumn, które powinien mieć każdy wiersz. Więcej szczegółów znajdziesz w naszej dokumentacji.

Widżet zakładki post

Dzięki widżetowi zakładki postów otrzymujesz wszystkie opcje dostosowywania, takie jak siatka postów, wraz z dodatkową kartą kategorii. Dzięki tej opcji użytkownicy mogą po prostu najechać kursorem na dowolną kartę kategorii i zobaczyć tylko blogi z tej konkretnej kategorii.

Po wybraniu widżetu i dostosowaniu go zgodnie z własnym wyborem, kliknij przycisk aktualizacji, aby opublikować. Teraz powinieneś mieć stronę, która wyświetla najnowsze posty Elementora w kuszący sposób.

Ostatnie słowa

Zrobiliśmy co w naszej mocy, aby zapewnić Ci łatwy samouczek dotyczący tworzenia niestandardowego szablonu postu na blogu Elementor na dwa sposoby. Mamy nadzieję, że blog okazał się pomocny przy tworzeniu niestandardowego szablonu bloga Elementora. Możesz postępować zgodnie z instrukcjami i zmieniać układy, a także projekty zgodnie z własnym wyborem.

I nie zapomnij nadać swojej stronie listy blogów niezwykłego charakteru za pomocą widżetów ElementsKit. ElementsKit jest idealnym uzupełnieniem Elementora, poświęć czas na sprawdzenie wszystkich niesamowitych widżetów, które ten dodatek ma do zaoferowania.