[Ad_1]
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 paraqitjen FALAS
Për të marrë në dorë dizajnet në këtë tutorial, fillimisht do t'ju duhet ta shkarkoni duke përdorur butonin më poshtë. Për të hyrë në shkarkim, do t'ju duhet të abonoheni në listën tonë të postimeve Divi Daily duke përdorur formë më poshtë. Si pajtimtar i ri, do të merrni edhe më shumë përfitime Divi dhe një paketë Divi Layout falas çdo të hënë! Nëse jeni tashmë në listë, thjesht shkruani adresën tuaj të emailit më poshtë dhe klikoni shkarkim. Nuk do të "reabonoheni" ose nuk do të merrni email shtesë.
Për të importuar paraqitjen e seksionit në bibliotekën tuaj Divi, shkoni në bibliotekën Divi.
Klikoni në butonin Import.
Në dritaren pop-up të transportueshmërisë, zgjidhni skedën e importit dhe zgjidhni skedarin për t'u shkarkuar nga kompjuteri juaj.
Pastaj klikoni në butonin e importit.
Pasi të bëhet, paraqitja e seksioneve do të jetë e disponueshme në Divi Builder.
Për tutorialin, do?
Çfarë duhet të filloni
Për të filluar, do t'ju duhet të bëni sa më poshtë:
- Nëse nuk e keni bërë tashmë, instaloni dhe aktivizoni Tema divi.
- Krijoni një faqe të re në WordPress dhe përdorni Divi Builder për të redaktuar faqen në pjesën e përparme (krijuesi vizual).
- Zgjidhni opsionin "Ndërto nga e para".
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ë pjesën dhe titullin mbi vijën ujore që do të shërbejë si seksioni kryesor i titullit të faqes sonë. Seksioni do të jetë me ekran të plotë në desktop për të siguruar që seksioni të marrë të gjithë dritaren.
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: [shtoni imazhin]
Në skedën Dizajn, përditësoni lartësinë dhe mbushjen minimale.
- Lartësia minimale: 100 vh (kompjuter desktop), automatik (tabletë dhe telefon)
- Mbushje: sipër 20vh, poshtë 20vh
Teksti i kokës
Për të krijuar tekstin e titullit, shtoni një modul të ri teksti në rresht.
Pastaj azhurnoni përmbajtjen me kokën e mëposhtme H1:
<h1>Above the Fold</h1>
Cilësimet e tekstit
Në skedën Dizajni të Cilësimeve të Tekstit, azhurnoni stilet e shkronjave të titullit si më poshtë:
- Shkronja e titullit: Rubik
- Pesha e fontit të kokës: Gjysmë e guximshme
- Stili i fontit të titullit TT
- Rreshtimi i tekstit të kokës: Qendra
- Titulli Ngjyra e Tekstit: # 302ea7
- Madhësia e tekstit të titullit: 130px (desktop), 70px (tablet), 40px (telefon)
- Hapësira e shkronjave të kokës: 2px
- Lartësia e Linjës së Drejtimit: 1,3 em
Pjesa 2: Krijimi i seksionit nën palosje
Për të demonstruar funksionalitetin e shiritit të navigimit ngjitës, duhet të shtojmë një seksion poshtë palosjes në mënyrë që të kemi vend për të lëvizur.
Për të krijuar seksionin, kopjoni pjesën mbi vijën ujore që sapo kemi krijuar.
Përditësoni sfondin e seksionit të kopjuar.
- Ngjyra e sfondit: # f4def1
Pastaj jepni seksionit një lartësi të madhe minimale në mënyrë që të kemi vend për të lëvizur në faqe. Ky është vetëm një seksion për tu plotësuar në vend të përmbajtjes aktuale në një faqe.
Pastaj azhurnoni përmbajtjen e modulit të tekstit duke zëvendësuar fjalën "Më poshtë" me "Mbi".
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ë.
Shtoni një seksion të ri dhe një rresht të ri
Shtoni një seksion të ri të rregullt direkt nën seksionin mbi vijën e ujit.
Pastaj shtoni një rresht në 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.
- Mbush: 0px lart, 0px 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ë:
- Përmbytje horizontale: E dukshme
- Vërshim 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 e mbajmë shiritin e navigimit në fund, do të fshihte menunë zbritëse nëse përdoruesi klikon mbi të në pozicionin poshtë. 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 ta bërë këtë, caktoni seksionit një pozicion absolut në tabletë dhe telefon.
- Pozicioni: Relativ (kompjuter desktop), Absolut (tablet dhe telefon)
Shtoni pozicion ngjitës për desktopin dhe celularin
Për të shtuar pozicionin ngjitës në pjesën e shiritit të navigimit, përditësoni sa vijon:
- Pozicioni ngjitës: Rrini në krye dhe në fund (desktop), ngjiteni në krye (tabletë dhe telefon)
Përditëso mbushjen e rreshtit
Pasi të përfundojë pjesa ngjitëse, hapni cilësimet e rreshtit brenda seksionit dhe azhurnoni mbushjen si më poshtë:
- Mbushje: 10 pikselë në krye, 10 pikselë në fund
Krijoni një menu lundrimi
Me seksionin dhe rreshtin në vend, ne jemi gati të krijojmë menunë e lundrimit.
Filloni duke shtuar një modul menuje në rresht në një kolonë.
Përmbajtja e menysë
Përditësoni përmbajtjen e menysë si më poshtë:
- zgjidhni menunë nga lista zbritëse
- shtoni imazhin e logos (unë jam duke përdorur imazhin 122px me 52px)
- hiqni ngjyrën e paracaktuar të sfondit
Në skedën Dizajn, azhurnoni tekstin e mëposhtëm të menysë dhe cilësimet e ikonës:
- Ngjyra e lidhjes aktive: #fff
- Fonti i menysë: Rubik
- Stili i fontit të menysë: TT
- Ngjyra e tekstit të menysë: #fff
- Madhësia e tekstit të menysë: 16px
- Rreshtimi i tekstit: djathtas
- Ngjyra e vijës së menysë zbritëse: # e19dff
- Ngjyra e tekstit të menysë celulare: # 302ea7
- Ngjyra e ikonës së karrocës së blerjes: #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ë ndërpritet) pjesa e sipërme e faqes. Për të zgjidhur këtë problem, ne duhet të kompensojmë pjesën e sipërme duke përdorur një kufi të lartë 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. Pastaj mund të zvogëloni gjerësinë e shfletuesit nën 980px për të parë menunë e celularit. Klikoni me të djathtën në seksionin që përmban menunë dhe zgjidhni opsionin Inspect Item nga menyja e kontekstit të shfletuesit. Ju duhet të shihni një kuti mjetesh nën seksionin që tregon dimensionet (përfshirë lartësinë) e seksionit. Për këtë shembull, lartësia e seksionit të shiritit të navigimit është 72px.
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 skedën Dizajn, shtoni kufirin e mëposhtëm të sipërm si në tabletë ashtu edhe në telefon:
- Gjerësia e kufirit të sipërm: 72 px (tabletë dhe telefon)
- Ngjyra e Kufirit të Sipërm: # 302ea7
Për shkak se kufiri është i njëjtë me lartësinë me pjesën me pozicionin absolut, ju nuk do të jeni në gjendje të shihni kufirin pasi shërben vetëm për të shtyrë pjesën poshtë, në mënyrë që të mos pritet.
Rezultati përfundimtar
Zbuloni rezultatin përfundimtar!
Mendimet e fundit
Krijimi i një shiriti navigues ngjitës nga poshtë lart mund të arrihet lehtësisht duke përdorur pozicionin e integruar të Divi dhe opsionet ngjitëse. Gjëja 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ë navigatorit. Shpresojmë se kjo do t'ju ndihmojë të shtoni një më unike dhe tërheqëse mbi vijën e ujit 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 tuaj të faqes kryesore dhe të përdorni një kokë globale për pjesën tjetër të faqeve duke përdorur ndërtuesin. Tema divi.
Unë pres që të dëgjoj nga ju në komente.
Për shëndetin tuaj!
[Ad_2]
