Želite li napraviti navigacijsku traku u Diviju koja je ljepljiva od dna do vrha stranice?
U tutorijalu divi Danas ćemo vam pokazati korak po korak kako da napravite ljepljivu navigacijsku traku od dna do vrha u Diviju.
Ovo će omogućiti da navigacijska traka u početku ostane na dnu stranice za jedinstveni izgled iznad preloma. Zatim, kada pomičete odjeljak iznad preklopa stranice, navigacijska traka će ostati na vrhu stranice i ostati tamo na cijeloj stranici.
Moglo bi se reći da će stranica "preuzeti" meni na dnu ekrana i donijeti lijep efekat interakcije vašem glavnom meniju i vašem site Web.
Krenimo!
pregled
Kako bismo vam pomogli da vizualizirate rezultat koji pokušavamo postići, pogledajmo krajnji rezultat:
Preuzmite DIVI sada!!!
Počnimo kreiranjem nove stranice sa Divi Builder-om
Da biste započeli, morat ćete učiniti sljedeće:
Sa WordPress kontrolne table idite na Stranice> Dodaj novo za stvaranje nove stranice.
Dajte mu naslov koji vam ima smisla i kliknite Koristite Divi Builder
Zatim kliknite na Start Building (Gradi od ogrebotina)
Nakon toga imat ćete prazno platno za početak dizajniranja u Divi-ju.
Napravite ljepljivu navigacijsku traku odozdo prema vrhu u Diviju
Dio 1: Kreiranje sekcije i zaglavlja iznad vodene linije
Za prvi dio ovog vodiča, kreirat ćemo odjeljak i zaglavlje iznad preloma koji će služiti kao glavni dio zaglavlja naše stranice. Odeljak će biti preko celog ekrana na radnoj površini kako bi se osiguralo da deo zauzima ceo prozor ekrana.
Pročitajte takođe: Divi: Birajte između mreže i izgleda pune širine modula Filterable Portfolio
Dodajte red
Za početak dodajte redak u kolonu u zadani odjeljak.
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žurirati minimalnu visinu i padding.
- Minimalna visina: 100vh (stolni računar), automatski (tablet i telefon)
- Podstava: 20vh (gornji i donji dio)
Tekst zaglavlja
Da biste kreirali tekst zaglavlja, dodajte novi tekstualni modul u red.
Zatim ažurirajte sadržaja sa sljedećim H1 zaglavljem:
<h1>Above the Fold</h1>
Podešavanja teksta
Ispod kartice dizajn u postavkama tekstualnog modula, ažurirajte stilove fonta zaglavlja na sljedeći način:
- Naslov:
- Font: Ruby
- Težina fonta: Semi Bold
- Stil: TT
- Poravnanje teksta: centrirano
- Boja teksta: #302ea7
- Veličina: 130px (Desktop), 70px (tablet), 40px (telefon)
- Razmak između slova: 2px
- Visina linije: 1,3 em
Dio 2: Kreiranje sekcije ispod vodene linije
Da bismo demonstrirali funkcionalnost ljepljive navigacijske trake, moramo dodati odjeljak ispod preklopa kako bismo imali prostora za pomicanje.
Da biste kreirali odjeljak, duplirajte odjeljak iznad nabora koji smo upravo kreirali.
Ažurirajte pozadinu dupliciranog odjeljka.
- Boja pozadine: #f4def1
Zatim dajte odeljku veliku minimalnu visinu tako da imamo prostora za pomeranje stranice prema dole. Ovo je jednostavno dio koji treba popuniti umjesto sadržaja prava jedna stranica.
- Minimalna visina: 200vh
Zatim ažurirajte sadržaja modula Tekst zamjenom riječi “ispod” po “iznad”.
3. dio: Kreirajte ljepljivu navigacijsku traku
Da 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 redovni odjeljak direktno ispod odjeljka iznad preklopa.
Zatim, dodajmo red sa jednom kolonom u sekciju.
Pozadina odjeljka i punjenje
Otvorite postavke odjeljka i ažurirajte boju pozadine.
- Boja pozadine: #302ea7
Zatim uklonite gornji i donji padding tako da traka za navigaciju ima manju visinu.
- Padding: 0px (vrh i dno)
Dodajte vidljiv preljev
Da biste bili sigurni da će padajući izbornici ostati vidljivi, ažurirajte opcije vidljivosti na sljedeći način:
- Horizontalni preliv: vidljiv
- Vertikalni preliv: vidljiv
Dajte odjeljku apsolutnu poziciju na mobilnom uređaju
Padajući meni za mobilni uređaj će se otvoriti prema zadanim postavkama ispod ikone hamburgera. Ako zadržimo navigacijsku traku na dnu, ona bi sakrila padajući meni ako korisnik klikne na njega.
Za bolje korisničko iskustvo, želimo da navigacijska traka počinje na samom vrhu stranice na ekranu tableta i telefona.
Za to dajte sekciji apsolutnu poziciju na tabletu i telefonu.
- Položaj: relativan (stolni računar), apsolutni (tablet i telefon)
Dodajte ljepljivu poziciju za desktop i mobilne uređaje
Da biste dodali ljepljivu poziciju u odjeljak navigacijske trake, ažurirajte sljedeće:
- Ljepljiva pozicija: zalijepi se na vrh i dno (stolni računar), drži se na vrh (tablet i telefon)
Ažuriraj dodavanje redova
Kada je ljepljivi odjeljak završen, otvorite postavke reda unutar odjeljka i ažurirajte padding na sljedeći način:
- Padding: 10px (vrh i dno)
Kreirajte navigacijski meni
Sa sekcijom i linijom na mjestu, spremni smo za kreiranje navigacijskog menija.
Počnite dodavanjem modula menija u red sa jednom kolonom.
Sadržaj menija
Ažurirajte sadržaj menija na sljedeći način:
- izaberite meni sa padajuće liste
- dodajte sliku logotipa
- uklonite zadanu boju pozadine
Ispod kartice dizajn, ažurirajte sljedeće postavke teksta i ikona menija:
- Boja aktivne veze: #fff
- Font menija: Ruby
- Stil fonta menija: TT
- Boja teksta: #fff
- Veličina teksta menija: 16px
- Poravnanje teksta: desno
- Boja linije padajućeg menija: #e19dff
- Boja teksta menija mobilnog telefona: #302ea7
- Boja ikone korpe: #fff
- Boja ikone pretrage: #fff
- Boja ikone menija za hamburger: #fff
Korištenje obruba za pomicanje apsolutnog položaja navigacijske trake na mobilnom uređaju
Budući da dio navigacijske trake ima apsolutnu poziciju na mobilnom uređaju, traka će se nalaziti iznad (i odsjeći) gornji dio stranice. Da bismo ovo popravili, moramo pomaknuti gornji dio koristeći gornju ivicu 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 pretraživača ispod 980px da vidite mobilni meni.
Takođe možete konsultovati: Divi: Kako napraviti ljepljivu navigacijsku traku
Kliknite desnim tasterom miša na odeljak koji sadrži meni i izaberite opciju pregledati element u kontekstualnom meniju pretraživača. Trebalo bi da vidite kutiju Alati ispod sekcije koja označava dimenzije (uključujući visinu) sekcije.
Za ovaj primjer, visina sekcije navigacijske trake je 72 piksela.
Dodajte pomak gornje ivice u odjeljak iznad preklopa
Sada kada smo odredili visinu presjeka, otvorite postavke za gornji dio (iznad preklopa).
Ispod kartice dizajn, dodajte sljedeći gornji rub na tabletu i telefonu:
- Širina gornje ivice: 72 piksela (tablet i telefon)
- Boja gornje ivice: #302ea7
Budući da je ivica iste visine kao dio s apsolutnom pozicijom, nećete moći vidjeti ivicu jer služi samo za guranje dijela prema dolje kako se ne bi isjekao.
Konačni rezultat
Otkrijte krajnji rezultat!
Preuzmite DIVI sada!!!
zaključak
Kreiranje ljepljive navigacijske trake od dna do vrha može se lako obaviti korištenjem Divi-ovog ugrađenog položaja i lepljive opcije.
Ključno je dati dijelu iznad preklopa visinu od 100vh, a zatim dodati odjeljak za navigaciju ispod koji se drži donjeg i vrha pretraživača. Nadam se da će vam ovo pomoći dodati jedinstveniji i zanimljiviji gornji dio site Web.
Ova ljepljiva navigacijska traka najbolje funkcionira za dizajn jedne stranice, a ne za cjelokupni predložak. Uz to, možete jednostavno odabrati da ovo koristite kao dizajn vaše početne stranice i koristite globalno zaglavlje za ostale stranice koristeći Divi generator tema .
Nadamo se da će vas ovaj vodič inspirisati za vaše sljedeće Divi projekte. Ako imate bilo kakvih nedoumica ili prijedloga, pronađite nas u odjeljak komentara da razgovaramo o tome.
Takođe možete konsultovati naši resursi, ako vam je potrebno više elemenata za provođenje projekata kreiranja internetskih stranica.
Ne ustručavajte se da konsultujete i naš vodič o Izrada bloga WordPress ili onaj on Divi: najbolja WordPress tema svih vremena.
Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
