Cum să creați un șablon de pagină de categorie pentru blogul dvs. utilizând Generatorul de teme Divi

O pagină de categorie poate fi extrem de utilă pentru utilizatori, oferindu-le o pagină întreagă plină de lucruri de care sunt interesați (sau căutați). Dar de multe ori pagina categoriei poate avea de suferit când vine vorba de proiectare. În Divi, înainte de zilele Divi Theme Builder, dezvoltatorii au trebuit să se bazeze pe personalizarea manuală a codului php pe un fișier tematic de șablon de pagină de categorie și apoi pe stilizarea șablonului de pagină doar cu CSS extern. Dar acum, cu Divi Theme Builder, acest proces a devenit ușor și plăcut!

În acest tutorial, vă vom arăta cum să creați un șablon de pagină de categorie pentru blogul dvs. complet de la zero, folosind Divi Theme Builder. Vă vom arăta cum să configurați rapid un nou șablon atribuit categoriilor de postări, precum și cum să proiectați șablonul folosind modulele adecvate și conținutul dinamic folosind Divi Builder.

Să începem!

Trage cu ochiul

Iată o privire rapidă asupra șablonului de pagină de categorie pe care îl vom proiecta împreună în acest tutorial. În această imagine, este utilizată pentru a afișa toate postările din categoria „Afaceri”.

Descărcați aspectul GRATUIT

Pentru a pune mâna pe desenele din acest tutorial, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Pentru a importa aspectul șablonului pe site-ul dvs. web, va trebui să accesați Divi Theme Builder și să utilizați opțiunea de portabilitate pentru a importa fișierul .json în generatorul de teme.

Să trecem la tutorial, nu-i așa?

Ce trebuie să începeți

Pentru a începe, va trebui să faceți următoarele:

1. Dacă nu ați făcut-o încă, instalați și activați tema Divi instalată (sau pluginul Divi Builder dacă nu utilizați tema Divi).
2. Deoarece vom crea un șablon de pagină de categorie pentru postările de pe blog, va trebui să aveți postări deja create pe site-ul dvs. cu categorii atribuite acestora.

După aceea, sunteți gata să plecați.

Module și conținut dinamic disponibile pentru șabloane de pagini de categorii

Când creați un șablon de pagină de categorie pentru un blog Divi, este important să înțelegeți ce instrumente vă stau la dispoziție, astfel încât să puteți construi în mod eficient un șablon care să afișeze dinamic informațiile corecte. Pentru un șablon de pagină de categorie pentru postări de blog, suntem cel mai interesați să afișăm postări după categoria curentă ori de câte ori un utilizator vizitează o pagină de categorie. De exemplu, dacă un utilizator face clic pe linkul de categorie „Afaceri”, acesta ar trebui să vadă o pagină de arhivă care afișează toate postările cu categoria „Afaceri”. Unele module Divi au încorporat opțiuni pentru a face afișarea conținutului dinamic pe un șablon destul de ușor.

Modulul Blog

Modulul Blog este modulul principal care ar trebui utilizat pentru a afișa șabloanele de pagină de categorie. Acest lucru se datorează faptului că are opțiunea încorporată pentru a afișa Postări pentru pagina curentă.

Aceasta îi spune practic Divi să afișeze postările care sunt generate în mod normal ori de câte ori un utilizator vizitează pagina. Deci, cu opțiunea setată pentru a afișa „Postări pentru pagina curentă”, utilizatorul va putea vizualiza o pagină de categorie și va afișa corect postările pe categorii.

Modul Post Slider și Modul Post Title

De asemenea, puteți utiliza modulul Post Slider pentru a afișa Postările pentru pagina curentă. Acest lucru este util pentru crearea unui glisor de postare dinamic care afișează postările generate la vizitarea unei pagini de categorii, la fel cum poate face modulul de blog.

Modulul Post Title poate fi, de asemenea, utilizat, dar este limitat la capacitatea de afișare dinamică a Titlului paginii. Majoritatea celorlalte elemente disponibile în modulul titlului postării nu se aplică unei pagini de arhivă, ci doar șabloanelor de postare specifice.

Titlu postare / arhivă (conținut dinamic)

O modalitate mai ușoară de a afișa Titlul paginii de postare / arhivare este să folosiți un modul Divi obișnuit și apoi să introduceți titlul paginii de postare / arhivare utilizând funcția de conținut dinamic disponibilă în cadrul tuturor modulelor Divi.

De exemplu, puteți utiliza un modul text și apoi puteți adăuga titlul paginii de postare / arhivare ca conținut dinamic la conținutul corpului. Apoi, puteți stiliza titlul oricum doriți.

Acum că înțelegeți instrumentele necesare pentru a crea un șablon de pagină de categorie, să săriți și să creăm unul împreună.

Cum să creați un șablon de pagină de categorie pentru blogul dvs.

Pentru acest șablon de pagină de categorie, obiectivul este crearea unei zone de corp personalizate pentru un șablon care este alocat tuturor paginilor de categorie pentru postările de blog din Divi. Nu vom crea o antet personalizat sau o zonă de subsol pentru acest șablon. Însă puteți utiliza cu ușurință acest șablon pe propriul site web cu propriul antet și subsol.

Crearea și atribuirea unui șablon personalizat pentru categoriile de postări

Pentru a începe, accesați tabloul de bord WordPress și navigați la Divi> Theme Builder. Apoi faceți clic pe zona goală a casetei gri pentru a adăuga un șablon nou.

Apoi, atribuiți șablonul la Toate categoriile de pagini.

Adăugarea unei noi zone de corp personalizate la șablon

Pentru a construi corpul personalizat pentru șablon, faceți clic pe zona Adăugați corp personalizat și apoi selectați „Construiți corp personalizat”.

Apoi alegeți opțiunea „Build From Scratch”.

Adăugați un titlu de arhivă dinamică

În Editorul de aspect șablon, creați un nou rând cu o singură coloană în secțiunea obișnuită.

Apoi adăugați un modul text la rând.

Ștergeți conținutul implicit al corpului și faceți clic pe pictograma „Utilizați conținut dinamic” și selectați opțiunea „Titlu post / arhivă.

Odată ce elementul Titlu postare / arhivare este la locul său, deschideți setările făcând clic pe pictograma roată.

Apoi actualizați zonele de intrare Înainte și După pentru a înfășura conținutul într-o etichetă H1 și adăugați o bucată suplimentară de conținut static după titlul dinamic după cum urmează:

Inainte de:

<h1>

După:

 Articles</h1>

Trebuie să înfășurăm titlul într-o etichetă H1 în scopuri SEO. Cuvântul static „Articole” este adăugat după titlu, astfel încât, dacă un utilizator accesează o pagină a categoriei „Afaceri”, titlul va citi „Articole de afaceri”.

Titlu arhivă dinamică stil

Odată ce conținutul dinamic este la locul său, îl putem stiliza folosind următoarele:

• Font de titlu: Ubuntu
• Font de titlu: Greutate: Bold
• Culoare text antet: # 192231
• Dimensiune text antet: 48 px (desktop), 38 px (tabletă), 28 px (telefon)
• Înălțimea liniei de direcție: 1.2em

Utilizarea modulului Blog pentru a afișa dinamic postările pentru categoria curentă

Cu titlul paginii categoriei dinamice, trebuie să adăugăm modulul blog pentru a afișa postările pentru pagina categorie curentă.

Adăugați un rând nou

Adăugați un nou rând cu o coloană sub rândul actual superior.

Adăugați un modul Blog

Apoi adăugați un modul de blog pe rând.

Actualizați opțiunile de conținut după cum urmează:

• Postări pentru pagina curentă: DA
• Numărul de postări: 9
• Afișează Butonul Citește mai mult: DA

Amintiți-vă, trebuie să ne asigurăm că Postările pentru pagina curentă sunt activate pentru pagina categoriei pentru a extrage arhiva de postare corectă.

Modul de proiectare blog

Cu setările de conținut în vigoare, să facem câteva modificări în design după cum urmează:

• Aspect: grilă

• Titlu Font: Ubuntu
• Greutatea fontului titlului: Bold
• Culoare text titlu: # 192231
• Meta Font: Ubuntu
• Culoare Meta Text: # 985e6d
• Dimensiune Meta Text: 13 px

• Citește mai mult Font: Ubuntu
• Citește mai mult Greutate font: Bold
• Citește mai mult Stilul fontului: subliniere
• Citește mai mult Culoare text: # 985e6d
• Pagination Font: Ubuntu
• Culoarea textului paginării: # 985e6d
• Dimensiune text paginare: 18 px
• Înălțimea liniei de paginare: 2em

• Lățimea marginii aspectului grilei: 0 px
• Box Shadow: vezi captura de ecran
• Puterea neclarității umbrei cutiei: 70 px
• Puterea răspândirii umbrei cutiei: -10px
• Culoare umbră: rgba (25,34,49,0.3)

În acest moment avem o pagină a categoriei de bază în funcțiune completată cu titlul paginii și postările de pe blog care vor fi afișate corect în conformitate cu pagina categoriei curente. Cu toate acestea, putem deveni mai creativi adăugând un modul suplimentar pentru a afișa postarea în moduri creative.

Creați un glisor pentru postări pentru a extrage cele mai recente 4 postări din categoria curentă.

Putem utiliza un modul glisor de postare pentru a afișa și postările din pagina categoriilor dinamic. Iată cum să o faceți.

Adăugați un rând nou

Mai întâi adăugați un rând nou cu un aspect de coloană 1/3 2/3 sub rândul de sus.

Adăugați modulul Post Slider

În coloana din stânga, adăugați un modul glisor de postare.

Apoi actualizați opțiunile de conținut post glisor după cum urmează:

• Postări pentru pagina curentă: DA
• Numărul de postări: 4
• Afișați Meta Meta: NU

Design Post Slider Module

Acum că conținutul glisor de postare este la locul său, actualizați setările de proiectare după cum urmează:

• Alinierea textului: stânga
• Titlu Font: Ubuntu
• Înălțimea liniei de titlu: 1.3em
• Utilizați stiluri personalizate pentru buton: DA
• Dimensiune text buton: 16 px
• Culoarea fundalului butonului: # 985e6d
• Lățimea chenarului butonului: 0 px
• Buton Font: Ubuntu

• Box Shadow: vezi captura de ecran
• Puterea neclarității umbrei cutiei: 70 px
• Puterea răspândirii umbrei cutiei: -10px
• Culoare umbră: rgba (25,34,49,0.3)

Creați un modul de blog cu aspect de lățime completă

În coloana din dreapta, putem adăuga un alt modul de blog cu un aspect cu lățime completă în loc de un aspect cu grilă. Acest lucru ne va permite să oferim o altă zonă de afișare unică pentru postările din categoria noastră.

Adăugați un modul Blog

Pentru a economisi timp, să copiem modulul de blog existent în rândul de jos și să-l lipim în coloana din dreapta de lângă glisorul de postare.

Actualizați setările modulului Duplicate Blog

Deschideți setările modulului Blog duplicat și actualizați următoarele:

• Postări pentru pagina curentă: DA
• Numărul de postări: 3
• Lungime extras: 120
• Afișați imaginea prezentată: NU (cel puțin pentru moment)
• Arată paginare: NU

• Aspect: lățime completă:
• Box Shadow: nici unul

Rezultatul Până acum

Până în prezent, rezultatul este afișarea minimă a celor trei postări de blog.

Dar dacă vrem să facem un pas mai departe, putem adăuga câteva imagini mici prezentate în stânga fiecărui fragment din postare.

Utilizați CSS personalizat pentru a crea imagini recomandate mai mici, care plutesc în stânga conținutului extrasului postării.

Pentru a adăuga câteva imagini mici prezentate în stânga fragmentelor postărilor de blog, trebuie să adăugăm câteva CSS personalizate.

Oferiți modulului Blog Clasă CSS personalizată

Pentru început, trebuie să adăugăm o clasă CSS personalizată la modulul Blog. Deschideți setările blogului și, în fila avansată, introduceți următoarele:

• Clasa CSS: stânga-blog-imagine

Adăugați cod CSS cu un modul de cod

Deoarece tocmai adăugăm un mic fragment CSS la acest șablon, putem folosi un modul de cod. Adăugați un modul de cod sub modulul blog.

Introduceți codul CSS

Apoi introduceți următorul CSS în zona de conținut a codului:

<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>

Actualizați setările modulului blogului pentru a include imaginea recomandată

Acum, putem adăuga imaginea prezentată înapoi, astfel încât să fie afișată în noua poziție din stânga, grație fragmentului CSS.

Stil suplimentar pentru șablon

Înainte de a încheia lucrurile, să facem câteva retușuri minore pentru design.

Adăugați și stilizați un divizor sub titlul arhivei

Adăugați un modul divizor direct sub titlul paginii de arhivă din partea de sus a șablonului.

Apoi actualizați setările divizorului după cum urmează:

• Culoare linie: # 985e6d
• Greutatea divizorului: 3 px
• Lățime maximă: 200 px

Adăugați divizorul de secțiune la aspect

Deschideți setările secțiunii și adăugați un separator de secțiune după cum urmează:

• Stilul divizorului superior: vezi captura de ecran
• Culoare divizor superior: rgba (73,78,107,0,07)
• Înălțimea divizorului: 90vw
• Flip divizor: orizontal și vertical

Utilizați numărul Offset Post cu fiecare modul pentru a evita afișarea posturilor duplicate

În acest moment, toate modulele noastre atrag același conținut pentru pagina curentă a categoriei. Pentru a împiedica aceste module să afișeze duplicate, putem folosi opțiunea Post Offset Number pentru a „sări” un anumit număr de postări care afișează fluxul de postări.

Offset Postul modulului pentru lățime completă

Deoarece glisorul nostru de postare afișează deja prima (cea mai recentă) postare pentru pagina de categorie curentă, putem compensa această postare pe modulul de blog adiacent acesteia. Deschideți setările pentru modulul de blog din dreapta glisorului de postare și actualizați numărul de compensare a postării după cum urmează:

• Număr post offset: 1

Acum modulul va începe cu a doua postare cea mai recentă pentru pagina de categorie curentă.

Offset postare modul modul blog

Odată ce primul offset al postului modulului blogului este la locul său, trebuie să compensăm postările din modulul principal al blogului din partea de jos a șablonului. Deschideți acel modul de blog și actualizați numărul de compensare a postului după cum urmează:

• Număr post offset: 4

Trebuie să setăm numărul de compensare la 4 pentru a ține cont de cele 4 postări care sunt deja afișate mai sus. Modulul va începe acum de unde au rămas celelalte module și va începe cu cea de-a cincea postare cea mai recentă.

Rezultate finale

Pentru a vizualiza rezultatul final, accesați tabloul de bord WordPress și navigați la Postări> Categorii. Apoi faceți clic pentru a vizualiza una dintre categoriile existente.

Iată rezultatul final.

Și aici este pe afișajul tabletei și al telefonului.

Gânduri finale

Sperăm că această postare vă va ajuta să respirați puțin mai ușor când vă confruntați cu provocarea de a crea un design de pagină de categorie pentru site-ul dvs. web. Divi Theme Builder îl face extrem de ușor de realizat, mai ales cu modulul de blog care are acum opțiunea de a afișa postările din pagina curentă. Iar opțiunea de post offset vă permite să combinați mai multe module de blog (sau chiar postarea de module glisante) fără a vedea vreodată postări duplicate afișate.

Cum v-a ajutat Divi Theme Builder să creați pagini de categorii?

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!