Divi: Kako stvoriti ljepljivu navigacijsku traku

Želite li stvoriti navigacijsku traku između postova koja je ljepljiva u Diviju?

Ljepljiva navigacijska traka postova učinkovit je način poboljšanja korisničkog iskustva bilo koje osobe web stranica bloga. Uz glavnu navigaciju vaše web-lokacije, veze za navigaciju postova korisnicima omogućuju jednostavan skok na prethodni post ili sljedeći post na blog. A ako ove veze za navigaciju posta dodate na ljepljivu traku, te veze ostaju vidljive i pristupačnije.

U ovom ćemo vodiču stvoriti navigacijsku traku između ljepljivih poruka Divi. Da bismo to učinili, koristit ćemo Divi ugrađene opcije za transformaciju retka u ljepljivu traku. Zatim ćemo upotrijebiti modul za navigaciju članaka kako bismo dizajnirali poveznice "prethodni članak" i "sljedeći članak". 

Osim toga, dodat ćemo naslov posta kao dinamički sadržaj u sredini trake koji podsjeća korisnike na post koji trenutno gledaju, dajući navigacijskoj traci lijep element "prošlost, sadašnjost i budućnost".

Započnimo!

pregled

Evo kratkog pregleda dizajna koji ćemo izraditi u ovom vodiču.

Što trebate za početak

Iako možete dodati ovu ljepljivu traku za navigaciju postova u bilo koji izgled posta bloga ili predložak u Diviju, mi ćemo koristiti unaprijed napravljeni predložak posta bloga kako bismo ubrzali proces i brzo započeli dizajn.

Uvezite predložak posta bloga "Meal Kit" u Divi Theme Builder

Za početak preuzmite besplatni predložak posta na blogu za Divi's Meal Kit Layout Pack . Da biste to učinili, idite na post na blogu .

Zatim unesite svoju e-poštu za preuzimanje zip datoteke.

Nakon toga raspakirajte datoteku tako da bude spremna za uvoz.

Za uvoz datoteke u uređivač tema, slijedite ove korake:

1. Idite na Divi > Theme Builder.
2. Kliknite na ikonu prenosivosti.
3. U skočnom prozoru Prenosivost odaberite karticu za uvoz.
4. Odaberite prethodno preuzetu raspakovanu datoteku za uvoz.
5. Kliknite « Uvezi Divi Theme Builder Predlošci ».
6. Pritisnite ikonu za uređivanje da biste uredili uvezeni model.

Napravite ljepljivu navigacijsku traku u Diviju

1. dio: Stvaranje ljepljive linije

Da bismo stvorili ljepljivu navigacijsku traku, upotrijebit ćemo redak s tri stupca kao ljepljivi spremnik za naše navigacijske veze između posta i naslova posta.

Pročitajte također: Divi: Kako koristiti opciju "Gradient Repeat" za stvaranje prilagođenih pozadinskih uzoraka

U drugom odjeljku izgleda predloška dodajte novi redak ispod retka koji sadrži sadržaj objave.

Postavke linije

Otvori postavke linije.

Prvo, moramo dodati ljepljivu poziciju liniji kako bismo mogli ažurirati druge opcije dizajna u ljepljivom stanju.

Ispod kartice napredanažurirajte sljedeće:

• Ljepljiva pozicija: Držite se na vrhu i dnu
• Gornje ljepljivo ograničenje: odjeljak
• Donja ljepljiva granica: područje tijela

Kako biste osigurali da se stupci ne gomilaju na mobilnom uređaju, dodajte sljedeći prilagođeni CSS Glavni element :

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

Ispod kartice Sadržaj, dodajte bijelu boju pozadine liniji u ljepljivom stanju na sljedeći način:

• pozadina: nema
• Pozadina: #ffffff (ljepljivo)

Pod postavkama dizajnažurirajte sljedeće:

• Koristi prilagođenu širinu oluka: DA
• Širina oluka: 1
• Širina: 100%
• Maksimalna širina: 100%
• Ispod: 0px (gornji i donji dio)

Sakrij srednji stupac na tabletu i telefonu

Da biste sakrili stupac na mobilnom telefonu, otvorite postavke za stupac 2 (srednji stupac) i ažurirajte opcije vidljivosti na sljedeći način:

• Onemogući na: telefonu, tabletu

2. dio: Stvaranje navigacijskih veza za članak

Kako bismo omogućili veću fleksibilnost dizajna za navigaciju postova, koristit ćemo dva odvojena modula za navigaciju postova. U lijevom stupcu ćemo dodati modul za navigaciju postova koji prikazuje samo poveznicu prethodnog članka. U desnom stupcu ćemo dodati modul za navigaciju postova koji prikazuje samo poveznicu na sljedeći post.

Link na prethodni post

U stupcu 1 dodajte novi modul za navigaciju postova.

Otvorite postavke modula, ažurirajte karticu opcija Sadržaj kako slijedi :

• Prethodni link (Tekst): Prethodni post
• Prikaži vezu na prethodni post: DA
• Prikaži poveznicu sljedećeg posta: NE
• Pozadina: #000000

Ispod kartice dizajnažurirajte sljedeće:

• Linkovi Font: Kumbh Sans
• Težina fonta veza: Podebljano
• Stil fonta: TT
• Boja teksta veze: #ffffff
• Veličina teksta veze: 26 px (stolno računalo), 16 px (tablet i telefon)
• Visina linije: 1,3 em
• Ispuna: 0,9 em (gore), 0,7 em (dno), 2 em (lijevo i desno)

Budući da skrivamo srednji stupac na mobilnom uređaju, dva preostala stupca koji će sadržavati navigacijske veze sada mogu zauzeti 50% širine preglednika na tabletu i telefonu. 

Vidi također: Divi: Kako promijeniti stil nekoliko elemenata kada lebdite ili nakon klika

Kako biste osigurali da navigacijska veza obuhvaća 50% okvira za prikaz, dodajte sljedeći prilagođeni CSS u CSS okvir Veze za gledanje na tabletu:

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

Izrada poveznice Sljedeći post

Da biste stvorili poveznicu za sljedeći post, kopirajte modul za navigaciju postova (s vezom za prethodni post) koji smo upravo dizajnirali i zalijepite ga u stupac 3 (desni stupac).

Zatim otvorite postavke navigacije postova za duplicirani modul u desnom stupcu i ažurirajte sljedeće opcije kartice sadržaja:

• Sljedeći link: Sljedeći post
• Prikaži vezu na prethodni post: NE
• Prikaži poveznicu sljedeće objave: DA

• Pozadina: #ffb100

Ispod kartice dizajn, ažurirajte boju teksta veze:

• Boja teksta veze: #000000

Dio 3: Stvaranje dinamičkog naslova posta

S obje navigacijske veze na mjestu, spremni smo dodati naslov posta kao dinamički sadržaj u srednji stupac. 

Ideja je dati korisniku lijep podsjetnik na poruku koju čita s mogućnošću navigacije na prethodnu i sljedeću poruku.

U srednjem stupcu dodajte novi tekstualni modul.

Ispod kartice Sadržaj, kliknite na ikonu "Koristite dinamički sadržaj" u području tijela, a zatim odaberite Naslov objave/arhive.

Nakon dodavanja dinamičkog naslova posta, otvorite postavke Naslov objave/arhive i ažurirajte sadržaj prije:

• Prije čitanja

Zatim spremite promjene.

Ispod kartice dizajnažurirajte sljedeće:

• Font teksta: Kumbh Sans
• Težina fonta teksta: Podebljano
• Stil fonta: TT
• Tekst Boja teksta: prozirna (radna površina), #000000 (ljepljiva)
• Veličina teksta: 16px
• Razmak između slova: 1px
• Visina linije: 1,3 em
• Poravnanje teksta: centrirano

• Maksimalna širina: 96%
• Modul poravnanja: centar
• Podstava: 0,5 em (gore i dolje)

Konačni rezultat

Preuzmite DIVI sada!!!

Zaključak

U ovom vodiču pokazali smo kako je jednostavno stvoriti ljepljivu navigacijsku traku za predložak posta na blogu u Diviju. 

Funkcionalnost ljepljive trake/linije također se može lako podesiti pomoću Divi ugrađenih opcija. Na primjer, možete ograničiti ljepljivo stanje na odjeljak ili odabrati da bude ljepljivo samo na vrhu ili dnu prozora preglednika. 

Nadam se da će ovo biti korisno za vaš sljedeći blog. Ako imate nedoumica ili prijedloga, potražite nas odjeljak komentara raspravljati o tome.

Također se možete konzultirati naši resursi, ako vam je potrebno više elemenata za provođenje projekata kreiranja internetskih stranica.

Ne ustručavajte se također konzultirati naš vodič o Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.

Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.

...