Dëshironi të krijoni një shirit navigimi midis postimeve që është ngjitës në Divi?
Një shirit navigimi ngjitës i postimeve është një mënyrë efektive për të përmirësuar përvojën e përdoruesit të cilitdo Site Web e blogut. Përveç navigimit kryesor të faqes suaj, lidhjet e navigimit të postimeve i lejojnë përdoruesit të kalojnë lehtësisht te postimi i mëparshëm ose postimi tjetër në blogun tuaj. Dhe, nëse i shtoni këto lidhje të navigimit të postimeve në një shirit ngjitës, këto lidhje mbeten të dukshme dhe më të aksesueshme.
Në këtë tutorial, ne do të krijojmë një shirit navigimi midis postimeve ngjitëse Divi. Për ta bërë këtë, ne do të përdorim opsionet e integruara të Divi për të transformuar një rresht në një shirit ngjitës. Më pas, ne do të përdorim modulin e navigimit të artikujve për të hartuar lidhjet "artikull i mëparshëm" dhe "artikull tjetër".
Për më tepër, ne do të shtojmë një titull postimi si përmbajtje dinamike në mes të shiritit që u kujton përdoruesve postimin që po shohin aktualisht, duke i dhënë shiritit të navigimit një element të bukur "e kaluara, e tashmja dhe e ardhmja".
Le të fillojmë!
studim
Ja një vështrim i shpejtë i dizajnit që do të krijojmë në këtë tutorial.
Çfarë duhet të filloni
Ndërkohë që mund ta shtoni këtë shirit navigimi ngjitës të postimeve në çdo plan urbanistik ose shabllon të postimeve në blog në Divi, ne do të përdorim një shabllon të parapërgatitur të postimeve në blog për të shpejtuar procesin dhe për të nisur shpejt dizajnin.
Importoni shabllonin e postimit të blogut "Paketa e ushqimit" në Divi Theme Builder
Për të filluar, shkarkoni shabllon falas i postimeve në blog për Paketën e Paraqitjes së Kompleteve të Ushqimit Divi . Për ta bërë këtë, shkoni te postimi në blog .
Më pas shkruani emailin tuaj për të shkarkuar skedarin zip.
Pas kësaj, hiqni skedarin në mënyrë që të jetë gati për import.
Për të importuar skedarin në redaktuesin e temës, ndiqni këto hapa:
- Shkoni te Divi > Ndërtuesi i Temave.
- Klikoni në ikonën e transportueshmërisë.
- Në dritaren kërcyese të Transportueshmërisë, zgjidhni skedën e importit.
- Zgjidhni skedarin e zbërthyer të shkarkuar më parë për ta importuar.
- Kliko në « Importo Ndërtuesin e Temave Divi Templates ».
- Klikoni ikonën e redaktimit për të modifikuar modelin e importuar.
Krijoni një shirit navigimi ngjitës në Divi
Pjesa 1: Krijimi i vijës ngjitëse
Për të krijuar shiritin e navigimit ngjitës, ne do të përdorim një rresht me tre kolona si kontejner ngjitës për lidhjet tona të navigimit midis titullit të postimit dhe postimit.
Lexo gjithashtu: Divi: Si të përdorni opsionin "Gradient Repeat" për të krijuar modele të personalizuara të sfondit
Në seksionin e dytë të paraqitjes së shabllonit, shtoni një rresht të ri poshtë rreshtit që përmban përmbajtjen e postimit.
Cilësimet e linjës
Hap cilësimet e linjës.
Së pari, duhet të shtojmë pozicionin ngjitës në rresht, në mënyrë që të mund të përditësojmë opsionet e tjera të dizajnit në gjendje ngjitëse.
Nën skedinë Avancuar, përditësoni sa vijon:
- Pozicioni ngjitës: Ngjitni lart dhe poshtë
- Kufiri i lartë ngjitës: Seksioni
- Kufiri i poshtëm ngjitës: Zona e trupit
Për të siguruar që kolonat të mos grumbullohen në celular, shtoni CSS-në e mëposhtme të personalizuar në Elementi kryesor :
display:flex;
flex-wrap:nowrap;
align-items:center;
Nën skedinë Përmbajtja, shtoni një ngjyrë të bardhë sfondi në vijën në gjendje ngjitëse si më poshtë:
- sfond: asnjë
- Baza e pjekjes: #ffffff (Ngjitës)
Nën cilësimet Projektimi, përditësoni sa vijon:
- Përdorni gjerësinë e ulluqit të personalizuar: PO
- Gjerësia e kanalit: 1
- Gjerësia: 100%
- Gjerësia maksimale: 100%
- Mbushja: 0 px (lart dhe poshtë)
Fshih kolonën e mesme në tablet dhe telefon
Për të fshehur kolonën në celular, hapni cilësimet për kolonën 2 (kolona e mesme) dhe përditësoni opsionet e dukshmërisë si më poshtë:
- Çaktivizo në: telefon, tablet
Pjesa 2: Krijimi i lidhjeve të navigimit të artikujve
Për të hapur më shumë fleksibilitet të dizajnit për navigimin e postimeve, ne do të përdorim dy module të veçanta të Navigimit në Post. Në kolonën e majtë, ne do të shtojmë një modul Post Navigation që shfaq vetëm lidhjen e artikullit të mëparshëm. Në kolonën e djathtë, ne do të shtojmë një modul Post Navigation që shfaq vetëm lidhjen e postimit tjetër.
Lidhje me postimin e mëparshëm
Në kolonën 1, shtoni një modul të ri Navigation Post.
Hapni cilësimet e modulit, përditësoni skedën e opsioneve të Përmbajtja si më poshtë:
- Lidhja e mëparshme (Teksti): Postimi i mëparshëm
- Shfaq lidhjen e postimit të mëparshëm: PO
- Shfaq lidhjen e postimit tjetër: JO
- Sfondi: #000000
Nën skedinë Projektimi, përditësoni sa vijon:
- Fonti i lidhjeve: Kumbh Sans
- Pesha e shkronjave të lidhjeve: Bold
- Stili i shkronjave: TT
- Ngjyra e tekstit të lidhjeve: #ffffff
- Madhësia e tekstit të lidhjeve: 26 px (Desktop), 16 px (Tablet dhe telefon)
- Lartësia e linjës: 1,3 em
- Mbushja: 0,9em (lart), 0,7em (poshtë), 2em (majtas dhe djathtas)
Meqenëse po fshehim kolonën e mesme në celular, dy kolonat e mbetura që do të përmbajnë lidhjet e navigimit tani mund të zënë secila 50% të gjerësisë së shfletuesit në tablet dhe telefon.
Shiko gjithashtu: Divi: Si të ndryshoni stilin e disa elementeve në hover ose pas një klikimi
Për t'u siguruar që lidhja e navigimit përfshin 50% të portës së pamjes, shtoni CSS-në e mëposhtme të personalizuar në kutinë e Lidhjeve CSS për shikimin e tabletit:
display:block;
width:50vw;
text-align:center;
float:none;
Krijimi i lidhjes Next Post
Për të krijuar lidhjen për postimin tjetër, kopjoni modulin Post Navigation (me lidhjen e postimit të mëparshëm) që sapo krijuam dhe ngjiteni në kolonën 3 (kolona e djathtë).
Më pas, hapni cilësimet e navigimit të postimeve për modulin e kopjuar në kolonën e djathtë dhe përditësoni opsionet e mëposhtme të skedës së përmbajtjes:
- Lidhja tjetër: Postimi tjetër
- Shfaq lidhjen e postimit të mëparshëm: JO
- Shfaq lidhjen e postimit tjetër: PO
- Sfondi: #ffb100
Nën skedinë Projektimi, përditësoni ngjyrën e tekstit të lidhjes:
- Ngjyra e tekstit të lidhjeve: #000000
Pjesa 3: Krijimi i titullit të postimit dinamik
Me të dyja lidhjet e navigimit në vend, ne jemi gati të shtojmë titullin e postimit si përmbajtje dinamike në kolonën e mesme.
Ideja është t'i jepet përdoruesit një kujtesë të këndshme të mesazhit që po lexon me aftësinë për të lundruar te mesazhi i mëparshëm dhe mesazhi tjetër.
Në kolonën e mesme, shtoni një modul të ri Teksti.
Nën skedinë Përmbajtja, klikoni në ikonën "Përdor përmbajtje dinamike" në zonën e trupit, më pas zgjidhni Titulli i postimit/arkivës.
Pasi të jetë shtuar titulli dinamik i postimit, hapni cilësimet e Titulli i postimit/arkivës dhe përditësoni përmbajtjen përpara:
- Para leximit
Pastaj ruani ndryshimet.
Nën skedinë Projektimi, përditësoni sa vijon:
- Fonti i tekstit: Kumbh Sans
- Pesha e shkronjave të tekstit: Bold
- Stili i shkronjave: TT
- Ngjyra e tekstit: transparent (Desktop), #000000 (Ngjitës)
- Madhësia e tekstit: 16 px
- Hapësira e shkronjave: 1 px
- Lartësia e linjës: 1,3 em
- Rreshtimi i tekstit: në qendër
- Gjerësia maksimale: 96%
- Moduli i shtrirjes: qendër
- Mbushje: 0,5em (lart dhe poshtë)
Rezultati përfundimtar
Shkarkoni DIVI tani!!!
Përfundim
Në këtë tutorial, ne treguam se sa e lehtë është të krijosh një shirit navigimi ngjitës të postimeve për një shabllon postimi në blog në Divi.
Funksionaliteti ngjitës i shiritit/linjës gjithashtu mund të rregullohet lehtësisht me opsionet e integruara të Divi. Për shembull, mund ta kufizoni gjendjen ngjitëse në një seksion ose të zgjidhni ta bëni atë ngjitës vetëm në krye ose në fund të portës së pamjes së shfletuesit.
Shpresoj se kjo do të jetë e dobishme për faqen tuaj të ardhshme të blogut. Nëse keni ndonjë shqetësim apo sugjerim, na gjeni në pjesa e komenteve për ta diskutuar atë.
Ju gjithashtu mund të konsultoheni burimet tona, nëse keni nevojë për më shumë elementë për të realizuar projektet tuaja të krijimit të faqeve të Internetit.
Mos hezitoni të konsultoheni edhe me udhëzuesin tonë për Krijimi i blogut të WordPress ose atë më Divi: tema më e mirë e WordPress të të gjitha kohërave.
Por në ndërkohë, ndajeni këtë artikull në rrjetet tuaja të ndryshme sociale.
...
