Doriți să creați o bară de navigare între postări care să fie lipicioasă în Divi?
O bară de navigare post-lipicioasă este o modalitate eficientă de a îmbunătăți experiența utilizatorului site-ul web de blog. Pe lângă navigarea principală a site-ului dvs., linkurile de navigare pentru postări permit utilizatorilor să sară cu ușurință la postarea anterioară sau la postarea următoare pe blogul tău. Și, dacă adăugați aceste linkuri de navigare pentru postări într-o bară lipicioasă, aceste linkuri rămân vizibile și mai accesibile.
În acest tutorial, vom crea o bară de navigare între post sticky in Divi. Pentru a face acest lucru, vom folosi opțiunile încorporate ale Divi pentru a transforma un rând într-o bară lipicioasă. În continuare, vom folosi modulul de navigare a articolelor pentru a crea legăturile „articolul anterior” și „articolul următor”.
În plus, vom adăuga un titlu al postării ca conținut dinamic în mijlocul barei, care le reamintește utilizatorilor de postarea pe care o vizualizează în prezent, oferind barei de navigare un element plăcut „trecut, prezent și viitor”.
Să începem!
studiu
Iată o privire rapidă asupra designului pe care îl vom crea în acest tutorial.
Ce ai nevoie pentru a începe
Deși puteți adăuga această bară de navigare a postărilor lipicioase la orice aspect sau șablon de postare de blog în Divi, vom folosi un șablon de postare de blog prestabilit pentru a accelera procesul și pentru a începe rapid designul.
Importați șablonul de postare de blog „Setul de masă” în Divi Theme Builder
Pentru a începe, descărcați șablon gratuit de postare pe blog pentru pachetul de aranjament al trusei de masă Divi . Pentru a face acest lucru, accesați postarea pe blog .
Apoi introduceți adresa dvs. de e-mail pentru a descărca fișierul zip.
După aceea, dezarhivați fișierul, astfel încât să fie gata de import.
Pentru a importa fișierul în editorul de teme, urmați acești pași:
- Accesați Divi > Theme Builder.
- Faceți clic pe pictograma portabilitate.
- În fereastra pop-up Portabilitate, selectați fila de import.
- Alegeți fișierul dezarhivat descărcat anterior pentru a importa.
- Faceți clic pe « Import Divi Theme Builder Șabloane ».
- Faceți clic pe pictograma de editare pentru a edita modelul importat.
Creați o bară de navigare lipicioasă în Divi
Partea 1: Crearea liniei lipicioase
Pentru a crea bara de navigare lipicioasă, vom folosi un rând cu trei coloane ca container lipicios pentru legăturile noastre de navigare între postare și titlul postării.
Citiți și: Divi: Cum să utilizați opțiunea „Repetare gradient” pentru a crea modele de fundal personalizate
În a doua secțiune a aspectului șablonului, adăugați un rând nou sub rândul care conține conținutul postării.
Setări de linie
Deschideți setările liniei.
În primul rând, trebuie să adăugăm poziția lipicioasă la linie, astfel încât să putem actualiza alte opțiuni de design în starea lipicioasă.
Sub filă Avansat, actualizați următoarele:
- Poziție lipicioasă: lipiți de sus și de jos
- Limită superioară: secțiune
- Limită inferioară lipicioasă: zona corpului
Pentru a vă asigura că coloanele nu se stivuiesc pe mobil, adăugați următorul CSS personalizat la Elementul principal :
display:flex;
flex-wrap:nowrap;
align-items:center;
Sub filă Conţinut, adăugați o culoare de fundal albă la linie în starea lipicioasă, după cum urmează:
- fundal: niciunul
- Fundal: #ffffff (lipicios)
Sub setări Amenajări, actualizați următoarele:
- Utilizați lățimea jgheab personalizată: DA
- Lățimea jgheabului: 1
- Latime: 100%
- Latime maxima: 100%
- Umplutură: 0px (sus și jos)
Ascundeți coloana din mijloc pe tabletă și telefon
Pentru a ascunde coloana pe mobil, deschideți setările pentru coloana 2 (coloana din mijloc) și actualizați opțiunile de vizibilitate după cum urmează:
- Dezactivați pe: telefon, tabletă
Partea 2: Crearea link-urilor de navigare pentru articole
Pentru a deschide mai multă flexibilitate de design pentru navigarea postărilor, vom folosi două module separate de navigare a postărilor. În coloana din stânga, vom adăuga un modul Post Navigation care afișează doar linkul articolului anterior. În coloana din dreapta, vom adăuga un modul de navigare a postării care afișează doar linkul de postare următoare.
Link către postarea anterioară
În coloana 1, adăugați un nou modul de navigare post.
Deschideți setările modulului, actualizați fila de opțiuni de Conţinut ca următorul :
- Link anterior (Text): Postare anterioară
- Afișați linkul postării anterioare: DA
- Afișează linkul postării următoare: NU
- Fundal: #000000
Sub filă Amenajări, actualizați următoarele:
- Font pentru linkuri: Kumbh Sans
- Greutatea fontului pentru linkuri: aldine
- Stil font: TT
- Culoare text link-uri: #ffffff
- Dimensiunea textului linkurilor: 26px (desktop), 16px (tabletă și telefon)
- Înălțimea liniei: 1,3 em
- Umplutură: 0,9 em (sus), 0,7 em (jos), 2 em (stânga și dreapta)
Deoarece ascundem coloana din mijloc pe mobil, cele două coloane rămase care vor conține link-urile de navigare pot ocupa acum fiecare 50% din lățimea browserului pe tabletă și telefon.
Vezi si: Divi: Cum se schimbă stilul mai multor elemente la trecerea cu mouse-ul sau după un clic
Pentru a vă asigura că linkul de navigare se întinde pe 50% din fereastra de vizualizare, adăugați următorul CSS personalizat în caseta Linkuri CSS pentru vizualizarea pe tabletă:
display:block;
width:50vw;
text-align:center;
float:none;
Crearea linkului Next Post
Pentru a crea linkul pentru următoarea postare, copiați modulul Post Navigation (cu linkul postării anterioare) pe care tocmai l-am proiectat și lipiți-l în coloana 3 (coloana din dreapta).
Apoi, deschideți setările de navigare a postării pentru modulul duplicat în coloana din dreapta și actualizați următoarele opțiuni pentru fila conținut:
- Link următor: Postarea următoare
- Afișați linkul postării anterioare: NU
- Afișează linkul postării următoare: DA
- Fundal: #ffb100
Sub filă Amenajări, actualizați culoarea textului linkului:
- Culoare text link-uri: #000000
Partea 3: Crearea titlului postării dinamice
Cu ambele link-uri de navigare activate, suntem gata să adăugăm titlul postării ca conținut dinamic în coloana din mijloc.
Ideea este de a oferi utilizatorului un memento frumos al mesajului pe care îl citește, cu posibilitatea de a naviga la mesajul anterior și următorul mesaj.
În coloana din mijloc, adăugați un nou modul Text.
Sub filă Conţinut, faceți clic pe pictogramă „Utilizați conținut dinamic” în zona corpului, apoi selectați Titlul postării/arhivei.
Odată ce titlul dinamic al postării a fost adăugat, deschideți setările pentru Titlul postării/arhivei și actualizați conținutul înainte de:
- Inainte de a citi
Apoi salvați modificările.
Sub filă Amenajări, actualizați următoarele:
- Font text: Kumbh Sans
- Greutatea fontului textului: aldine
- Stil font: TT
- Culoare text text: transparent (desktop), #000000 (lipicios)
- Dimensiunea textului: 16px
- Spațiere între litere: 1px
- Înălțimea liniei: 1,3 em
- Alinierea textului: centrat
- Latime maxima: 96%
- Modul de aliniere: centru
- Căptușeală: 0,5 em (sus și jos)
Rezultat final
Descărcați DIVI acum!!!
Concluzie
În acest tutorial, am arătat cât de ușor este să creezi o bară de navigare a postărilor pentru un șablon de postare de blog în Divi.
Funcționalitatea lipicioasă bară/linie poate fi, de asemenea, ajustată cu ușurință cu opțiunile încorporate ale Divi. De exemplu, puteți limita starea lipicioasă la o secțiune sau puteți alege să o faceți lipicioasă numai în partea de sus sau de jos a ferestrei de vizualizare a browserului.
Sper că acest lucru va fi util pentru următorul dvs. site de blog. Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.
De asemenea, puteți consulta resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet.
Nu ezitați să consultați și ghidul nostru despre Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
