Jak utworzyć szablon strony kategorii dla swojego bloga za pomocą narzędzia Divi Theme Builder?

Strona kategorii może być niezwykle pomocna dla użytkowników, dostarczając im całą stronę pełną interesujących (lub szukanych) rzeczy. Ale wiele razy strona kategorii może ucierpieć, jeśli chodzi o projekt. W Divi, przed czasami Divi Theme Builder, programiści musieli polegać na ręcznym dostosowywaniu kodu php w pliku motywu szablonu strony kategorii, a następnie stylizowaniu szablonu strony wyłącznie za pomocą zewnętrznego CSS. Ale teraz, dzięki Divi Theme Builder, proces ten stał się łatwy i przyjemny!

W tym samouczku pokażemy Ci, jak utworzyć szablon strony kategorii dla swojego bloga całkowicie od podstaw za pomocą Divi Theme Builder. Pokażemy Ci, jak szybko skonfigurować nowy szablon przypisany do kategorii postów, a także jak zaprojektować szablon za pomocą odpowiednich modułów i dynamicznej zawartości za pomocą Divi Builder.

Zacznijmy!

zapowiedź

Oto krótkie spojrzenie na szablon strony kategorii, który zaprojektujemy razem w tym samouczku. Na tym obrazie służy do wyświetlania wszystkich postów z kategorii „Biznes”.

Pobierz układ za DARMO

Aby położyć swoje ręce na projektach z tego samouczka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Aby zaimportować układ szablonu do swojej witryny, musisz przejść do Divi Theme Builder i użyć opcji przenoszenia, aby zaimportować plik .json do kreatora motywów.

Przejdźmy do samouczka, dobrze?

Czego potrzebujesz, aby zacząć

Aby rozpocząć, musisz wykonać następujące czynności:

1. Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj zainstalowany motyw Divi (lub wtyczkę Divi Builder, jeśli nie używasz motywu Divi).
2. Ponieważ będziemy tworzyć szablon strony kategorii dla postów na blogu, będziesz musiał mieć już utworzone posty w Twojej witrynie z przypisanymi do nich kategoriami.

Po tym jesteś gotowy do pracy.

Moduły i zawartość dynamiczna dostępne dla szablonów stron kategorii

Tworząc szablon strony kategorii dla bloga Divi, ważne jest, aby zrozumieć, jakie narzędzia są do Twojej dyspozycji, aby móc skutecznie zbudować szablon, który dynamicznie wyświetla prawidłowe informacje. W przypadku szablonu strony kategorii dla postów na blogu najbardziej interesuje nas wyświetlanie postów według bieżącej kategorii za każdym razem, gdy użytkownik odwiedza stronę kategorii. Na przykład, jeśli użytkownik kliknie link kategorii „Biznes”, powinien zobaczyć stronę archiwum, która wyświetla wszystkie posty z kategorią „Biznes”. Niektóre moduły Divi mają wbudowane opcje ułatwiające wyświetlanie dynamicznej zawartości w szablonie.

Moduł bloga

Moduł Blog jest podstawowym modułem, który powinien być używany do wyświetlania szablonów stron kategorii. Dzieje się tak, ponieważ ma wbudowaną opcję wyświetlania postów dla bieżącej strony.

Zasadniczo mówi to Divi, aby wyświetlał posty, które są zwykle generowane za każdym razem, gdy użytkownik odwiedza stronę. Tak więc z opcją ustawioną na wyświetlanie „Posty dla bieżącej strony”, użytkownik będzie mógł wyświetlić stronę kategorii i poprawnie wyświetlać posty według kategorii.

Moduł suwaka postu i moduł tytułu posta

Możesz również użyć modułu suwaka postów, aby wyświetlić posty dla bieżącej strony. Jest to pomocne przy tworzeniu dynamicznego suwaka postów, który wyświetla posty generowane po odwiedzeniu strony kategorii, podobnie jak robi to moduł bloga.

Można również użyć modułu tytułu posta, ale jest on w dużej mierze ograniczony do możliwości dynamicznego wyświetlania tytułu strony. Większość innych elementów dostępnych w module tytułu posta nie ma zastosowania do strony archiwum, tylko określone szablony postów.

Tytuł posta/archiwum (treść dynamiczna)

Łatwiejszym sposobem wyświetlenia tytułu strony postu/archiwum jest użycie zwykłego modułu Divi, a następnie wciągnięcie tytułu strony postu/archiwum przy użyciu funkcji zawartości dynamicznej dostępnej we wszystkich modułach Divi.

Na przykład możesz użyć modułu tekstowego, a następnie dodać tytuł strony posta/archiwum jako zawartość dynamiczną do treści treści. Następnie możesz dowolnie stylizować tytuł.

Teraz, gdy znasz już narzędzia potrzebne do utworzenia szablonu strony kategorii, wskoczmy i utwórzmy go razem.

Jak stworzyć szablon strony kategorii dla swojego bloga?

W przypadku tego szablonu strony kategorii celem jest utworzenie niestandardowego obszaru treści dla szablonu, który jest przypisany do wszystkich stron kategorii dla postów na blogu w Divi. Nie zamierzamy tworzyć niestandardowego obszaru nagłówka ani stopki dla tego szablonu. Ale możesz łatwo użyć tego szablonu na swojej własnej stronie internetowej z własnym nagłówkiem i stopką.

Tworzenie i przypisywanie niestandardowego szablonu dla kategorii postów

Aby rozpocząć, przejdź do pulpitu nawigacyjnego WordPress i przejdź do Divi > Kreator motywów. Następnie kliknij puste szare pole, aby dodać nowy szablon.

Następnie przypisz szablon do wszystkich stron kategorii.

Dodawanie nowego niestandardowego obszaru ciała do szablonu

Aby zbudować niestandardową treść szablonu, kliknij obszar Dodaj niestandardową treść, a następnie wybierz „Buduj niestandardową treść”.

Następnie wybierz opcję „Buduj od podstaw”.

Dodaj dynamiczny tytuł archiwum

W Edytorze układu szablonu utwórz nowy jednokolumnowy wiersz wewnątrz zwykłej sekcji.

Następnie dodaj moduł tekstowy do wiersza.

Usuń domyślną treść treści i kliknij ikonę „Użyj treści dynamicznej” i wybierz opcję „Tytuł posta/archiwum”.

Po umieszczeniu elementu Tytuł posta/archiwum otwórz ustawienia, klikając ikonę koła zębatego.

Następnie zaktualizuj obszary wejściowe Przed i Po, aby umieścić zawartość w znaczniku H1 i dodaj dodatkowy fragment zawartości statycznej po dynamicznym tytule w następujący sposób:

Przed:

<h1>

Później:

 Articles</h1>

Musimy otoczyć tytuł tagiem H1 dla celów SEO. Statyczne słowo „Artykuły” jest dodawane po tytule, więc jeśli użytkownik odwiedzi stronę kategorii „Biznes”, w tytule pojawi się „Artykuły biznesowe”.

Styl dynamicznego tytułu archiwum

Gdy zawartość dynamiczna jest już na miejscu, możemy nadać jej styl w następujący sposób:

• Czcionka nagłówka: Ubuntu
• Czcionka nagłówka: Waga: pogrubiona
• Kolor tekstu nagłówka: #192231
• Rozmiar tekstu nagłówka: 48px (komputer), 38px (tablet), 28px (telefon)
• Wysokość linii nagłówka: 1,2 em

Używanie modułu Blog do dynamicznego wyświetlania postów dla bieżącej kategorii

Po umieszczeniu dynamicznego tytułu strony kategorii musimy dodać moduł bloga, aby wyświetlać posty dla bieżącej strony kategorii.

Dodaj nowy wiersz

Dodaj nowy jednokolumnowy wiersz pod bieżącym górnym wierszem.

Dodaj moduł bloga

Następnie dodaj moduł bloga do wiersza.

Zaktualizuj opcje zawartości w następujący sposób:

• Posty dla bieżącej strony: TAK
• Liczba postów: 9
• Pokaż przycisk Czytaj więcej: TAK

Pamiętaj, że musimy upewnić się, że Posty dla bieżącej strony są włączone dla strony kategorii, aby pobrać właściwe archiwum postów.

Moduł projektowania bloga

Po skonfigurowaniu ustawień zawartości wprowadźmy kilka zmian w projekcie w następujący sposób:

• Układ: Siatka

• Czcionka tytułu: Ubuntu
• Grubość czcionki tytułu: pogrubiona
• Kolor tekstu tytułu: #192231
• Meta Czcionka: Ubuntu
• Kolor tekstu meta: #985e6d
• Rozmiar tekstu meta: 13px

• Czytaj więcej Czcionka: Ubuntu
• Czytaj więcej Grubość czcionki: pogrubienie
• Przeczytaj więcej Styl czcionki: Podkreślenie
• Czytaj więcej Kolor tekstu: #985e6d
• Czcionka stronicowania: Ubuntu
• Kolor tekstu paginacji: #985e6d
• Rozmiar tekstu paginacji: 18px
• Wysokość linii stronicowania: 2em

• Szerokość obramowania układu siatki: 0px
• Cień pudełka: patrz zrzut ekranu
• Siła rozmycia cieni w pudełku: 70px
• Siła rozprzestrzeniania się cieni w pudełku: -10px
• Kolor cienia: rgba (25,34,49,0.3)

W tym momencie mamy już uruchomioną podstawową stronę kategorii wraz z tytułem strony i postami na blogu, które będą wyświetlane poprawnie zgodnie z bieżącą stroną kategorii. Możemy jednak uzyskać większą kreatywność, dodając dodatkowy moduł do kreatywnego wyświetlania wpisu.

Utwórz suwak postów, aby wyświetlić 4 najnowsze posty w bieżącej kategorii.

Możemy również użyć modułu suwaka postów, aby dynamicznie wyświetlać posty na stronie kategorii. Oto jak to zrobić.

Dodaj nowy wiersz

Najpierw dodaj nowy wiersz z układem kolumnowym 1/3 2/3 pod górnym rzędem.

Dodaj moduł suwaka postów

W lewej kolumnie dodaj moduł suwaka postów.

Następnie zaktualizuj opcje zawartości suwaka postów w następujący sposób:

• Posty dla bieżącej strony: TAK
• Liczba postów: 4
• Pokaż meta posta: NIE

Zaprojektuj moduł suwaka postu

Teraz, gdy zawartość suwaka posta jest na swoim miejscu, zaktualizuj ustawienia projektu w następujący sposób:

• Wyrównanie tekstu: do lewej
• Czcionka tytułu: Ubuntu
• Wysokość wiersza tytułu: 1,3 em
• Użyj niestandardowych stylów dla przycisku: TAK
• Rozmiar tekstu przycisku: 16px
• Kolor tła przycisku: #985e6d
• Szerokość obramowania przycisku: 0px
• Czcionka przycisku: Ubuntu

• Cień pudełka: patrz zrzut ekranu
• Pole Rozmycie cieni Siła: 70px
• Siła rozprzestrzeniania się cieni w pudełku: -10px
• Kolor cienia: rgba (25,34,49,0.3)

Utwórz moduł bloga z układem o pełnej szerokości

W prawej kolumnie możemy dodać kolejny moduł bloga z układem o pełnej szerokości zamiast układu siatki. To pozwoli nam zapewnić kolejny unikalny obszar wyświetlania dla naszych postów w kategorii.

Dodaj moduł bloga

Aby zaoszczędzić czas, skopiujmy istniejący moduł bloga w dolnym wierszu i wklejmy go w prawej kolumnie obok suwaka postu.

Zaktualizuj ustawienia modułu zduplikowanych blogów

Otwórz zduplikowane ustawienia modułu bloga i zaktualizuj następujące elementy:

• Posty dla bieżącej strony: TAK
• Liczba postów: 3
• Długość fragmentu: 120
• Pokaż wyróżniony obraz: NIE (przynajmniej na razie)
• Pokaż paginację: NIE

• Układ: Pełna szerokość:
• Cień pudełka: brak

Dotychczasowy wynik

Jak dotąd rezultatem jest minimalne wyświetlanie trzech postów na blogu.

Ale jeśli chcemy pójść o krok dalej, możemy dodać kilka małych polecanych obrazów po lewej stronie każdego fragmentu posta.

Użyj niestandardowego CSS, aby utworzyć mniejsze polecane obrazy, które unoszą się po lewej stronie treści fragmentu posta.

Aby dodać kilka małych polecanych obrazów po lewej stronie fragmentów postów na blogu, musimy dodać niestandardowy kod CSS.

Daj moduł blogu niestandardową klasę CSS

Na początek musimy dodać niestandardową klasę CSS do modułu Blog. Otwórz ustawienia bloga i pod zakładką Zaawansowane wprowadź następujące dane:

• Klasa CSS: left-blog-image

Dodaj kod CSS za pomocą modułu kodu

Ponieważ dodajemy tylko mały fragment kodu CSS do tego szablonu, możemy użyć modułu kodu. Dodaj moduł kodu pod modułem bloga.

Wstaw kod CSS

Następnie wprowadź następujący kod CSS w obszarze zawartości kodu:

<style>
@media (min-width: 981px) {
.left-blog-image .et_pb_post .entry-featured-image-url {
float: left;
width: 100%;
max-width: 150px;
margin: 0 20px 30px 0;
}
.left-blog-image .et_pb_post {
margin-bottom: 20px !important;
}
}
</style>

Zaktualizuj ustawienia modułu bloga, aby uwzględnić polecany obraz

Teraz możemy dodać wyróżniony obraz z powrotem, aby był wyświetlany w nowej pozycji po lewej stronie dzięki fragmentowi CSS.

Dodatkowa stylizacja do szablonu

Zanim zakończymy, zróbmy kilka drobnych poprawek w projekcie.

Dodaj i nadaj styl dzielnikowi pod tytułem archiwum

Dodaj moduł rozdzielający bezpośrednio pod tytułem strony archiwum u góry szablonu.

Następnie zaktualizuj ustawienia dzielnika w następujący sposób:

• Kolor linii: #985e6d
• Waga dzielnika: 3px
• Maksymalna szerokość: 200px

Dodaj podział sekcji do układu

Otwórz ustawienia sekcji i dodaj rozdzielacz sekcji w następujący sposób:

• Styl Top Divider: patrz zrzut ekranu
• Kolor górnego dzielnika: rgba (73,78,107,0,07)
• Wysokość dzielnika: 90vw
• Przerzucanie dzielnika: poziome i pionowe

Użyj numeru odsunięcia postu w każdym module, aby uniknąć powielania wyświetlania postów

W tej chwili wszystkie nasze moduły pobierają tę samą treść posta dla bieżącej strony kategorii. Aby te moduły nie wyświetlały duplikatów, możemy użyć opcji Post Offset Number, aby „pominąć” określoną liczbę postów wyświetlających kanał postów.

Przesunięcie postu modułu bloga o pełnej szerokości

Ponieważ nasz suwak postów wyświetla już pierwszy (najnowszy) post dla bieżącej strony kategorii, możemy przesunąć ten post w sąsiadującym z nim module bloga. Otwórz ustawienia modułu bloga po prawej stronie suwaka postu i zaktualizuj numer przesunięcia postu w następujący sposób:

• Numer po odsunięciu: 1

Teraz moduł rozpocznie się od drugiego najnowszego posta na bieżącej stronie kategorii.

Przesunięcie postu modułu bloga siatki

Po ustawieniu pierwszego przesunięcia postów w module blogu, musimy przesunąć posty w głównym module blogu na dole szablonu. Otwórz ten moduł bloga i zaktualizuj numer przesunięcia postu w następujący sposób:

• Numer po odsunięciu: 4

Musimy ustawić numer przesunięcia na 4, aby uwzględnić 4 posty, które są już wyświetlane powyżej. Moduł będzie teraz kontynuowany w miejscu, w którym zakończyły się inne moduły, i rozpocznie się od piątego najnowszego wpisu.

Ostateczne rezultaty

Aby zobaczyć ostateczny wynik, przejdź do pulpitu WordPress i przejdź do Posty> Kategorie. Następnie kliknij, aby wyświetlić jedną z istniejących kategorii.

Oto ostateczny wynik.

I oto jest na wyświetlaczu tabletu i telefonu.

Końcowe przemyślenia

Mam nadzieję, że ten post pomoże Ci trochę łatwiej odetchnąć, gdy staniesz przed wyzwaniem stworzenia projektu strony kategorii dla Twojej witryny. Divi Theme Builder sprawia, że ​​jest to niezwykle łatwe, zwłaszcza że moduł bloga ma teraz opcję wyświetlania postów z bieżącej strony. A opcja przesunięcia postu umożliwia łączenie wielu modułów bloga (lub nawet modułów suwaków postów) bez oglądania zduplikowanych postów na wyświetlaczu.

W jaki sposób Divi Theme Builder pomógł ci zbudować strony kategorii?

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!