Dëshironi të krijoni një shirit navigimi në Divi që të ngjitet nga fundi në krye të faqes?
Në tutorial Divi Sot do t'ju tregojmë hap pas hapi se si të krijoni një shirit navigimi ngjitës nga poshtë lart në Divi.
Kjo do të lejojë që shiriti i navigimit të qëndrojë fillimisht në fund të faqes për një plan urbanistik unik sipër. Më pas, sapo të lëvizni seksionin mbi palosjen e faqes, shiriti i navigimit do të mbetet në krye të faqes dhe do të qëndrojë aty gjatë gjithë faqes.
Mund të thuash se faqja do të "marrë" menunë në fund të ekranit dhe do të sjellë një efekt të këndshëm ndërveprimi në menunë tuaj kryesore dhe Site Web.
Le të fillojmë!
studim
Për t'ju ndihmuar të vizualizoni rezultatin që po përpiqemi të arrijmë, le të shohim rezultatin përfundimtar:
Shkarkoni DIVI tani!!!
Le të fillojmë duke krijuar një faqe të re me Divi Builder
Për të filluar, do t'ju duhet të bëni sa më poshtë:
Nga pulti i WordPress, shkoni te Faqet> Shto të Reja për të krijuar një faqe të re.
Jepini një titull që ka kuptim për ju dhe klikoni Përdorni Divi Builder
Pastaj kliko Filloni të ndërtoni (Ndërtoni nga Gërvishtja)
Pas kësaj, ju do të keni një kanavacë të zbrazët për të filluar projektimin në Divi.
Krijoni një shirit ngjitës nga lart-lart në Divi
Pjesa 1: Krijimi i seksionit dhe titullit mbi vijën e ujit
Për pjesën e parë të këtij tutoriali, ne do të krijojmë seksionin dhe kokën sipër deles që do të shërbejë si seksioni kryesor i kokës së faqes sonë. Seksioni do të jetë me ekran të plotë në desktop për t'u siguruar që seksioni të zë të gjithë dritaren e ekranit.
Lexo gjithashtu: Divi: Zgjidhni midis rrjetit dhe paraqitjes me gjerësi të plotë të modulit të Portofolit të Filterueshëm
Shtoni një rresht
Për të filluar, shtoni një rresht në një kolonë në seksionin e paracaktuar.
Cilësimet e seksionit
Para se të shtoni një modul, hapni cilësimet e seksionit dhe shtoni një sfond si më poshtë:
- Ngjyra e sfondit: #e9f9ff
- Imazhi i sfondit: [shto imazh]
Nën skedinë Projektimi, përditësoni lartësinë minimale dhe mbushjen.
- Lartësia minimale: 100 Vh (Desktop), automatike (Tableti dhe telefoni)
- Mbushja: 20vh (lart dhe poshtë)
Teksti i kokës
Për të krijuar tekstin e kokës, shtoni një modul të ri Teksti në rresht.
Më pas përditësoni përmbajtje me kokën e mëposhtme H1:
<h1>Above the Fold</h1>
Cilësimet e tekstit
Nën skedinë Projektimi në cilësimet e modulit të tekstit, përditësoni stilet e shkronjave të kokës si më poshtë:
- Titulli:
- Fonti: Ruby
- Pesha e shkronjave: Gjysmë e trashë
- Stili: TT
- Rreshtimi i tekstit: në qendër
- Ngjyra e tekstit: #302ea7
- Madhësia: 130 px (Desktop), 70 px (Tablet), 40 px (Telefon)
- Hapësira e shkronjave: 2 px
- Lartësia e linjës: 1,3 em
Pjesa 2: Krijimi i seksionit poshtë vijës ujore
Për të demonstruar funksionalitetin e shiritit të navigimit ngjitës, duhet të shtojmë një seksion poshtë palosjes në mënyrë që të kemi hapësirë për të lëvizur.
Për të krijuar seksionin, dublikojeni seksionin sipër rrudhës që sapo bëmë.
Përditësoni sfondin e seksionit të kopjuar.
- Ngjyra e sfondit: #f4def1
Më pas jepini seksionit një lartësi minimale të madhe në mënyrë që të kemi hapësirë për të lëvizur poshtë faqes. Ky është thjesht një seksion që duhet të plotësohet në vend të përmbajtje një faqe e vërtetë.
- Lartësia minimale: 200 Vh
Më pas përditësoni përmbajtje të modulit Tekst duke zëvendësuar fjalën "më poshtë" par "Sipër".
Pjesa 3: Krijoni shiritin e navigimit ngjitës
Për të krijuar shiritin e navigimit ngjitës nga poshtë lart, hapi ynë i parë është të krijojmë një seksion të ri me një rresht në një kolonë.
U shtua seksion dhe rresht i ri
Së pari, le të shtojmë një seksion të ri të rregullt direkt poshtë seksionit mbi dele.
Më pas, le të shtojmë një rresht me një kolonë në seksion.
Seksioni i sfondit dhe mbushja
Hapni cilësimet e seksionit dhe azhurnoni ngjyrën e sfondit.
- Ngjyra e sfondit: #302ea7
Pastaj hiqni mbushjen e sipërme dhe të poshtme në mënyrë që shiriti i navigimit të ketë më pak lartësi.
- Mbushja: 0 px (lart dhe poshtë)
Shtoni tejmbushje të dukshme
Për të siguruar që menutë zbritëse të mbeten të dukshme, përditësoni opsionet e dukshmërisë si më poshtë:
- Vërshimi horizontal: I dukshëm
- Vërshimi vertikal: I dukshëm
Jepini seksionit një pozicion absolut në celular
Menyja rënëse e celularit do të hapet si parazgjedhje nën ikonën e hamburgerit. Nëse mbajmë shiritin e navigimit në fund, ai do të fshihte menynë rënëse nëse përdoruesi klikon mbi të.
Për një përvojë më të mirë të përdoruesit, ne duam që shiriti i navigimit të fillojë në krye të faqes në ekranin e tabletit dhe telefonit.
Për këtë, jepini seksionit një pozicion absolut në tablet dhe telefon.
- Pozicioni: relativ (Desktop), Absolut (Tableti dhe telefoni)
Shto pozicion ngjitës për desktop dhe celular
Për të shtuar pozicionin ngjitës në seksionin e shiritit të navigimit, përditësoni sa vijon:
- Pozicioni ngjitës: Ngjit lart dhe poshtë (Desktop), Ngjit lart (Tableti dhe telefoni)
Përditëso mbushjen e rreshtit
Pasi të përfundojë seksioni ngjitës, hapni cilësimet e rreshtit brenda seksionit dhe përditësoni mbushjen si më poshtë:
- Mbushja: 10 px (lart dhe poshtë)
Krijoni një menu lundrimi
Me seksionin dhe rreshtin në vend, ne jemi gati të krijojmë menunë e navigimit.
Filloni duke shtuar një modul Menu në rreshtin me një kolonë.
Përmbajtja e menysë
Përditësoni përmbajtjen e menysë si më poshtë:
- zgjidhni menunë nga lista rënëse
- shtoni imazhin e logos
- hiqni ngjyrën e paracaktuar të sfondit
Nën skedinë Projektimi, përditësoni tekstin e mëposhtëm të menusë dhe cilësimet e ikonës:
- Ngjyra e lidhjes aktive: #fff
- Fonti i menysë: Ruby
- Stili i fontit të menysë: TT
- Ngjyra e tekstit: #fff
- Madhësia e tekstit të menysë: 16 px
- Rreshtimi i tekstit: djathtas
- Ngjyra e linjës së menysë rënëse: #e19dff
- Ngjyra e tekstit të menysë celulare: #302ea7
- Ngjyra e ikonës së karrocës së blerjeve: #fff
- Ngjyra e ikonës së kërkimit: #fff
- Ngjyra e ikonës së menysë së Hamburgerit: #fff
Përdorimi i një kufiri për të kompensuar pozicionin absolut të shiritit të navigimit në celular
Meqenëse seksioni i shiritit të navigimit ka një pozicion absolut në celular, shiriti do të ulet sipër (dhe do të presë) pjesën e sipërme të faqes. Për ta rregulluar këtë, duhet të kompensojmë seksionin e sipërm duke përdorur një kufi të sipërm me të njëjtën lartësi si shiriti/seksioni i navigimit.
Inspektoni lartësinë e seksionit të shiritit të navigimit në celular
Për të përcaktuar lartësinë e shiritit të navigimit në celular, hapni një version të drejtpërdrejtë të faqes në një dritare të re të shfletuesit. Më pas mund të zvogëloni gjerësinë e shfletuesit nën 980 px për të parë menunë celulare.
Ju gjithashtu mund të konsultoheni: Divi: Si të krijoni një shirit navigimi ngjitës
Klikoni me të djathtën në seksionin që përmban menunë dhe zgjidhni opsionin inspektoni elementin në menynë e kontekstit të shfletuesit. Ju duhet të shihni një kuti outils nën seksionin që tregon dimensionet (përfshirë lartësinë) e seksionit.
Për këtë shembull, lartësia e seksionit të shiritit navigues është 72 piksele.
Shtoni një kompensim të kufirit të lartë në pjesën mbi palosje
Tani që kemi përcaktuar lartësinë e seksionit, hapni cilësimet për pjesën e sipërme (sipër palosjes).
Nën skedinë Projektimi, shtoni kufirin e sipërm të mëposhtëm në tablet dhe telefon:
- Gjerësia e kufirit të sipërm: 72 pikselë (tableti dhe telefoni)
- Ngjyra e sipërme e kufirit: #302ea7
Meqenëse kufiri është i njëjtë me lartësinë e seksionit me pozicionin absolut, nuk do të mund ta shihni kufirin sepse ai shërben vetëm për të shtyrë seksionin poshtë në mënyrë që të mos pritet.
Rezultati përfundimtar
Zbuloni rezultatin përfundimtar!
Shkarkoni DIVI tani!!!
Përfundim
Krijimi i një shiriti navigues ngjitës nga poshtë lart mund të bëhet lehtësisht duke përdorur pozicionin e integruar të Divi dhe opsionet ngjitëse.
Çështja kryesore është t'i jepni seksionit sipër palosjes një lartësi prej 100 vh, më pas shtoni seksionin e shiritit navigues poshtë që ngjitet në fund dhe në krye të shfletuesit. Shpresoj se kjo do t'ju ndihmojë të shtoni një më unike dhe tërheqëse mbi dele në tuaj Site Web.
Ky shirit navigimi ngjitës funksionon më mirë për një dizajn të vetëm faqesh sesa për një shabllon të përgjithshëm. Thënë kështu, ju lehtë mund të zgjidhni ta përdorni këtë si dizajnin e faqes tuaj fillestare dhe të përdorni një kokë globale për pjesën tjetër të faqeve duke përdorur Gjeneratori i temave Divi .
Shpresojmë që ky tutorial t'ju frymëzojë për projektet tuaja të ardhshme Divi. Nëse keni ndonjë shqetësim apo sugjerim, na gjeni në pjesa e komenteve për ta diskutuar atë.
Ju gjithashtu mund të konsultoheni burimet tona, nëse keni nevojë për më shumë elementë për të realizuar projektet tuaja të krijimit të faqeve të Internetit.
Mos hezitoni të konsultoheni edhe me udhëzuesin tonë për Krijimi i blogut të WordPress ose atë më Divi: tema më e mirë e WordPress të të gjitha kohërave.
Por në ndërkohë, ndajeni këtë artikull në rrjetet tuaja të ndryshme sociale.
...
