Želite li stvoriti navigacijsku traku u Diviju koja je ljepljiva od dna do vrha stranice?
U udžbeniku Divi Danas ćemo vam pokazati korak po korak kako stvoriti ljepljivu navigacijsku traku od dna prema vrhu u Diviju.
To će omogućiti da navigacijska traka u početku ostane na dnu stranice za jedinstveni izgled na gornjoj polovici stranice. Zatim, nakon što pomaknete odjeljak iznad preloma stranice, navigacijska traka ostat će na vrhu stranice i ostati ondje kroz cijelu stranicu.
Moglo bi se reći da će stranica "preuzeti" izbornik na dnu zaslona i donijeti lijep učinak interakcije vašem glavnom izborniku i vašem web stranica.
Započnimo!
pregled
Kako bismo vam pomogli da vizualizirate rezultat koji pokušavamo postići, pogledajmo krajnji rezultat:
Preuzmite DIVI sada!!!
Započnimo stvaranjem nove stranice s Divi Builderom
Da biste započeli, morat ćete učiniti sljedeće:
S WordPress nadzorne ploče idite na Stranice> Dodaj novo za stvaranje nove stranice.
Dajte mu naslov koji vam ima smisla i kliknite Koristite Divi Builder
zatim kliknite Počnite graditi (Gradi od ogrebotina)
Nakon toga imat ćete prazno platno za početak dizajniranja u Divi.
U Diviju stvorite ljepljivu navigacijsku traku odozdo prema vrhu
1. dio: Stvaranje odjeljka i zaglavlja iznad vodene linije
U prvom dijelu ovog vodiča stvorit ćemo odjeljak i zaglavlje iznad preklopa koji će služiti kao glavni odjeljak zaglavlja naše stranice. Odjeljak će biti prikazan preko cijelog zaslona na radnoj površini kako bi se osiguralo da odjeljak zauzima cijeli prozor.
Pročitajte također: Divi: Odaberite između rešetkastog izgleda i rasporeda pune širine modula Filterable Portfolio
Dodajte red
Za početak dodajte redak u stupac zadanom odjeljku.
Postavke odjeljka
Prije dodavanja modula otvorite postavke odjeljka i dodajte pozadinu na sljedeći način:
- Boja pozadine: #e9f9ff
- Pozadinska slika: [dodaj sliku]
Ispod kartice dizajn, ažurirajte minimalnu visinu i ispunu.
- Min. visina: 100vh (stolno računalo), automatski (tablet i telefon)
- Podstava: 20vh (gore i dolje)
Zaglavlje Tekst
Da biste stvorili tekst zaglavlja, dodajte novi modul Tekst u red.
Zatim ažurirajte sadržaj sa sljedećim H1 zaglavljem:
<h1>Above the Fold</h1>
Postavke teksta
Ispod kartice dizajn u postavkama tekstualnog modula ažurirajte stilove fonta zaglavlja na sljedeći način:
- Naslov:
- Font: Ruby
- Težina fonta: polu podebljano
- Stil: TT
- Poravnanje teksta: centrirano
- Boja teksta: #302ea7
- Veličina: 130 px (stolno računalo), 70 px (tablet), 40 px (telefon)
- Razmak između slova: 2px
- Visina linije: 1,3 em
Dio 2: Stvaranje odjeljka ispod vodene linije
Kako bismo demonstrirali funkcionalnost ljepljive navigacijske trake, moramo dodati odjeljak ispod preloma kako bismo imali prostora za pomicanje.
Da biste stvorili odjeljak, duplicirajte odjeljak iznad nabora koji smo upravo napravili.
Ažurirajte pozadinu dupliciranog odjeljka.
- Boja pozadine: #f4def1
Zatim odjeljku dajte veliku minimalnu visinu kako bismo imali prostora za pomicanje stranice prema dolje. Ovo je jednostavno dio koji treba ispuniti umjesto sadržaj prava jedna stranica.
- Minimalna visina: 200 vh
Zatim ažurirajte sadržaj modula Tekst zamjenom riječi "Ispod" još "Iznad".
3. dio: Izradite ljepljivu navigacijsku traku
Kako bismo stvorili ljepljivu navigacijsku traku odozdo prema gore, naš prvi korak je stvaranje novog odjeljka s jednim redom u jedan stupac.
Dodan novi odjeljak i linija
Prvo, dodajmo novi obični odjeljak neposredno ispod odjeljka iznad preloma.
Zatim, dodajmo redak s jednim stupcem u odjeljak.
Pozadina odjeljka i ispuna
Otvorite postavke odjeljka i ažurirajte boju pozadine.
- Boja pozadine: #302ea7
Zatim uklonite gornju i donju podlogu tako da navigacijska traka ima manju visinu.
- Ispod: 0px (gornje i donje)
Dodajte vidljivi preljev
Kako biste osigurali da padajući izbornici ostaju vidljivi, ažurirajte opcije vidljivosti na sljedeći način:
- Horizontalni preljev: vidljiv
- Vertikalni preljev: vidljiv
Dajte odjeljku apsolutni položaj na mobilnom uređaju
Padajući izbornik za mobilne uređaje otvorit će se prema zadanim postavkama ispod ikone hamburgera. Ako zadržimo navigacijsku traku na dnu, ona će sakriti padajući izbornik ako korisnik klikne na nju.
Za bolje korisničko iskustvo želimo da navigacijska traka počinje na samom vrhu stranice na ekranu tableta i telefona.
U tu svrhu odjeljku dodijelite apsolutnu poziciju na tabletu i telefonu.
- Pozicija: relativna (stolno računalo), apsolutna (tablet i telefon)
Dodajte ljepljivi položaj za stolno računalo i mobilni uređaj
Da biste dodali ljepljivu poziciju u odjeljak navigacijske trake, ažurirajte sljedeće:
- Ljepljiva pozicija: zalijepi se za vrh i dno (stolno računalo), zalijepi za vrh (tablet i telefon)
Ažuriraj dodavanje redova
Nakon što je ljepljivi odjeljak dovršen, otvorite postavke retka unutar odjeljka i ažurirajte ispunu na sljedeći način:
- Ispod: 10px (gornje i donje)
Napravite navigacijski izbornik
S odjeljkom i linijom na mjestu, spremni smo za izradu navigacijskog izbornika.
Započnite dodavanjem modula izbornika u redak s jednim stupcem.
Sadržaj jelovnika
Ažurirajte sadržaj izbornika na sljedeći način:
- odaberite izbornik s padajućeg popisa
- dodajte sliku logotipa
- uklonite zadanu boju pozadine
Ispod kartice dizajnažurirajte sljedeće postavke teksta izbornika i ikona:
- Boja aktivne veze: #fff
- Font izbornika: Ruby
- Stil fonta izbornika: TT
- Boja teksta: #fff
- Veličina teksta izbornika: 16px
- Poravnanje teksta: desno
- Boja linije padajućeg izbornika: #e19dff
- Boja teksta mobilnog izbornika: #302ea7
- Boja ikone košarice: #fff
- Boja ikone pretraživanja: #fff
- Boja ikone jelovnika hamburgera: #fff
Korištenje obruba za pomak apsolutnog položaja navigacijske trake na mobilnom uređaju
Budući da odjeljak navigacijske trake ima apsolutni položaj na mobilnom uređaju, traka će se nalaziti iznad (i odrezati) gornji dio stranice. Da bismo to popravili, moramo pomaknuti gornji odjeljak koristeći gornji obrub iste visine kao navigacijska traka/odjeljak.
Provjerite visinu odjeljka navigacijske trake na mobilnom uređaju
Da biste odredili visinu navigacijske trake na mobilnom uređaju, otvorite živu verziju stranice u novom prozoru preglednika. Zatim možete smanjiti širinu preglednika ispod 980 px da biste vidjeli mobilni izbornik.
Također se možete konzultirati: Divi: Kako stvoriti ljepljivu navigacijsku traku
Desnom tipkom miša kliknite odjeljak koji sadrži izbornik i odaberite opciju pregledati element u kontekstnom izborniku preglednika. Trebali biste vidjeti okvir outils ispod odjeljka koji označava dimenzije (uključujući visinu) odjeljka.
Za ovaj primjer, visina odjeljka navigacijske trake je 72 piksela.
Dodajte pomak gornje ivice u odjeljak iznad preklopa
Sada kada smo odredili visinu odjeljka, otvorite postavke za gornji dio (iznad preklopa).
Ispod kartice dizajn, dodajte sljedeći gornji obrub na tablet i telefon:
- Širina gornjeg ruba: 72 piksela (tablet i telefon)
- Boja gornjeg ruba: #302ea7
Budući da je obrub iste visine kao i odjeljak s apsolutnom pozicijom, nećete moći vidjeti obrub jer služi samo da gurnete odjeljak prema dolje kako se ne bi prerezao.
Konačni rezultat
Otkrijte krajnji rezultat!
Preuzmite DIVI sada!!!
Zaključak
Stvaranje ljepljive navigacijske trake od dna do vrha može se lako napraviti korištenjem Divi ugrađenog položaja i ljepljive opcije.
Ključno je dati odjeljku iznad preklopa visinu od 100vh, zatim dodati odjeljak navigacijske trake ispod koji se nalazi na dnu i vrhu preglednika. Nadamo se da će vam ovo pomoći dodati jedinstveniji i privlačniji izgled na gornjoj polovici stranice web stranica.
Ova ljepljiva navigacijska traka najbolje funkcionira za dizajn jedne stranice, a ne za cijeli predložak. Unatoč tome, možete jednostavno odlučiti koristiti ovo kao dizajn svoje početne stranice i koristiti globalno zaglavlje za ostale stranice koristeći Divi generator tema .
Nadamo se da će vas ovaj vodič inspirirati za vaše sljedeće Divi projekte. 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.
...
