Cum să proiectezi un șablon de postare pe blog cu Divi's Theme Builder (descărcare GRATUITĂ)

Un șablon de postare pe blog este probabil cel mai important șablon pe care îl puteți adăuga pe un site de blog. Oferă o structură și un design care se aplică „în mod magic” la toate postările de blog din partea frontală, în timp ce bloggerii trebuie să se îngrijoreze doar de a scrie postarea pe backend. Acest lucru economisește drastic timp prin simplificarea procesului de creație pentru a vă transmite rapid postarea pe web. Și cu Divi Theme Builder, nu va trebui să vă mulțumiți cu un șablon de postare plictisitor care seamănă cu orice altă postare de blog de pe web. Puteți crea nenumărate modele autentice (vizual) și puteți adăuga cu ușurință diferite combinații de conținut static și dinamic în șablonul dvs.

În această postare, vom acoperi tot ce trebuie să știți pentru a crea un șablon de postare pe blog folosind Divi Theme Builder. Vom acoperi o mulțime de conținut, dar cred că veți fi surprins cât de ușor pot să prindă viață aceste șabloane în fața ochilor voștri.

Acum să începem!

Trage cu ochiul

Iată o privire rapidă asupra șablonului de postare pe blog pe care îl vom crea în acest tutorial.

Este posibil să fi observat asemănarea acestui design din pachetul nostru de marketing digital. Acest șablon de postare a fost creat pentru a se potrivi cu aspectul, astfel încât să îl puteți utiliza în combinație cu pachetul de layout pentru marketing digital.

Bucurați-vă!

Descărcați GRATUIT șablonul de postare pe blog

Pentru a pune mâna pe șablonul 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 în listă, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare. Nu veți fi abonați ș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.

Ce este un șablon de postare pe blog și de ce aveți nevoie de unul?

Un șablon de postare pe blog este un șablon la nivel de site utilizat pentru toate (sau unele) postări de blog de pe site-ul dvs. Este un șablon predefinit construit cu conținut dinamic, astfel încât orice postare nouă sau existentă va moșteni automat aspectul și designul șablonului atribuit.

Există câteva motive convingătoare pentru a utiliza un șablon de postare pe blog. Motivul principal pentru a utiliza un șablon de postare pe blog este simplificarea procesului de blog. Dacă aveți un șablon pregătit deja conceput pentru postările dvs., puteți accelera drastic procesul de creare, eliminând necesitatea de a proiecta elementele postării din mers și lăsând bloggerilor mai mult timp să facă ceea ce fac cel mai bine - scrieți conținut. Dar asta nu este tot! Un șablon de postare pe blog poate încorpora elemente suplimentare (cum ar fi comentarii, butoane de partajare și opțiuni de e-mail) la postare, pentru a spori implicarea utilizatorilor și a crește conversiile.

Cu Divi Theme Builder, crearea unui șablon de postare pe blog este surprinzător de ușoară. Secretul construirii unui șablon de postare pe blog în Divi este înțelegerea modurilor de utilizat și modul de încorporare a elementelor de conținut dinamic în șablon.

Înainte de a începe să construim împreună un șablon de postare pe blog, să trecem mai întâi la câteva dintre instrumentele disponibile pentru a crea unul.

Blocuri de bază ale unui șablon de postare pe blog

Șabloanele de postare pe blog pot varia în funcție de nevoile blogului. Dar, de obicei, un șablon de postare pe blog va consta din următoarea structură:

• Antet - Zona de sus a postării care include de obicei titlul postării, imaginea prezentată și metadatele postării (categorii, etichete, autor, data postării etc.)
• Postați conținutul - Conținutul principal al articolului.
• Postări conexe - Link-uri către alte articole care ar putea fi interesate de cititori.
• Comentarii - O secțiune pentru care utilizatorii pot adăuga și răspunde la comentarii despre postare.
• Apel la acțiune - De obicei, un formular de optimizare prin e-mail, pictograme de partajare socială sau o ofertă promoțională de un fel.

Module Divi și conținut dinamic

Un șablon de postare pe blog poate fi creat în Divi Theme Builder utilizând capacitățile de conținut dinamic încorporate ale Divi inerente în modulele Divi. Există câteva module Divi care sunt construite special pentru postări. Cu toate acestea, majoritatea modulelor Divi vor avea capacitatea de a atrage conținut dinamic disponibil legat de o postare. Iată o defalcare a unora dintre opțiunile disponibile atunci când proiectați un șablon de postare pe blog în Divi.

• Module Divi create pentru șabloane de postare
  • Modul de navigare post - util pentru furnizarea de legături de navigare către postările anterioare și următoare.
  • Post Slider Module - util pentru furnizarea unei galerii de postări organizate după cele mai recente sau pe categorii.
  • Modulul Titlu post - util pentru afișarea titlului postării cu o imagine prezentată într-un singur modul convenabil.
  • Modul de conținut pentru postare - un modul necesar pentru șablonul de postare pentru afișarea conținutului unei postări. Modulul pentru conținutul postării include, de asemenea, opțiuni de proiectare care pot fi utilizate ca design implicit pentru conținutul postării la nivel de site.

• Elemente de conținut dinamic pentru șablonul de postare disponibil în toate modulele Divi
  • Titlul postării / arhivei
  • Extras din postare
  • Data curenta
  • Sloganul site-ului
  • Autor Bio
  • Autor postat
  • Postați linkul
  • Categorii de postări
  • Numărul de comentarii postate
  • Data publicării postării
  • câmpuri customizate

Acum, că aveți o idee bună despre instrumentele disponibile, să trecem la modul în care putem construi un șablon de postare pe blog în Divi de la zero.

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 (sau pluginul Divi Builder dacă nu utilizați tema Divi).
2. Asigurați-vă că aveți cel puțin câteva postări de blog create pentru a vedea rezultatele șablonului de postări pe blog pe care le vom crea. Asigurați-vă că includeți cât mai mult conținut în fiecare postare (de exemplu, imagine prezentată, categorii etc.), astfel încât să aveți un bun exemplu de postare reală.

După aceea, sunteți gata să începeți să creați un nou șablon pentru postările dvs. de blog în Divi.

Cum să creați un șablon de postare pe blog în Generatorul de teme Divi

Abonați-vă la canalul nostru Youtube

La fel ca toate șabloanele, un șablon de postare pe blog este creat în Divi Theme Builder care vă va permite să construiți șablonul complet de la zero cu puterea Divi Builder.

Crearea unui șablon nou

Din tabloul de bord WordPress, navigați la Divi> Theme Builder. Apoi faceți clic pe pătratul gol „Adăugați un șablon nou”.

Atribuirea șablonului la toate postările de blog

După ce adăugați un șablon nou, se va afișa caseta de setări a șablonului, permițându-vă să atribuiți șablonul paginilor și / sau postărilor de pe site-ul dvs. web. Întrucât dorim să creăm un șablon de postare pe blog pentru toate postările de pe site, selectați „Toate postările” și faceți clic pe butonul Creați șablonul.

Crearea unui aspect personalizat al zonei corpului

Apoi, faceți clic pe zona „Adăugați un corp personalizat” al șablonului pentru a crea o nouă zonă de corp pentru șablonul de postare. Apoi selectați „Construiți corp personalizat”.

Selectați opțiunea „Build From Scratch” pentru a începe procesul de construire.

Construirea aspectului corpului personalizat pentru șablonul de postare

Odată ce este lansat Editorul de machetare a șabloanelor, aveți libertatea de a construi întregul corp al șablonului de postare de pe blog de la zero folosind Divi Builder.

Pentru a începe, adăugați un rând cu o coloană la secțiunea obișnuită implicită.

Apoi, înainte de a adăuga un modul, actualizați setările secțiunii cu un design de fundal și câteva umpluturi după cum urmează:

• Culoarea din stânga a gradientului de fundal: # 8624e1
• Culoarea dreaptă a gradientului de fundal: # 3607a6
• Direcția gradientului: 130 grade
• Poziția inițială: 25%
• Imagine de fundal: inserați imaginea
• Utilizați Efect Parallax: DA
• Garnitura: 7vw sus, 7vw jos

Crearea titlului titlului postării ca conținut dinamic cu modul text

În interiorul rândului cu o coloană, adăugați un modul text.

Apoi faceți clic pe pictograma conținut dinamic atunci când treceți cu mouse-ul peste zona de conținut a corpului.

Selectați din listă elementul Titlu postare / arhivare.

Apoi, faceți clic pe pictograma roată din elementul Titlu post / arhivă și actualizați zonele de intrare înainte și după cu etichete h1 după cum urmează:

Inainte de:

<h1>

După:

</h1>

Acum proiectați titlul cu următoarele setări de proiectare:

• Font text: Roboto
• Dimensiune text text: 16 px
• Înălțimea liniei textului: 1,8em
• Alinierea textului: centru
• Titlu Font: Roboto
• Greutatea fontului de titlu: Bold
• Dimensiune text antet: 60 px (desktop), 40 px (tabletă), 32 px (telefon)
• Înălțimea liniei de direcție: 1.2em

Adăugarea imaginii recomandate utilizând un modul de imagine ca conținut dinamic

După ce secțiunea de titlu este la locul său, să adăugăm imaginea prezentată pentru șablonul de postare. Pentru a face acest lucru, adăugați o altă secțiune obișnuită cu un aspect de coloane de două treimi.

Apoi adăugați un modul de imagine în coloana din stânga.

Apoi adăugați elementul de conținut dinamic al imaginii prezentate pentru imagine.

Proiectarea modulului de imagine

Treceți la fila de proiectare și personalizați imaginea după cum urmează:

• Aliniere imagine: centru
• Marja: -9vw (desktop), 0vw (tabletă)
• Colțuri rotunjite: 8 px
• Box Shadow: vezi captura de ecran
• Box Shadow Vertical Position: 16 px
• Puterea neclarității umbrei cutiei: 96 px
• Puterea răspândirii umbrei cutiei: -24px

Adăugați Post Author și Author Bio în Blurb Module ca Dynamic Content

În continuare, vom adăuga un Post Author și un Post Author Bio folosind un modul de blog. Deci, mergeți mai departe și adăugați un modul de blog în coloana din dreapta.

În setările blurb, treceți cu mouse-ul peste caseta de introducere a titlului și faceți clic pe pictograma conținut dinamic. Apoi adăugați elementul de conținut dinamic Post Author pentru conținutul titlului.

Apoi, deschideți setările Post Author și actualizați datele introduse înainte după cum urmează:

• Înainte: Scris de

Pentru conținutul corpului modulului blurb, faceți clic pe pictograma conținut dinamic și selectați elementul de conținut dinamic „Author Bio” din listă.

Pentru imaginea modulului de afișare, adăugați „Afișați imaginea de profil a autorului” ca conținut dinamic.

Design Post Author și Modul Bio Blurb

Acum optimizați designul imaginii după cum urmează:

• Plasare imagine / pictogramă: stânga
• Colțuri rotunjite ale imaginii: 50%
• Titlu Font: Roboto
• Greutatea fontului titlului: Bold
• Înălțimea liniei de titlu: 1.3em
• Font corp: Lato
• Înălțimea liniei corpului: 1.4em
• Lățimea imaginii: 50 px

Adăugați categorii de postări în modulul Blurb ca conținut dinamic

Sub Autorul și Autorul Modulului Bio tocmai creat, adăugați un alt modul de blurbare sub acesta și selectați elementul de conținut dinamic Post Categorii pentru Titlu.

Apoi actualizați textul cu o pictogramă după cum urmează:

• Utilizați pictograma: DA
• Pictogramă: vezi captura de ecran

Design Post Category Blurb Module

Actualizați setările de proiectare după cum urmează:

• Culoare pictogramă: #dddddd
• Plasare imagine / pictogramă: stânga
• Utilizați dimensiunea fontului pictogramei: DA
• Pictogramă Dimensiune font: 20 px
• Titlu Font: Roboto
• Titlu Greutate font: Mediu
• Culoare text titlu: # f92c8b
• Dimensiune text titlu: 16 px
• Înălțimea liniei de titlu: 20 px
• Căptușeală: 16 px stânga

Adăugați numărul de comentarii la modulul Blurb ca conținut dinamic

Pentru a adăuga numărul de comentarii de postare pentru șablonul de postare pe blog, copiați modulul blurb recent creat.

Apoi actualizați conținutul titlului cu elementul de conținut dinamic Contorizare postare comentarii.

Deoarece numărul de comentarii afișează doar un număr, trebuie să completăm numărul cu un text de adăugare după număr. Pentru a face acest lucru, deschideți setările Post Comment Count și actualizați următoarele:

După: Comentariu (comentarii)

Apoi actualizați pictograma după cum urmează:

• Utilizați pictograma: DA
• Pictogramă: vezi captura de ecran

Adăugați Data publicării postării în modulul Blurb ca conținut dinamic

Pentru ultima bucată de metadate, copiați modulul blurb cu numărul de comentarii. Apoi actualizați conținutul titlului cu elementul de conținut dinamic „Postează data publicării”.

Sfat: puteți deschide oricând setările elementului dinamic Data publicării postării pentru a modifica formatul afișării datei.

Apoi actualizați pictograma după cum urmează:

• Utilizați pictograma: DA
• Pictogramă: vezi captura de ecran

Adăugați un modul de conținut Post cu setări de proiectare pentru conținut

Având în loc titlul postării, imaginea prezentată, autorul postării și metadatele, suntem pregătiți pentru conținutul principal al postării.

Adăugați un rând nou cu un aspect cu o coloană.

Apoi adăugați un modul de conținut de postare pe rând.

Acest modul de conținut al postării este locul unde va fi afișat conținutul principal al postării. În plus, putem actualiza setările de proiectare pentru a stabili designul implicit al întregului conținut de postare introdus utilizând editorul implicit. Putem actualiza setările pentru modulul Post Content așa cum am face cu orice alt modul. Și putem vizualiza conținutul simulat furnizat de modul pe măsură ce actualizăm modulul.

Deschideți setările modulului de conținut post și actualizați următoarele setări de imagine:

• Imagine Colțuri rotunjite: 8 px
• Image Box Shadow: vezi captura de ecran
• Box Shadow Vertical Position: 16 px
• Puterea neclarității umbrei cutiei: 96 px
• Puterea răspândirii umbrei cutiei: -24px

În continuare, trebuie să setăm designul pentru toate elementele posibile de conținut text pentru momentul în care un utilizator creează o postare pe blog folosind editorul implicit. Deschideți comutarea grupului de opțiuni de text pentru a afișa cele 5 file diferite de tipuri de modele de text - paragraf, link, listă neordonată, listă ordonată și blockquote.

Apoi actualizați următoarele opțiuni sub fiecare dintre file.

Continuați să actualizați setările pentru textul titlului pentru fiecare nivel de titlu - h1, h2, h3, h4, h5, h6.

• Titlu Font: Roboto
• Greutatea fontului de titlu: Bold
• Dimensiune text antet (h1): 56 px (desktop), 42 px (tabletă), 28 px (telefon)
• Dimensiune text antet (h2): 45 px (desktop), 35 px (tabletă), 24 px (telefon)
• Dimensiune text antet (h3): 40 px (desktop), 30 px (tabletă), 20 px (telefon)
• Dimensiune text antet (h4): 32 px (desktop), 24 px (tabletă), 18 px (telefon)
• Dimensiune text antet (h5): 28 px (desktop), 20 px (tabletă), 16 px (telefon)
• Dimensiune text antet (h6): 24 px (desktop), 18 px (tabletă), 14 px (telefon)

Adăugați un modul de navigare post

Sub Modulul de conținut de postare, adăugați un nou rând cu o singură coloană cu un modul de navigare postată.

Actualizați textul anterior și următorul link după cum urmează:

• Link anterior: Anterior:% title
• Următorul link: Următorul:% title

Apoi actualizați designul de navigare după cum urmează:

• Linkuri Font: Roboto
• Linkuri Greutate font: Bold
• Culoare text linkuri: # f92c8b

Adăugați secțiunea Postări conexe

După navigarea postărilor, suntem gata să adăugăm o secțiune „postări conexe” la șablonul nostru de postare pe blog. Acest lucru va fi util pentru a oferi utilizatorului postări sugerate pe baza categoriei curente a postării vizualizate.

Adăugați un titlu de postare similar utilizând modulul text

Înainte de a adăuga modulul Blog pentru a trage postările aferente, trebuie să creăm un titlu static pentru secțiune. Pentru aceasta, creați o nouă secțiune cu un rând cu o coloană. Apoi adăugați un modul text la rând.

Actualizați conținutul textului cu următorul titlu H2:

<h2>You May Also Like...</h2>

Apoi actualizați designul textului antetului după cum urmează:

• Rubrica 2 Font: Roboto
• Titlul 2 Dimensiune text: 48 px (desktop), 38 px (tabletă), 28 px (telefon)

Acum că titlul nostru este în vigoare, suntem gata să adăugăm postările noastre conexe.

Adăugați postări corelate utilizând modulul Blog cu postări din categoria curentă

Sub modulul text care conține titlul, adăugați un nou modul blog.

Apoi actualizați conținutul modulului blog după cum urmează:

• Numărul de postări: 3
• Categorii incluse: Categorie curentă
• Lungime extras: 120
• Arată autorul: NU
• Afișați categorii: NU
• Arată paginare: NU

Cel mai important aspect al acestor setări este selectarea „categoriei curente”. Acest lucru va permite șablonului de postare să extragă cele mai recente postări care au aceeași categorie cu postarea curentă.

Cu setările de conținut ale modulului blogului, treceți la setările de proiectare și actualizați următoarele:

• Aspect: grilă
• Titlu Font: Roboto
• Dimensiune text titlu: 14 px
• Înălțimea liniei de titlu: 1.3em
• Font corp: Lato
• Meta Font: Lato
• Culoare Meta Text: # f92c8b
• Dimensiune Meta Text: 13 px
• Aspectul grilei Colțuri rotunjite: 20 px

Continuați să actualizați designul cu o umbră de casetă, după cum urmează:

• Lățimea marginii aspectului grilei: 0 px
• Box Shadow: Vedeți Captura de ecran
• Box Shadow Vertical Position: 16 px
• Puterea neclarității umbrei cutiei: 96 px
• Puterea răspândirii umbrei cutiei: -24px

Adăugați modulul Comentarii

Secțiunea finală a acestui șablon de postare pe blog va conține comentariile. Pentru a adăuga comentarii la postare, pur și simplu creați un nou rând cu o coloană și plasați modulul de comentarii în interior.

Modulul Comentarii de proiectare

Tot ce mai rămâne de făcut acum este să personalizați designul modulului de comentarii pentru a se potrivi cu șablonul nostru. Actualizați următoarele setări de proiectare:

• Culoare fundal: # f2f5f9
• Culoarea fundalului câmpurilor: #ffffff
• Câmpuri de fundal Culoare fundal: #ffffff
• Câmpuri de focalizare Culoare text: # 222222
• Marja câmpurilor: 3 px de jos
• Căptușire câmpuri: 18 px sus, 18 px jos
• Fields Font: Lato
• Dimensiune text câmpuri: 16 px
• Înălțimea liniei câmpurilor: 1.4em

Continuați să actualizați setările după cum urmează:

• Imagine Colțuri rotunjite: 60 px
• Titlu Font: Roboto
• Dimensiune text titlu: 26 px (desktop), 20 px (tabletă), 15 px (telefon)
• Înălțimea liniei de titlu: 1.3em
• Meta Font: Lato
• Comentariu Font: Lato
• Culoarea textului comentariului: # 222222
• Căptușeală: 5% sus, 5% jos, 5% stânga, 5% dreapta

În cele din urmă, personalizați stilul butonului pentru comentarii după cum urmează:

• Dimensiune text buton: 14 px
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 4 px
• Distanța dintre litere și butoane: 5 px (desktop), 5,5 px (trecere)
• Buton Font: Roboto
• Buton Font Greutate: Bold
• Stilul fontului butonului: majuscule (TT)
• Garnitura de butoane: 16 px sus, 16 px jos

Adăugați divizorul de secțiune în antet

Nu uitați de toate opțiunile uimitoare de proiectare la dispoziția dvs. atunci când proiectați șablonul de postare. De exemplu, putem oferi secțiunii antet un design divizor. Pentru a face acest lucru, reveniți în partea de sus a paginii și deschideți setările pentru secțiunea de sus care conține antetul. Apoi actualizați următoarele:

• Stilul divizorului inferior: vezi captura de ecran
• Culoare divizor: #ffffff
• Înălțimea împărțitorului: 10vw
• Flip divizor: orizontal

Nu uitați să salvați setările pentru aspect și, de asemenea, pentru Theme Builder, astfel încât modificările dvs. să fie salvate.

Asta e! Să verificăm rezultatul final.

Rezultat final

Pentru a vizualiza rezultatul final, putem deschide orice postare de blog pe site-ul nostru Divi (deoarece șablonul a fost atribuit tuturor postărilor de blog).

Iată un exemplu de postare când îl vizualizați din editorul de postări din backend.

Iată postarea din partea frontală cu șablonul nostru de postare pe blog.

Iată-l pe ecranul de pe tabletă și telefon:

Folosind Divi Builder pentru a crea o postare pe blog cu un șablon de postare pe blog

Dacă alegeți, puteți implementa cu ușurință Divi Builder pentru a proiecta o postare de blog utilizând un șablon de postare de blog ca acesta. Orice conținut creat și proiectat cu Divi Builder va fi afișat în zona Post Content Module din șablon.

Gânduri finale

Sper că acest tutorial servește ca un bun punct de plecare pentru crearea propriului șablon de postare de blog de la zero folosind Divi Builder. Nu uitați să vă alocați timp pentru a lua în considerare toate instrumentele disponibile, precum și modul în care doriți să structurați aspectul șablonului de postare. Este întotdeauna important să utilizați cât mai multe elemente de conținut dinamic în întregul șablon de postare pe blog pentru a eficientiza mai bine procesul de creare implicat în blogging. Cu un șablon frumos, un blogger se poate concentra cu adevărat pe crearea de conținut, în timp ce șablonul face tot ceea ce se ridică în mod automat.

Ați construit un șablon de postare pe blog folosind Divi Theme Builder? Spuneți-ne ce credeți.

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

Noroc!