Cum să creați o bară laterală lipicioasă pentru șablonul dvs. de postare pe blog cu Divi

Când creați orice fel de site web, sunt mari șanse să doriți să faceți blog ocazional și pe acel site. Pe lângă faptul că aveți nevoie de o pagină de blog care să conțină toate postările dvs. de blog într-un formular de listă, veți dori să aveți un șablon de postare pe blog pe care să îl puteți atribui automat noilor postări de blog pe care le creați. Proiectarea unui șablon de postare pe blog cu Divi's Theme Builder este incredibil de ușoară. Și acum, cu noile opțiuni lipicioase ale lui Divi, puteți dezactiva și bara laterală lipicioasă chiar de pe bat! În tutorialul de astăzi, vă vom arăta exact cum să faceți acest lucru și veți putea descărca gratuit fișierul JSON al șablonului de postare pe blog!

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 șabloanele de postare pe blogul barei laterale GRATUIT

Pentru a vă pune mâinile pe șabloanele gratuite de postare de pe bara laterală lipicioasă, va trebui mai întâi să le 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!

https://youtu.be/8hTA3ogf3ZQ

Abonați-vă la canalul nostru Youtube

1. Accesați Divi Theme Builder și adăugați un șablon nou

Accesați Divi Theme Builder și adăugați un șablon nou

Începeți accesând Divi Theme Builder și adăugând un șablon nou.

Utilizați șablonul pentru toate postările

Utilizați acest nou șablon pentru toate postările.

• Utilizare activată: toate postările

Începeți să construiți corpul șablonului

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

2. Începeți să creați corpul postării pe blog (bara laterală dreaptă)

Secțiunea # 1 Setări

Fundal de gradient

Odată ajuns în editorul de șabloane, puteți începe să construiți designul. Deschideți secțiunea pe care o puteți observa în partea de sus a șablonului și aplicați un fundal de gradient.

• Culoare 1: # 8995ff
• Culoare 2: # 6163b5
• Direcția gradientului: 150 grade

Spațiere

Treceți la fila de proiectare a secțiunii și eliminați toate umpluturile implicite de sus și de jos.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Culoare de fundal

Fără a adăuga încă module, deschideți setările rândului și aplicați o culoare de fundal.

• Culoare fundal: # 8995ff

Dimensionare

Treceți la fila de proiectare a rândului și modificați setările de dimensionare în consecință:

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

Spațiere

Adăugați câteva umpluturi la stânga și la dreapta în continuare.

• Căptușeală stângă: 3%
• Căptușeală dreaptă: 3%

Frontieră

Apoi, includeți câteva colțuri rotunjite în setările de margine.

• Toate colțurile: 20 px

Box Shadow

Aplicați și o umbră de cutie.

• Puterea neclarității umbrei cutiei: 50 px
• Culoare umbră: rgba (0,0,0,0.08)

Transformă Traducere

Și completați setările rândului modificând în mod corespunzător setările de traducere a transformării:

• Dreapta: 50 px

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

Conținut dinamic

Adăugați un prim modul de text în coloana 1 și selectați următorul conținut dinamic:

• Conținut dinamic: publicați categorii

Setări text

Treceți la fila de proiectare a modulului și stilizați textul în consecință:

• Font text: Alata
• Culoarea textului: #ffffff
• Dimensiune text: 1rem
• Spațiere scrisoare text: 1 px
• Înălțimea liniei de text: 2em

Setări text link

Schimbați și culoarea textului linkului.

• Culoare text link: #ffffff

Clonați modulul de text de două ori și plasați duplicatele în coloanele rămase

După ce ați finalizat primul modul de text, puteți clona întregul modul de două ori și puteți plasa duplicatele în cele două coloane rămase ale rândului.

Schimbați conținutul dinamic

Schimbați conținutul dinamic pentru fiecare dintre duplicate.

• Primul duplicat: data publicării postării

• Al doilea duplicat: Numărul de comentarii postate
• După: Comentarii
• Link către zona de comentarii: Da

Adăugați secțiunea 2

Spațiere

Adăugați o altă secțiune chiar sub cea anterioară. Deschideți setările secțiunii și aplicați următoarele valori de umplere de sus și de jos:

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 150 px

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou 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 în consecință:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 2
• Lățime: 90%
• Lățime maximă: 2580 px

Spațiere

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

• Marja superioară: 100 px
• Marja inferioară:
  • Desktop: 100 px
  • Tabletă și telefon: 50 px

Setări coloana 1

Spațiere

Apoi, deschideți setările coloanei 1 și aplicați câteva umpluturi la stânga și la dreapta.

• Căptușeală stângă: 5%
• Căptușeală dreaptă: 5%

Setări coloana 2

Culoare de fundal

Treceți la setările coloanei 2 și aplicați o culoare de fundal alb.

• Culoare fundal: #ffffff

Spațiere

Includeți și câteva valori de umplere personalizate.

• Căptușeală superioară: 5%
• Căptușeală inferioară: 5%
• Căptușeală stângă: 5%
• Căptușeală dreaptă: 5%

Frontieră

Apoi, accesați setările de margine și aplicați următoarele setări:

• Toate colțurile: 20 px
• Frontiera de sus:
  • Lățimea marginii superioare:
    • Desktop: 0 px
    • Tabletă și telefon: 5 px
  • Culoarea chenarului superior: # 8995ff
• Bordura stângă:
  • Lățimea marginii stângi:
    • Desktop: 5 px
    • Tabletă și telefon: 0 px
  • Culoare margine stânga: # 8995ff

Box Shadow

Completați setările coloanei aplicând următoarea umbră a casetei:

• Puterea neclarității umbrei cutiei: 50 px
• Culoare umbră: rgba (0,0,0,0.08)

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

Conținut dinamic H1

Este timpul să adăugați module, începând cu un modul de text în coloana 1. Selectați următorul conținut dinamic:

• Conținut dinamic: titlu de postare / arhivă
• Înainte: <H1>
• După: </H1>

Setări text H1

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

• Font de titlu: Alata
• Dimensiune text antet:
  • Desktop: 4.8rem
  • Tabletă: 3.2rem
  • Telefon: 2.3rem
• Distanța între litere de antet: -2 px

Spațiere

Adăugați și câteva margini personalizate de sus și de jos.

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

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

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

Adăugați un alt modul de text în coloana 1 și lăsați caseta de conținut goală.

Imagine de fundal dinamică

În schimb, folosim modulul de text pentru a prezenta imaginea prezentată dinamic a postării ca imagine de fundal.

• Imagine de fundal dinamică: imagine prezentată
• Dimensiunea imaginii de fundal: copertă

Spațiere

Treceți la fila de proiectare a modulului și aplicați următoarele valori de umplere:

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

Frontieră

Apoi, accesați setările de margine și adăugați câteva colțuri rotunjite.

• Toate colțurile: 20 px

Box Shadow

Completați setările modulului aplicând următoarele setări de umbră a casetei:

• Puterea neclarității umbrei cutiei: 50 px
• Culoare umbră: rgba (0,0,0,0.08)

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

Setări text corp

Următorul modul de care avem nevoie în șablonul nostru de postare este Modulul de conținut pentru postare. Acest modul reprezintă conținutul dvs. dinamic al postărilor de blog. Treceți la fila de proiectare a modulului și modificați setările de text după cum urmează:

• Font text: Lato
• Dimensiune text: 1.1rem
• Înălțimea liniei textului: 2.3em

Setări text antet

Schimbați și fontul de titlu.

• Font de titlu: Alata

Spațiere

Și eliminați marja de jos implicită.

• Marja inferioară: 0 px

Clasa CSS

Nu în ultimul rând, accesați fila avansată și aplicați următoarea clasă CSS:

• Clasa CSS: blog-post-conținut

Adăugați un modul de cod în coloana 1

Adăugați cod CSS pentru spațiul dintre titluri și conținutul paragrafului

Folosim clasa CSS pe care am atribuit-o Modulului de conținut de postare pentru a adăuga spațiu între titluri și paragrafe. Adăugați un modul de cod chiar sub modulul Postați conținutul și plasați următorul cod CSS în interiorul modulului:

<style>
.blog-post-content p,
.blog-post-content h1,
.blog-post-content h2,
.blog-post-content h3,
.blog-post-content h4,
.blog-post-content h5,
.blog-post-content h6
{
margin-top: 20px;
margin-bottom: 20px;
}
</style>

Adăugați modulul barei laterale la coloana 2

Aspect

Treceți la coloana următoare. Acolo, vom adăuga un modul Sidebar. Treceți la fila de proiectare a modulului și ascundeți separatorul de margini.

• Afișați separatorul de frontieră: nu

Setări text titlu

Schimbați fontul titlului în continuare.

• Titlu Font: Alata

Setări text corp

Împreună cu fontul corpului.

• Font corp: Lato

Adăugați modulul Optin de e-mail în coloana 2

Adauga continut

Chiar sub modulul barei laterale, vom adăuga un modul Optin pentru e-mail. Adăugați o copie la alegere.

Adaugă cont

Conectați-vă contul de e-mail în continuare.

Eliminați culoarea de fundal

Apoi, eliminați culoarea de fundal.

Setări câmpuri

Treceți la fila de proiectare a modulului și modificați setările câmpurilor în consecință:

• Fields Font: Lato

• Box Shadow: Prima opțiune
• Culoare umbră: rgba (0,0,0,0.06)

Setări text

Schimbăm și culoarea textului în setările textului.

• Culoarea textului: Întunecat

Setări text titlu

Apoi, vom schimba setările pentru textul titlului.

• Titlu Nivel antet: H3
• Titlu Font: Alata
• Dimensiune text titlu: 1.5rem

Setări buton

Apoi, vom stiliza butonul.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 20 px
• Culoarea textului butonului: #ffffff
• Culoare degrade 1: # 8995ff
• Culoare gradient 2: # 6163b5
• Tipul gradientului: liniar
• Direcția gradientului: 150 grade
• Lățimea chenarului butonului: 0 px

• Raza chenarului butonului: 5 px
• Buton Font: Lato

Spațiere

Și vom completa setările modulului, eliminând valorile implicite de umplere din setările de spațiere.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px
• Garnitura stânga: 0 px
• Căptușeală dreaptă: 0 px

Adăugați secțiunea nr. 3

Fundal de gradient

Treceți la următoarea și ultima secțiune. Adăugați următorul fundal de gradient:

• Culoare 1: # 8995ff
• Culoare 2: # 6163b5
• Tipul gradientului: liniar
• Direcția gradientului: 150 grade

Spațiere

Treceți la fila de proiectare a secțiunii și eliminați umplutura de sus implicită.

• Căptușeală de sus: 0 px

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Culoare de fundal

Fără a adăuga încă module, deschideți setările rândului și aplicați o culoare de fundal.

• Culoare fundal: # 8995ff

Dimensionare

Treceți la fila de proiectare a rândului și modificați setările de dimensionare după cum urmează:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 2
• Lățime: 90%
• Lățime maximă: 2580 px

Spațiere

Modificați valorile de umplere în consecință:

• Căptușeală superioară: 100 px
• Căptușeală inferioară: 100 px
• Căptușeală stângă: 5%
• Căptușeală dreaptă: 5%

Frontieră

Apoi, adăugați câteva colțuri rotunjite.

• Toate colțurile: 20 px

Box Shadow

Vom adăuga și o umbră de cutie.

• Puterea neclarității umbrei cutiei: 50 px
• Culoare umbră: rgba (0,0,0,0.08)

Transformă Traducere

Și vom completa setările rândului aplicând următoarele valori de traducere de transformare:

• Dreapta: -100px

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

Setări câmpuri

Singurul modul de care avem nevoie în rând este un modul de comentarii. Treceți la fila de proiectare a modulului și stilizați câmpurile:

• Culoare fundal câmpuri: rgba (255,255,255,0,09)
• Culoare text câmpuri: #ffffff
• Fields Font: Lato

• Câmpuri colțuri rotunjite: 10 px (toate colțurile)
• Câmpuri Lățimea marginii inferioare: 5 px
• Câmpuri Culoare margine inferioară: #ffffff

• Fields Box Shadow: Prima opțiune
• Culoare umbră: rgba (0,0,0,0.06)

Setări imagine

Modificați și setările imaginii.

• Imagine Colțuri rotunjite: 100 px (toate colțurile)

Setări text

Apoi, modificați culoarea textului în setările textului.

• Culoarea textului: deschis

Setări text numărare comentarii

Modificăm și setările de text pentru numărul de comentarii.

• Număr de comentarii Nivel antet: H2
• Comentariu Font Font: Alata
• Număr de comentarii Dimensiune text: 2rem
• Comentariu Înălțimea liniei: 1.4em

Setări text titlu formular

Împreună cu setările textului titlului formularului.

• Titlu formular Formă nivel: H3
• Font Titlu formular: Alata

Setări Meta Text

Apoi, setările meta text.

• Meta Font: Alata
• Dimensiune Meta Text: 1.2rem

Setări text pentru comentarii

Vom modifica și setările pentru textul comentariilor.

• Comentariu Font: Lato
• Dimensiune text comentariu: 1.1rem
• Înălțime linie comentariu: 2em

Setări buton

Și vom stiliza butonul în consecință:

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 1.1rem
• Culoarea textului butonului: # 8995ff
• Culoarea fundalului butonului: #ffffff
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 5 px

• Distanța dintre litere și butoane: 1 px
• Buton Font: Lato

• Căptușeală pentru butoane: 20 px
• Căptușeală pentru butoane: 20 px

Comentează CSS corp

Nu în ultimul rând, vom completa setările modulului aplicând următoarea linie de cod CSS în corpul comentariului din fila avansată:

margin-top: 50px;

3. Aplicați Efectul lipicios pe coloana barei laterale

Deschideți coloana barei laterale

Acum că proiectarea șablonului nostru de postare pe blog a fost finalizată, vom transforma coloana barei laterale lipicioase folosind opțiunile lipsite de Divi. Deschideți setările coloanei 2.

Aplicați Efectul lipicios

Treceți la fila avansată a coloanei și aplicați următoarele setări lipicioase:

• Poziție lipicioasă:
  • Desktop: Stick to Top
  • Tabletă și telefon: Nu lipiți
• Limita inferioară lipicioasă: rând
• Decalaj de la elementele lipicioase înconjurătoare: Da
• Stiluri implicite de tranziție și lipicioase: Da

4. Așezați bara laterală în partea stângă

Trageți coloana barei laterale deasupra coloanei 1

Dacă doriți să plasați bara laterală în partea stângă a șablonului, deschideți setările rândului și trageți a doua coloană în partea de sus.

Schimbați marginea coloanei din bara laterală

Deschideți coloana care conține bara laterală și modificați setările de margine în consecință:

• Lățimea marginii drepte:
  • Desktop: 5 px
  • Tabletă și telefon: 0 px
• Culoare margine dreaptă: # 8995ff
• Lățimea marginii stângi: Niciuna

Aplicați inversarea coloanei dacă doriți

Dacă decideți să alegeți o bară laterală lipicioasă în partea stângă a șablonului dvs. de postare pe blog, vă recomandăm să plasați bara laterală sub conținutul postării pe dimensiuni de ecran mai mici. Pentru a realiza acest lucru, puteți utiliza a doua abordare din acest tutorial Divi despre cum să inversați ordinea de stivuire a coloanelor Divi.

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ă profitați la maximum de designul șablonului de postare pe blog pe care îl creați utilizând Divi's Theme Builder. Mai precis, v-am arătat pas cu pas cum să includeți o bară laterală lipicioasă, care este posibilă prin opțiunile lipicioase ale lui Divi. Bara laterală lipicioasă vă va urmări vizitatorii în timp ce citesc conținutul postării, ceea ce le permite să vadă postări conexe, opțiunea dvs. de e-mail sau orice altceva pe care decideți să o plasați în bara laterală lipicioasă. 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.