Cum să creați o bară de navigare postată în Divi

O bară de navigare lipicioasă este o modalitate eficientă de a spori experiența utilizatorului oricărui site de blog. În plus față de navigarea principală a site-ului dvs., linkurile de navigare a postărilor permit utilizatorilor să treacă cu ușurință la postarea anterioară sau la următoarea postare de pe blogul dvs. Și, dacă adăugați acele linkuri de navigare postare la o bară lipicioasă, acele linkuri rămân vizibile și mai accesibile.

În acest tutorial, vom crea o bară de navigare lipicioasă în Divi. Pentru a face acest lucru, vom folosi opțiunile încorporate ale Divi pentru a transforma un rând într-o bară lipicioasă. Apoi vom folosi modulul de navigare a postării pentru a proiecta linkurile „postarea anterioară” și „postarea următoare”. În plus, vom adăuga un titlu al postării ca conținut dinamic în mijlocul barei, care le amintește utilizatorilor ce postare vizualizează în prezent, ceea ce conferă barei de navigare un element frumos „trecut, prezent și viitor”.

Să începem!

Trage cu ochiul

Iată o privire rapidă asupra designului pe care îl vom construi în acest tutorial.

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!

Cum să încărcați șablonul GRATUIT

Pentru a importa șablonul gratuit în generatorul de teme, urmați acești pași:

1. Navigați la Divi> Theme Builder.
2. Faceți clic pe pictograma de portabilitate.
3. În fereastra popup Portabilitate, selectați fila de import.
4. Alegeți fișierul descărcat anterior descărcat pentru a fi importat.
5. Faceți clic pe butonul Import.
6. Faceți clic pe pictograma de editare pentru a edita șablonul importat.

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

Ce trebuie să începeți

Deși puteți adăuga această bară de navigare lipicioasă la orice aspect sau șablon de postare de blog din Divi, vom folosi un șablon de postare de blog premadat pentru a accelera procesul și pentru a începe să creați un design.

Dacă nu ați făcut-o încă, instalați și activați tema Divi.

Importați șablonul de postare a blogului Meal Kit în Theme Builder

Pentru a începe, descărcați șablonul gratuit de postare pe blog pentru pachetul de machetare Divi's Meal Kit. Pentru a face acest lucru, accesați postarea de pe blog.

Apoi introduceți adresa de e-mail pentru a descărca fișierul zip.

După aceea, dezarhivați fișierul astfel încât să fie gata pentru import.

Pentru a importa fișierul în generatorul de teme, urmați acești pași:

1. Navigați la Divi> Theme Builder.
2. Faceți clic pe pictograma de portabilitate.
3. În fereastra popup Portabilitate, selectați fila de import.
4. Alegeți fișierul descărcat anterior descărcat pentru a fi importat.
5. Faceți clic pe butonul Import.
6. Faceți clic pe pictograma de editare pentru a edita șablonul importat.

Crearea unei bare de navigare Sticky Post în Divi

Partea 1: Crearea rândului lipicios

Pentru a crea bara de navigare lipicioasă post, vom folosi un rând cu trei coloane ca container lipicios pentru linkurile noastre de navigare post și titlul postării.

În cea de-a doua secțiune a aspectului șablonului, adăugați un nou rând de o pătrime, o jumătate și o pătrime, sub rândul care conține conținutul postării.

Setări rând

Deschideți setările rândului.

Mai întâi, trebuie să adăugăm poziția lipicioasă la rând, astfel încât să putem actualiza alte opțiuni de proiectare în starea lipicioasă.

Sub fila Advanced, actualizați următoarele:

• Poziție lipicioasă: lipiți-vă de sus și de jos
• Limită superioară lipicioasă: secțiune
• Limita inferioară lipicioasă: zona corpului

Cu această poziție lipicioasă, rândul lipicios se va lipi de partea de jos a ferestrei browserului ori de câte ori este vizibilă secțiunea care conține conținutul postării. Odată ce utilizatorul derulează poziția reală a rândului lipicios, rândul va rămâne blocat în partea de sus a ferestrei browserului în restul zonei corpului postului.

Pentru a vă asigura că coloanele nu se stivuiesc pe mobil, adăugați următoarele elemente CSS personalizate la Elementul principal:

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

Sub fila conținut, adăugați o culoare albă de fundal pe rând în starea lipicioasă, după cum urmează:

• Culoarea fundalului: niciuna
• Culoare fundal: #ffffff (lipicios)

În setările de proiectare, actualizați următoarele:

• Utilizați lățimea personalizată a jgheabului: DA
• Lățimea jgheabului: 1
• Lățime: 100%
• Lățime maximă: 100%
• Căptușeală: 0 px sus, 0 px jos

Ascundeți Coloana de mijloc de pe tabletă și telefon

Coloana din mijloc a rândului va deține în cele din urmă titlul dinamic al postării, care le permite utilizatorilor să știe ce postare citesc. Pentru o experiență mai bună pe mobil, vom ascunde coloana din mijloc de 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 linkurilor de navigare post

Pentru a deschide mai multă flexibilitate de proiectare pentru navigarea post, vom folosi două module separate de navigare post. În coloana din stânga, vom adăuga un modul de navigare a postărilor care afișează doar linkul postării anterioare. În coloana din dreapta, vom adăuga un modul de navigare a postărilor care afișează doar următorul link al postării.

Crearea legăturii de postare anterioare

În coloana 1, adăugați un nou modul de navigare post.

Deschideți setările de navigare post, actualizați opțiunile filei de conținut după cum urmează:

• Link anterior (text): Postare anterioară
• Afișați linkul postării anterioare: DA
• Afișați linkul Nex Post: NU
• Culoare fundal: # 000000

Sub fila Proiectare, actualizați următoarele:

• Linkuri Font: Kumbh Sans
• Linkuri Greutate font: Bold
• Legături Stil Font: TT
• Culoare text linkuri: #ffffff
• Dimensiune text legături: 26 px (desktop), 16 px (tabletă și telefon)
• Înălțimea liniei legăturilor: 1.3em
• Căptușeală: 0,9em sus, 0,7em jos, 2em stânga, 2em dreapta

Deoarece ascundem coloana din mijloc pe mobil, cele două coloane rămase care vor conține legăturile de navigare pot acum ocupa fiecare 50% din lățimea browserului de pe tabletă și telefon. 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 CSS Link-uri pentru vizualizarea tabletei:

display:block;
width:50vw;
text-align:center;
float:none;

Crearea următorului link de postare

Pentru a crea următorul link de postare, copiați modulul de navigare a postării (cu linkul de postare anterior) pe care tocmai l-am proiectat și lipiți-l în coloana 3 (coloana din dreapta).

Apoi, deschideți setările de navigare post pentru modulul duplicat în coloana din dreapta și actualizați următoarele opțiuni ale filei de conținut:

• Următorul link: următoarea postare
• Afișați linkul postării anterioare: NU
• Afișați linkul postării următoare: DA

• Culoare fundal: # ffb100

Sub fila Design, actualizați culoarea textului linkului:

• Culoare text linkuri: # 000000

Partea 3: Crearea titlului postării dinamice

Odată ce cele două legături de navigare sunt la locul lor, suntem gata să adăugăm titlul postării ca conținut dinamic la coloana din mijloc. Ideea este de a oferi utilizatorului un memento frumos al postării pe care le citește, împreună cu opțiunea de a naviga la postarea anterioară și următoarea postare.

În coloana din mijloc, adăugați un nou modul de text.

Sub fila Conținut, faceți clic pe pictograma „Utilizați conținut dinamic” din zona corpului și selectați Titlul postării / arhivării.

Odată adăugat titlul postării dinamice, deschideți setările pentru Titlul postării / arhivei și actualizați conținutul anterior:

• Inainte de a citi: "

Apoi salvați modificările.

Sub fila Proiectare, actualizați următoarele:

• Font text: Kumbh Sans
• Greutatea fontului textului: Bold
• Stil de text text: TT
• Culoarea textului textului: transparent (desktop), # 000000 (lipicios)
• Dimensiune text text: 16 px
• Spațiere scrisoare text: 1 px
• Înălțimea liniei textului: 1.3em
• Alinierea textului: centru

• Lățime maximă: 96%
• Alinierea modulului: centru
• Căptușeală: 0,5em sus, 0,5em jos

Rezultat final

Gânduri finale

În acest tutorial, am arătat cât de ușor este crearea unei bare de navigare lipicioase pentru un șablon de postare pe blog în Divi. Funcționalitatea lipicioasă a barei / rândului poate fi, de asemenea, ajustată cu ușurință cu opțiunile integrate Divi. De exemplu, puteți limita starea lipicioasă la o secțiune sau puteți alege să o lipiți doar în partea de sus sau de jos a ferestrei de vizualizare a browserului. Sperăm că acest lucru vă va fi util pentru următorul site de blog.

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

Noroc!