Cum să creați o bară dinamică de informații despre postare pentru șablonul dvs. de postare Divi Blog

Adăugarea de conținut dinamic la șablonul dvs. de postare pe blog este esențială pentru furnizarea unor lucruri precum titlul postării, metadatele, imaginea prezentată etc. În mod normal, aceste elemente dinamice sunt plasate ca elemente statice normale în proiectarea aspectului. Cu toate acestea, poate fi util să păstrați unele dintre aceste elemente dinamice în prim plan pentru cititorii dvs. Aici este utilă o bară dinamică de informații despre postare. O bară dinamică de informații despre postare rămâne fixată în partea de sus a browserului (așa cum ar fi un antet fix) și include bucăți utile de conținut dinamic și alte CTA-uri. De exemplu, puteți utiliza această bară pentru a reaminti cititorilor postarea pe care o citesc în prezent, un link pentru a lăsa un comentariu sau un link către o categorie asemănătoare.

În acest tutorial, vă vom arăta cum să creați o bară dinamică de informații despre postări și să o adăugați la șablonul de postare pe blog folosind Divi Theme Builder. După ce ați terminat, această bară va funcționa perfect pentru toate postările de blog de pe site.

Să începem!

Trage cu ochiul

Iată o privire rapidă asupra designului pe care îl vom construi în acest tutorial. Observați cum linkurile ancoră („Lasă un comentariu” și „Abonează-te”) trimit utilizatorii către zona corespunzătoare din postare.

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 secțiunii în Divi Theme Builder, navigați la Divi Theme Builder.

Faceți clic pe pictograma de portabilitate.

În fereastra pop-up de portabilitate, selectați fila de import și alegeți fișierul de descărcare de pe computer.

Apoi faceți clic pe butonul de import.

După ce ați terminat, șablonul de secțiune va apărea în Divi Theme Builder.

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

Partea 1: Importul șabloanelor premade

Pentru acest tutorial, vom folosi câteva șabloane premade din al șaselea pachet de constructori de teme. Vom importa șablonul de site implicit, care ne va oferi un antet global funcțional în care vom adăuga bara de informații despre postare. Și vom importa șablonul de postare pe blog pentru a ne testa rezultatele pe o postare live.

IMPORTANT: Cel mai bine ar fi să importați aceste șabloane pe un site de testare, astfel încât să nu deranjați un site live.

Importați șablonul de site implicit

În primul rând, va trebui să descărcați al șaselea pachet GRATUIT pentru constructor de teme pentru Divi. Apoi dezarhivați fișierul.

Din tabloul de bord WordPress, navigați la Divi> Theme Builder. Apoi faceți clic pe pictograma de portabilitate din partea dreaptă sus. În fereastra pop-up de portabilitate, selectați fila de import. Apoi alegeți fișierul json șablon implicit din folderul descărcat și faceți clic pe butonul de import. Aceasta va importa un nou șablon de site implicit cu antet și subsol global.

Importați șablonul de postare

Repetați acest proces pentru a importa șablonul de postare din același folder descărcat. Deschideți fereastra pop-up de portabilitate, alegeți fișierul post json șablon și faceți clic pe butonul de import. Acest lucru vă va oferi un șablon de postare atribuit tuturor postărilor de pe site-ul dvs., împreună cu antetul implicit un subsol.

Dezactivați Global în antetul șablonului de postare

Vom adăuga bara noastră de informații dinamice a postării în antetul șablonului de postare. Cu toate acestea, deoarece vrem bara de informații despre postare doar pe șablonul de postare, trebuie să dezactivăm globalul din antet, astfel încât bara noastră să nu fie adăugată la toate anteturile de pe întreg site-ul. Pentru a dezactiva global pe antetul global, deschideți meniul de setări de pe antetul global și selectați „Dezactivați global”.

Acum antetul ar trebui să fie gri cu eticheta „Antet personalizat”. Odată gata, faceți clic pe pictograma de editare pentru a edita șablonul de aspect al antetului.

Construirea barei de informații dinamice a postării

Adăugarea secțiunii și rândului

În editorul de aspect al antetului, creați o nouă secțiune obișnuită sub secțiunea curentă care deține antetul.

Apoi adăugați o secțiune cu o jumătate, un sfert și un sfert de coloană.

Setări secțiune

Deschideți setările secțiunii și actualizați următoarele:

• Culoare fundal: #eceffe
• Căptușeală: 10 px sus, 10 px jos

Setări rând

După adăugarea setărilor secțiunii, deschideți setările pentru rând și actualizați următoarele:

• Lățimea jgheabului: 1
• Căptușeală: 0 px sus, 0 px jos

Sub fila avansată, adăugați următorul CSS personalizat la elementul principal:

display:flex !important;
flex-wrap: nowrap;
align-items: center;

Acest lucru vă va asigura că coloanele se stivuiesc în jos pe mobil.

Adăugați conținut dinamic pentru titlul postării

Prima piesă de conținut dinamic pe care o vom adăuga în bară este titlul postării. Acest lucru va servi ca un memento util cititorului asupra titlului postului pe care îl citesc în prezent.

Adăugați un modul de text

Pentru a crea titlul postării ca conținut dinamic, creați un nou modul de text în coloana din stânga.

Adăugați titlu de postare / arhivă ca conținut dinamic

Apoi, faceți clic pe pictograma „Utilizați conținut dinamic” în timp ce plasați cursorul peste zona corpului setărilor de text. Selectați „Titlu postare / arhivă” din listă.

Deschideți setările de conținut dinamic pentru titlul postării / arhivei și adăugați următoarele în caseta de intrare anterioară:

You're Reading: 

Apoi salvați modificările.

Setări de proiectare

Sub fila Design, personalizați stilul titlului dinamic după cum urmează:

• Text Font: Ubuntu
• Greutate font text: mediu
• Culoarea textului textului: # 121212
• Dimensiune text text: 14 px (desktop), 12 px (tabletă), 11 px (telefon)

Adăugați informații despre categoriile de postări dinamice

Pentru a crea informațiile despre categoriile de postări, copiați modulul text care deține titlul postării.

Apoi deschideți setările modulului de text duplicat și adăugați categoriile de postări ca conținut dinamic în corp.

Deschideți Setările de conținut dinamic pentru categoriile de postări și actualizați următoarele:

• Înainte: În
• Categorii Separator: &

Actualizați culoarea linkului

Sub fila de proiectare, actualizați culoarea link-ului după cum urmează:

• Culoare text link: # 4160fd

Adăugarea informațiilor dinamice de numărare a comentariilor

O altă informație utilă pe care o vom adăuga la bara de informații despre postare este numărul de comentarii care îi amintește utilizatorului să interacționeze cu propriile comentarii dacă dorește. Numărul de comentarii va include și un link către comentariile postării.

Pentru a crea informațiile dinamice de numărare a comentariilor, copiați modulul text cu categoriile și trageți-l în coloana din mijloc.

Apoi adăugați numărul de comentarii postate ca conținut dinamic în corpul textului.

Deschideți setările de numărare a comentariilor postate și adăugați următoarele:

• După: comentariu (comentarii)

Adăugarea îndemnului „Lasă un comentariu”

În plus față de numărul de comentarii, vom adăuga un simplu apel la acțiune pentru a lăsa un comentariu. Linkul va fi un link ancoră care derulează către secțiunea de comentarii din partea de jos a postării.

Pentru a crea CTA, copiați modulul Text din coloana 2, ținând numărul de comentarii.

Apoi deschideți setările de text pentru duplicat și adăugați următorul link html în corp:

<a href="#respond">Leave a Comment</a>

Adăugarea butonului Abonare

Ultimul lucru pe care îl vom adăuga în bara de informații despre postare este un buton de abonare. Acesta va fi, de asemenea, un link de ancorare care aduce utilizatorul la secțiunea șablonului de postare care include un formular de înscriere prin e-mail.

Pentru a face acest lucru, adăugați un modul buton în coloana din dreapta.

Sub fila Design, actualizați stilurile butoanelor după cum urmează:

• Dimensiune text buton: 14 px (desktop), 12 px (tabletă), 11 px (telefon)
• Culoarea textului butonului: #ffffff
• Buton Gradient de fundal Culoare stânga: # 7e5ce6
• Buton Gradient de fundal Culoare dreaptă: # 25b8ee
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 100 px
• Distanța dintre litere și butoane: 2 px
• Buton Font: Ubuntu
• Buton Font Greutate: Bold
• Stil Font Buton: TT
• Umplutură (desktop): 10 px sus, 10 px jos, 20 px stânga, 20 px dreapta
• Căptușeală (tabletă): 6 px sus, 6 px jos, 14 px stânga, 14 px dreapta

Pentru a adăuga legătura de ancorare la buton, accesați fila conținut și adăugați următoarea adresă URL a butonului:

• Adresa URL a butonului: #subscribe

Acest link nu va funcționa până când nu adăugăm un ID CSS corespunzător în secțiunea care deține formularul de înscriere prin e-mail din corpul șablonului de postare.

Dezactivați Coloana 1 pe mobil

Există doar atât de mult spațiu pe mobil pentru un bar fix. De aceea, va trebui să luăm decizii cu privire la ce informații să includem. Pentru acest exemplu, vom lăsa cele două coloane cu CTA-uri pe mobil și vom dezactiva coloana cu titlul și categoriile postării.

Pentru aceasta, deschideți setările pentru coloana 1. Sub fila avansată, dezactivați vizibilitatea pe telefon și tabletă.

Oferind secțiunii o poziție fixă ​​și un index Z ridicat

Odată ce proiectul este terminat, putem da secțiunii o poziție fixă. Ideea este să ascunzi bara din spatele secțiunii cu antetul inițial. Apoi, pe măsură ce utilizatorul derulează, bara de informații fixă ​​a postului va fi dezvăluită de sub antet.

Deschideți setările secțiunii și actualizați următoarele:

• Poziție: Fix
• Indicele Z: 998

Observați că indexul z este 998 pentru că vreau ca bara fixă ​​să stea deasupra restului conținutului din postare.

Actualizați indexul antetului Z al secțiunii

Deoarece secțiunea barei de informații despre postare are un indice z mai mare, se va afișa deasupra secțiunii cu antetul. Pentru a remedia acest lucru, deschideți setările secțiunii pentru secțiune cu antetul și adăugați următoarele:

• Index Z: 999 (cu unul mai mult decât secțiunea cu bara)

Salvați modificările în editorul de aspect.

Adăugați ID CSS la rândul de înscriere prin e-mail pe șablonul de corp

Butonul de abonare CTA pe care îl adăugăm la bară are încă nevoie de o ancoră sau de un loc în care să „sări” pe șablonul de postare. Întrucât CTA urmează să se „aboneze”, avem nevoie de aceasta pentru a trece la formularul opi-in de e-mail.

Pentru a face acest lucru, deschideți zona „corp personalizat” a șablonului de postare în generatorul de teme.

Găsiți rândul cu formularul de înscriere prin e-mail în partea de jos a aspectului și adăugați următorul ID CSS:

• ID CSS: abonați-vă

Acest lucru va permite linkului de ancorare al butonului de abonare să deruleze la această zonă specifică a șablonului.

După ce ați terminat, salvați modificările la aspect și la generatorul de teme.

Rezultat final

Pentru a vedea rezultatul final, pur și simplu deschideți și vizualizați o postare live pe site. Observați cum linkurile de ancorare („Lasă un comentariu” și „Abonează-te”) trimit utilizatorii către zona corespunzătoare din postare.

Gânduri finale

Sperăm că această bara de informații dinamică a posturilor va fi utilă pentru a spori UX-ul postărilor de pe blogul dvs. Divi. Simțiți-vă liber să experimentați și alte informații. Sunt sigur că există o modalitate de a include o postare legată acolo cu un modul de blog.

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

Noroc!