Cum să creați dinamic un șablon de postare de blog simplu, prietenos cu UX, cu Divi

Atunci când partajați postări noi pe blog pe site-ul dvs., este important să faceți experiența de citire cât mai ușoară pentru vizitatorii dvs. Asta înseamnă să scapi de cât mai multe distrageri posibil, în timp ce se potrivește în continuare cu branding-ul de pe site-ul tău. De asemenea, este important să permiteți vizitatorilor să controleze dimensiunea textului prin intermediul browserului lor, de unde este utilă unitatea relativă de font rem. Permite oamenilor să regleze dimensiunea fontului care este afișat în browserul lor. În acest tutorial, vom construi un șablon de postare de blog frumos și simplu, care să țină cont de experiența utilizatorului. Veți putea descărca gratuit fișierul JSON!

Să ajungem la asta.

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Descărcați GRATUIT șablonul de postare de blog simplu UX-Friendly

Pentru a vă pune mâna pe șablonul de postare de blog simplu și prietenos cu UX, 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!

Abonați-vă la canalul nostru Youtube

1. Accesați Divi Theme Builder și creați un șablon nou

Accesați Divi Theme Builder

Începeți accesând Divi Theme Builder.

Creați un șablon nou

Creați un șablon nou și utilizați-l în toate postările dvs.

• Utilizare activată: toate postările

2. Începeți să creați corpul postărilor pe blog

Apoi, începeți să creați corpul personalizat al șablonului dvs. de postare.

Adăugați rândul # 1 la secțiunea existentă

Structura coloanei

În editorul de șabloane, adăugați un rând nou la secțiunea care există deja folosind următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și modificați setările de dimensionare după cum urmează:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Coloana 1 și 2 Border

Adăugați o margine dreaptă la prima și a doua coloană următoare.

• Lățimea marginii drepte: 1 px (desktop), 0 px (tabletă și telefon)
• Culoare margine dreaptă: # 333333

Adăugați un modul de text la fiecare coloană

Conținut dinamic

Continuați adăugând un modul de text la fiecare coloană și selectați un conținut dinamic pentru fiecare modul în mod individual.

• Modulul de text din coloana 1: Categorii de postări

• Modulul de text din coloana 2: Data publicării postării

• Modulul de text din coloana 3: Numărul de comentarii postate
• După: Comentarii

Setări text

Treceți la fila de proiectare a fiecărui modul și modificați setările de text după cum urmează:

• Font text: Lato
• Dimensiune text: 1.1rem
• Spațiere scrisoare text: 1 px
• Înălțimea liniei de text: 2em

Adăugați rândul # 2

Structura coloanei

Continuați adăugând un rând nou la secțiune utilizând următoarea structură de coloane:

Adăugați modulul de text nr. 1 în coloană

Conținut dinamic

Adăugați un modul de text și selectați conținutul dinamic al titlului postării.

• Conținut dinamic: titlul postării

• Înainte: <H1>
• După: </H1>

Setări text H1

Treceți la fila de proiectare a modulului și modificați setările de text H1 după cum urmează:

• Font de titlu: Playfair Display
• Alinierea textului de antet: centru
• Dimensiune text antet: 6.2rem (Desktop), 3.2rem (Tabletă), 2.3rem (Telefon)

Spațiere

Adăugați câteva margini superioare și inferioare personalizate în continuare.

• Marja superioară: 50 px
• Marja inferioară: 100 px

Adăugați modulul de text nr. 2 în coloană

Conținut dinamic

Adăugați un alt modul de text chiar sub cel precedent și selectați conținutul dinamic al extrasului postării.

• Conținut dinamic: Postați un extras

Setări text

Modificați setările de text ale modulului după cum urmează:

• Font text: Lato
• Dimensiune text: 1.1rem
• Spațiere scrisoare text: 1 px
• Înălțimea liniei de text: 2em
• Aliniere text: centru

Adăugați rândul # 3

Structura coloanei

Adăugați un alt rând la secțiune folosind următoarea structură de coloane:

Afişa

Asigurați-vă că coloanele rămân unele lângă altele adăugând o linie de cod CSS la elementul principal al rândului.

display: flex;

Adăugați modulul de imagine în coloana 1

Conținut dinamic

Continuați adăugând un modul de imagine în coloana 1 și selectați conținutul dinamic al imaginii de profil a autorului.

• Conținut dinamic: Poza de profil a autorului

Aliniere

Treceți la fila de proiectare a modulului și schimbați alinierea imaginii.

• Alinierea imaginii: dreapta

Dimensionare

Modificați lățimea următoare.

• Lățime: 50 px

Spațiere

Adăugați o margine dreaptă pe tabletă și telefon.

• Marja dreaptă: 20 px (tabletă și telefon)

Frontieră

Și completați setările modulului adăugând o rază de margine la setările de margine.

• Toate colțurile: 100 px

Adăugați un modul de text în coloana 2

Conținut dinamic

În a doua coloană, vom avea nevoie de un modul text. Selectați conținutul dinamic al autorului postării.

• Conținut dinamic: Autor postat

Setări text

Treceți la fila de proiectare și modificați setările de text în consecință:

• Font text: Lato
• Dimensiune text: 1.1rem
• Spațiere scrisoare text: 1 px

Spațiere

Adăugați câteva valori de marjă personalizate în continuare.

• Marja superioară: 15 px
• Marja stângă: 20 px (tabletă și telefon)

Adăugați rândul # 4

Structura coloanei

Adăugați un alt rând la secțiune folosind următoarea structură de coloane:

Adăugați un modul de text în coloană

Lăsați caseta de conținut goală

Adăugați un modul de text în coloană și asigurați-vă că lăsați caseta de conținut goală.

Imagine de fundal dinamică

Adăugați conținutul dinamic al imaginii prezentate la imaginea de fundal a modulului în continuare.

• Conținut dinamic: imagine prezentată

Dimensionare

Continuați modificând setările de dimensionare ale modulului pe diferite dimensiuni de ecran.

• Lățime: 800 px (desktop), 500 px (tabletă), 300 px (telefon)
• Alinierea modulului: centru

Spațiere

Adăugați niște umpluturi personalizate în partea de sus și de jos pe diferite dimensiuni ale ecranului.

• Căptușeală superioară: 400 px (desktop), 250 px (tabletă), 150 px (telefon)
• Căptușeală inferioară: 400 px (desktop), 250 px (tabletă), 150 px (telefon)

Frontieră

Și adăugați o anumită rază de margine la setările de margine pentru a transforma modulul într-un cerc.

• Toate colțurile: 500 px

Adăugați o secțiune nouă

Treceți la următoarea secțiune obișnuită.

Adăugați rândul # 1

Structura coloanei

Adăugați un rând nou folosind următoarea structură de coloane:

Adăugați un modul de conținut pentru postare în coloană

Setări text

Adăugați modulul Post Content în coloană, treceți la fila de proiectare a modulului și modificați setările de text în consecință:

• Font text: Lato
• Dimensiune text: 1.1rem
• Spațiere scrisoare text: 1 px
• Înălțimea liniei textului: 2.3em

Setări text antet

Modificați și setările textului antetului.

• Font de titlu: Playfair Display
• Dimensiune text H2: 3.5rem (Desktop), 2rem (Tabletă și telefon)
• Dimensiune text H3: 2,5rem (Desktop), 1,5rem (Tabletă și telefon)
• Dimensiune text H4: 2.3rem (desktop), 1.3rem (tabletă și telefon)
• Dimensiunea textului H5 și H6: 2rem (desktop), 1rem (tabletă și telefon)

Adăugați rândul # 2

Structura coloanei

Adăugați un alt rând la secțiune folosind următoarea structură de coloane:

Spațiere

Adăugați niște margini superioare personalizate la rând.

• Marja superioară: 100 px

Adăugați modulul de comentarii în coloană

Setări câmpuri

Singurul modul de care avem nevoie în acest rând este un modul de comentarii. Modificați setările câmpurilor după cum urmează:

• Culoarea fundalului câmpurilor: #ffffff
• Fields Font: Lato
• Dimensiune text câmpuri: 1.1rem

• Toate colțurile: 0 px
• Lățimea chenarului câmpurilor: 1 px
• Culoarea chenarului câmpurilor: # 000000

Setări imagine

Modificați și setările imaginii.

• Toate colțurile: 100 px

Setări text titlu

Apoi, modificați setările pentru textul titlului.

• Titlu Nivel antet: H2
• Titlu Font: Playfair Display
• Dimensiune text titlu: 3rem (desktop), 2rem (tabletă și telefon)
• Înălțimea liniei de titlu: 1.4em

Setări Meta Text

Stilizați și meta textul.

• Meta Font: Playfair Display
• Dimensiune Meta Text: 1.4rem

Setări text pentru comentarii

Folosim următoarele setări pentru setările de text pentru comentarii:

• Comentariu Font: Lato
• Dimensiune text comentariu: 1.1rem
• Spațiere scrisoare comentariu: 1 px
• Înălțime linie comentariu: 2em

Setări text buton

Și completați setările modulului stilizând butonul după cum urmează:

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 1.1rem
• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # 000000
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 0 px
• Distanța dintre litere și butoane: 1 px
• Buton Font: Lato

• Căptușeală superioară: 20 px
• Căptușeală inferioară: 20 px

3. Salvați modificările șablonului și constructorului de teme

După ce ați finalizat designul șablonului, salvați toate modificările Divi Theme Builder și previzualizați rezultatul pe postările dvs.!

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Gânduri finale

În această postare, v-am arătat cum să creați un șablon de postare de blog frumos și simplu, care să se concentreze pe experiența utilizatorului pe care o au vizitatorii dvs. în timp ce citesc. Modificați acest șablon de postare utilizând opțiunile încorporate Divi pentru a-l potrivi cu branding-ul site-ului dvs. web. Ați putut descărca gratuit și șablonul JSON! Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.