Cum să includeți o bară laterală fixă ​​pe toată înălțimea în șablonul dvs. de postare pe blog

Alegerea adăugării unei bare laterale la postările de pe blog depinde în totalitate de dvs. Unii bloggeri aleg să nu folosească deloc o bară laterală. Acest tutorial este pentru aceia dintre voi care preferă să utilizați o bară laterală, dar doriți să o faceți să arate puțin diferită. De obicei, barele laterale sunt poziționate static, dar dacă conținutul postării este lung, înseamnă că cititorul va trebui să deruleze înapoi pentru a vedea bara laterală.

În acest design de șablon de postare de blog, am creat o bară laterală fixă ​​pe toată înălțimea, care rămâne pe loc în timp ce derulați conținutul postării. În timp ce recreați tutorialul, păstrați două file deschise în browserul dvs.: una pentru generatorul de teme și alta pentru o previzualizare a postării pe blog. În acest fel puteți vedea modificările pe măsură ce mergeți.

Să începem!

previzualizare

Înainte de a începe, să aruncăm o privire la bara laterală fixă ​​pe toată înălțimea.

Desktop

Mobil

Descărcați șablonul barei laterale fixe cu înălțime completă GRATUIT

Pentru a vă pune mâinile pe șablonul de bare laterale fixe cu înălțime completă, 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!

Creați un widget pentru bara laterală

Înainte de a începe să utilizați șablonul barei laterale fixe pe toată înălțimea, creați un widget personalizat pentru bara laterală. Mai târziu, vom include acest lucru în bara noastră din interiorul șablonului.

Deschideți Widget Builder

Faceți clic pe „Aspect” și selectați „Widget-uri”.

Adăugați elemente în widgetul barei laterale

Trageți elementele „Postări recente” și „Categorii” în widgetul barei laterale.

Ajustați setările elementului în widget

Alegeți să afișați doar 3 postări recente și să adăugați un titlu. Adăugați și un titlu widgetului pentru categorii și nu uitați să faceți clic pe „Salvați” în ambele casete când ați terminat.

• Titlul mesajelor recente: Citiți mai multe:
• Categorii Titlu: Răsfoire

2. Începeți cu Theme Builder

Deschideți Theme Builder / Adăugați un șablon nou

Este timpul să începeți să recreați șablonul fix al barei laterale fixe! Mai întâi, deschideți generatorul de teme și adăugați un șablon nou.

Setați setările șablonului

În setările șablonului, selectați „Toate postările de blog”. Dacă doriți să utilizați șablonul pentru o anumită categorie sau etichetă, modificați setările șablonului în consecință.

Adăugați corp personalizat

Apoi, faceți clic pe „Adăugați un corp personalizat”.

Selectați Construiți corp personalizat

Vom recrea acest șablon de la zero, așa că mergeți mai departe și alegeți „Construiți corp personalizat”.

Build From Scratch

Odată ajuns în constructorul vizual, selectați opțiunea de a construi încă o dată de la zero.

Recreați șablonul cu bara laterală fixă ​​pe toată înălțimea

Setări secțiune

fundal

Deschideți secțiunea existentă din editorul de șabloane și adăugați un fundal de gradient.

• Gradient de fundal
  • Culoare 1: alb #ffffff
  • Culoare 2: Gri deschis #eaeaea

Spațiere

Adăugați și niște umplutură.

• Căptușeală superioară: 55 px

Adăugați un rând nou

Structura coloanei

Acum adăugați un rând cu o structură de coloană 3/4 - 1/4.

Dimensionare

Reglați dimensiunea rândului după cum urmează.

• Lățime personalizată a jgheabului: 2
• Lăţime:
  • Desktop și tabletă: 90%
  • Telefon: 100%
• Lățimea maximă:
  • Desktop: 1920px
• Înălțime minimă: 100vh

Setări coloana 1

Spațiere

Înainte de a adăuga module, reglați setările coloanei. Coloana 1 mai întâi.

• Căptușeala stângă și dreapta
  • Tabletă: 2%
  • Telefon: 8%

Setări coloana 2

fundal

Apoi, adăugați o culoare de fundal în coloana 2.

• Culoare fundal: alb #ffffff

Spațiere

Includeți și unele spații.

• Căptușeala stângă și dreapta
  • Desktop: 3%
  • Tabletă și telefon: 14%

Frontieră

Dați coloanei rotunjite coloanei următoare.

• Colturi rotunjite
  • Tabletă și desktop: 15 px

CSS personalizat

Treceți la fila avansată și adăugați câteva linii de cod CSS la elementul principal. Acest lucru ne va ajuta să creăm bara laterală pe toată înălțimea de pe desktop.

• Elementul principal
  • min-înălțime: 100%

min-height: 100%;

Poziţie

Nu în ultimul rând, pentru a crea efectul barei laterale fixe, adăugați o poziție fixă ​​coloanei.

• Poziţie
  • Desktop: Fix
  • Tabletă și telefon: implicit
• Locație: dreapta sus

Adăugați modulul 1 al titlului postării

Elemente

E timpul să adăugați module! Începeți cu un prim modul de titlu al postării în coloana 1 și activați numai titlul.

• Arată titlul: Da

Imagine de fundal dinamică

Apoi, accesați setările de fundal și utilizați imaginea prezentată ca imagine de fundal dinamică.

Textul titlului

Stilizați setările pentru textul titlului.

• Titlu Font: Bai Jamjuree
• Stilul fontului titlului: majuscule
• Culoare text titlu: # e98074
• Dimensiune text titlu:
  • Desktop: 45 px
  • Tabletă: 35 px
  • Telefon: 25 px
• Spațierea literelor de titlu: 3 px
• Înălțimea liniei de titlu: 1.3em

Spațiere

Apoi, adăugați câteva căptușeli personalizate de sus și de jos.

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

Frontieră

Includeți și câteva colțuri rotunjite.

• Toate colțurile: 15 px

Titlu CSS

Și completați setările modulului adăugând trei linii de cod CSS la elementul de titlu al modulului în fila avansată.

background-color: rgba(255,255,255,0.56);
padding-top: 2%;
padding-bottom: 2%;

Adăugați modulul 2 al titlului postării

Elemente

Acum adăugați un alt modul de titlu al postării. Selectați următoarele elemente.

• Meta
• Autor
• Categorii de postări

Meta Text

Deschideți fila de proiectare și stilizați meta textul.

• Font: Bai Jamjuree
• Greutate: medie
• Culoare: Gri # 8e8d8a
• mărimea
  • Desktop: 20 px
  • Tabletă și telefon: 15 px
• Spațierea literelor: 2 px

Dimensionare

Reglați și dimensiunea.

• Lățime: 90%
• Alinierea modulului: centru

Spațiere

Completați setările acestui modul cu o anumită distanță.

• Căptușeală superioară: 15 px

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

fundal

Adăugați un modul de conținut de postare cu un fundal alb în continuare.

• Culoare fundal: alb #ffffff

Text

Acum, stilizați textul corpului.

• Font: Lato
• Culoare: Gri # 8e8d8a
• Dimensiune: 16 px

Text de antet

Continuați cu stilul tuturor stilurilor de text de antet.

• H1
  • Font: Bai Jamjuree
  • Greutate: medie
  • Culoare: Coral # e98074
  • mărimea
    • Desktop: 45 px
    • Tabletă: 33 px
    • Telefon: 30 px
  • Spațierea literelor: 1 px
• H2
  • Font: Bai Jamjuree
  • Greutate: medie
  • Culoare: Coral # e98074
  • mărimea
    • Desktop: 35 px
    • Tabletă și telefon: 25 px
  • Spațierea literelor: 1 px
• H3
  • Font: Bai Jamjuree
  • Greutate: regulat
  • Culoare: Gri închis # 606060
  • mărimea
    • Desktop: 25 px
    • Tabletă și telefon: 22 px
  • Spațierea literelor: 1 px
• H4
  • Font: Bai Jamjuree
  • Greutate: regulat
  • Culoare: Gri închis # 606060
  • mărimea
    • Desktop: 22 px
    • Tabletă: 20 px
    • Telefon: 18 px
  • Spațierea literelor: 1 px
• H5
  • Font: Bai Jamjuree
  • Greutate: medie
  • Culoare: Gri închis # 606060
  • Dimensiune: 16 px
  • Spațierea literelor: 1 px
• H6
  • Font: Bai Jamjuree
  • Greutate: regulat
  • Culoare: Gri închis # 606060
  • Dimensiune: 16 px
  • Spațierea literelor: 1 px

Spațiere

Adăugați și câteva setări de spațiere.

• Marja superioară: 40 px
• Căptușeală superioară: 10%
• Căptușeală inferioară: 10%
• Căptușeală stângă: 10%
• Căptușeală dreaptă: 10%

Frontieră

Nu în ultimul rând, adăugați câteva colțuri rotunjite.

• Bordură rotunjită: 15 px

Adăugați modulul Comentarii

Elemente

Pentru a completa prima coloană, adăugați un modul de comentarii. Activați următoarele elemente:

• Buton Răspuns
• Număr de comentarii

Câmpuri

În fila Design, stilizați câmpurile.

• Culoare fundal: Gri deschis # f7f7f7
• Culoarea textului: Gri # 8e8d8a
• Font: Bai Jamjuree
• Dimensiune text: 17 px
• Colțuri rotunjite: 15 px

Text de numărare comentarii

Stilizați și textul numărării comentariilor.

• Nivel de titlu: H3
• Font: Bai Jamjuree
• Culoare: Coral # e98074
• Dimensiune: 22 px
• Spațierea literelor: 1 px

Textul titlului formularului

Apoi titlul formularului.

• Nivel de titlu: H3
• Font: Bai Jamjuree
• Culoare: Coral # e98074
• Dimensiune: 18 px
• Spațierea literelor: 1 px

Meta Text

Stilizați și meta textul.

• Font: Bai Jamjuree
• Culoare: # 606060
• Dimensiune: 14 px
• Spațierea literelor: 1 px

Text comentariu

Nu uitați textul comentariului.

• Font: Bai Jamjuree
• Dimensiune: 1 px

Buton

Acum stilizați butoanele.

• Stiluri personalizate
• Dimensiune text: 18 px
• Culoarea textului: alb #ffffff
• Culoare fundal: Coral # e98074
• Raza chenarului butonului: 15 px
• Buton Font: Bai Jamjuree

Dimensionare

Reglați și dimensiunea rândului.

• Lățime: 90%

Spațiere

Precum și setările de spațiere.

• Căptușeală superioară: 8%
• Căptușeala stângă și dreapta: 4%

Modul Adăugați o persoană

Text

Treceți la coloana fixă ​​a barei laterale și adăugați un modul persoană.

• Nume: Dynamic Post Author
• Înainte: Scris de:

Textul titlului

În fila Design, stilizați textul titlului după cum urmează:

• Nivel de titlu: H4
• Font: Bai Jamjuree
• Culoare: Coral # e98074
• Dimensiune: 2vh
• Spațierea literelor: 2 px

Dimensionare

Reglați dimensiunea în continuare.

• Înălțime minimă:
  • Desktop: 3vh
  • Tabletă și telefon: auto
• Înălțimea maximă:
  • Desktop: 3vh
  • Tabletă și telefon: auto

Spațiere

Adăugați și spațiu personalizat.

• Marja superioară
  • Desktop: 6vh
  • Tabletă și telefon: 10vh

Adăugați un modul de imagine

Imagine

Acum, adăugați un modul de imagine. Selectați conținut dinamic pentru imaginea autorului.

• Imagine: Imagine de profil dinamică a autorului

Aliniere

Treceți la fila de proiectare și alegeți următoarea aliniere:

• Aliniere imagine: Stânga

Dimensionare

Reglați dimensiunea modulului în continuare.

• Lățime maximă: 15vh
• Alinierea modulului: stânga
• Înălțimea maximă
  • Desktop: 15vh

Frontieră

În cele din urmă, adăugați câteva colțuri rotunjite la setările de margine.

• Colțuri rotunde: 15 px

Adăugați modulul barei laterale

Conţinut

Acum este timpul să adăugați widgeturile barei laterale utilizând modulul barei laterale.

• Zona widgetului: Bara laterală

Aspect

Ajustați mai întâi aspectul.

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

Textul titlului

Modificați apoi setările pentru textul titlului.

• Font: Bai Jamjuree
• Greutate: medie
• Culoare: Coral # e98074
• Dimensiune: 2vh
• Spațierea literelor: 2 px

Corpul textului

Continuați cu textul corpului.

• Font: Bai Jamjuree
• Greutate: ușoară
• Culoare: Gri închis # 7f7f7f
• Hover Color: Coral # e98074
• Dimensiune: 1,5vh
• Spațierea literelor: 1 px
• Înălțimea liniei: 1,8em

Dimensionare

Reglați și dimensiunea modulului.

• Min Înălțime
  • Desktop: 12vh
  • Tabletă și telefon: auto
• Înălțimea maximă
  • Desktop: 12vh
  • Tabletă și telefon: auto

Spațiere

Nu uitați să adăugați o distanță.

• Căptușeală de sus
  • Desktop: 1vh
  • Tabletă și telefon: 3vh

CSS personalizat

Nu în ultimul rând, includeți câteva linii de cod CSS în fila avansată.

• Widget: fund de umplutură: 0vh;

padding-bottom: 0vh;

• Titlu: fund de umplutură: 2vh;

padding-bottom: 2vh;

Adăugați opțiunea de e-mail

Text

Următorul modul de care avem nevoie în bara noastră laterală este un modul optin de e-mail. Adăugați un conținut la alegere.

• Titlu: Actualizări
• Buton: Abonați-vă

Cont de email

Conectați-vă e-mailul la formularul următor.

• Furnizor de servicii: Furnizorul dvs. de e-mail
• Listă: lista pe care ați ales-o

Câmpuri

Folosim doar câmpul prenume în setările câmpurilor.

• Afișați câmpul Prenume

fundal

Apoi, dezactivați fundalul implicit.

• Utilizați culoarea de fundal: Nu

Aspect

Treceți la fila de proiectare și modificați setările de aspect.

• Aspect: corp pe partea de sus, formă pe partea de jos
• Prenume Lățime completă: Nu
• E-mail Fullwidth: Nu

Câmpuri

Apoi, stilizați câmpurile după cum urmează:

• Culoare fundal: Grey deschis # f7f7f7
• Culoarea textului: # 606060
• Căptușeală superioară și inferioară: 1vh
• Garnitura stânga: 1vh
• Font: Bai Jamjuree
• Dimensiune text: 1,5vh
• Spațierea literelor: 1 px
• Colțuri rotunjite: 15 px

Textul titlului

Stilizați și textul titlului.

• Nivel de titlu: H4
• Font: Bai Jamjuree
• Culoare: Coral # e98074
• Dimensiune: 2vh
• Spațierea literelor: 2 px
• Înălțimea liniei: 1em

Buton

Apoi, butonul.

• Stiluri personalizate
• Dimensiune text: 1,5vh
• Culoarea textului: alb #ffffff
• Culoare fundal: Coral # e98074
• Raza de frontieră: 15 px
• Spațierea literelor: 2 px
• Font: Bai Jamjuree
• Căptușeală superioară și inferioară: 1vh

Spațiere

Și finalizați setările modulului și tutorialul adăugând câteva valori de spațiere personalizate la modul. Asta e! Asigurați-vă că salvați toate modificările generatorului de teme după ce ați terminat de creat corpul șablonului.

• Căptușeală de sus
  • Desktop și tabletă: 0vh
• Căptușeală inferioară
  • Desktop: 2vh
  • Tabletă și telefon: 6vh
• Căptușeala stângă și dreapta
  • Desktop și tabletă: 0vh

previzualizare

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

Desktop

Mobil

Asta e un pachet!

Am terminat de recreat bara laterală fixă ​​pe toată înălțimea pentru șabloanele dvs. de postare pe blog. Dacă ați descărcat șablonul de pe linkul de mai sus, nu uitați să configurați widgeturile din bara laterală așa cum se arată în prima parte a acestui tutorial.

Ești o persoană care nu este o bară laterală sau nici o bară laterală? Spuneți-ne în comentarii dacă aveți gânduri sau întrebări!