Dëshironi të krijoni një kokë globale me modulin e menysë së ekranit të plotë në Divi?
Titulli është një nga elementët më të rëndësishëm të cilitdo Site Web dhe është në zemër të përvoja e përdoruesit. Menyja e navigimit u jep përdoruesve tuaj një ide se çfarë mund të presin të gjejnë në ju Site Web dhe i ndihmon ata të gjejnë informacionin që u nevojitet.
Për më tepër, një shirit i menusë dytësore mund të jetë një hapësirë e shkëlqyer për të nënvizuar një thirrje për veprim ose për të promovojë nje oferte. Për të mos përmendur që koka është një nga pjesët më të rëndësishme të faqes suaj Site Web, sepse zakonisht shfaqet në çdo faqe. Kjo është një mundësi e shkëlqyer për të shfaqur markën tuaj dhe për të krijuar një titull që është në përputhje me dizajnin e pjesës tjetër të faqes tuaj të internetit.
Opsionet e Divi's Theme Builder ju lejojnë të krijoni një kokë të personalizuar globale dhe të personalizoni pamjen e moduleve të kokës dhe menusë në të gjithë faqen tuaj të internetit.
Në këtë tutorial, ne do t'ju tregojmë se si të krijoni një kokë globale duke përdorur modulin e menusë në ekran të plotë të Divi.
Le të fillojmë!
studim
Këtu është një pamje paraprake e titullit global që do të dizajnojmë.
Hapni ndërtuesin e temave
Meqenëse po ndërtojmë një kokë globale në këtë shembull, le të lundrojmë te "Theme Builder", të cilin mund ta gjeni në menunë WordPress Divi. Zgjidhni Shto Global Header, pastaj zgjidhni Krijo Global Header.
Krijo shiritin dytësor të menusë
Kur hapni për herë të parë paraqitjen e kokës globale, ajo vjen e parangarkuar me një seksion të rregullt. Ne do ta modifikojmë këtë për të qenë shiriti ynë dytësor i menysë, i cili do të vendoset mbi menunë tonë me gjerësi të plotë dhe do të përfshijë tekstin e thirrjes për veprim dhe një buton.
Së pari, hapni cilësimet e seksionit dhe shtoni ngjyrën e sfondit.
- Sfondi: #92A8A1
Tjetra, kufiri i seksionit.
- Maja e marzhit të brendshëm: 0 px
- Marzhi i brendshëm i poshtëm: 0 px
Tani futni një rresht. Për këtë shembull, ne do të përdorim paraqitjen e treguar më poshtë.
Në cilësimet e rreshtit, në skedën Sizing of Style, harmonizoni lartësitë e kolonës.
- Harmonizoni lartësitë e kolonave: PO
Më pas, vendosni kufijtë e sipërm dhe të poshtëm si më poshtë:
- Marzhi i brendshëm i sipërm: 5 px
- Marzhi i brendshëm i poshtëm: 5 px
Meqenëse ne duam që elementët tanë dytësorë të kokës të rreshtohen vertikalisht, ne do të shtojmë disa CSS të personalizuara në elementin e rreshtit kryesor.
1.
align-items:center;
Tani që linja jonë është konfiguruar, ne mund të fusim modulet për tonën përmbajtje. Fillimisht futni një modul teksti në anën e majtë.
Ndryshoni përmbajtje të tekstit. Ky është vendi i përsosur për të përfshirë një Thirrje për Veprim ose për promovojë nje oferte.
- Teksti: "Bashkohuni në listën tonë të postimeve për të marrë 10% zbritje në porosinë tuaj!" »
Hyni në skedën Style të modulit Tekst dhe modifikoni parametrat si më poshtë:
- Fonti "Text": Poppins
- Dritë e zbehtë "Teksti": Mesatare
- Ngjyra e tekstit "Tekst": #FFFFFF
Më pas, shtoni modulin Button në të djathtë.
Shtoni tekstin e butonit.
- Teksti: "Merr një ofertë falas"
Në skedën Stil, rreshtoni butonin në qendër.
- Shtrirja e butonave: në qendër
Tani le të personalizojmë pamjen e butonit.
- Përdorni stile të personalizuara për "Button": Po
- Madhësia e tekstit të butonit: 14 px
- Ngjyra e tekstit të butonit: #FFFFFF
- Butoni i sfondit: #2F5349
- Gjerësia e kufirit të butonit: 0 px
- Butoni i rrezes kufitare: 50 px
- Hapësira e shkronjave të butonave: 1 px
- Fonti i butonit: Poppins
Shto modulin e menysë së ekranit të plotë
Tani që menyja dytësore është krijuar, ne mund të kalojmë në menunë kryesore. Ne do të ndërtojmë menunë duke përdorur modulin e Menysë së Full Screen. Shtoni një seksion të ri me ekran të plotë në kokën globale.
Zgjidhni dhe futni modulin e menysë së ekranit të plotë
Më pas, ne do të personalizojmë cilësimet e Menysë së Ekranit të plotë.
- Ngjyra e lidhjes aktive: #2F5349
- Menuja e shkronjave: Poppins
- Menyja me dritë të zbehtë: Gjysmë e theksuar
- Menyja e stilit të kopjimit: TT
- Ngjyra e tekstit të menysë: #000000
- Ngjyra e tekstit të menysë Hover: #2F5349
- Madhësia e tekstit të menysë: 15 px
- Hapësira e shkronjave të menusë: 2 px
Ndrysho ngjyrën e ikonës së menysë së hamburgerit në të zezë.
- Ngjyra e ikonës së menysë së Hamburgerit: #000000
Përpara se të shtojmë logon në menunë tonë, le të ndryshojmë opsionet e madhësisë. Ne do të përdorim opsionet reaguese të integruara të Divi për të vendosur një lartësi maksimale të ndryshme për PC dhe celular.
- Lartësia maksimale e logos në PC: 3vw
- Lartësia maksimale e logos në celular: 6vw
Tani shtoni logon tuaj në menynë e ekranit të plotë.
Së fundi, ne duam që menyja kryesore të mbetet në krye të ekranit kur përdoruesi lëviz nëpër faqen e internetit, kështu që ne do të përdorim cilësimet ngjitëse të integruara të Divi për këtë.
- Pozicioni ngjitës: Ngjitni sipër
Me këtë, dizajni ynë global i kokës është i plotë.
Krijoni një faqe të re me një plan urbanistik të paracaktuar
Për të parë në veprim kokën dhe menunë me gjerësi të plotë, le të krijojmë një faqe të re me një plan urbanistik të paracaktuar nga biblioteka Divi. Për këtë shembull ne do të përdorim faqen kryesore Flooring nga paketa paraqitjen e dyshemesë.
Shtoni një faqe të re në faqen tuaj të internetit dhe jepini një titull, më pas zgjidhni opsionin Use Divi Builder.
Ne jemi duke përdorur një plan urbanistik të bërë paraprakisht nga Biblioteka Divi për këtë shembull, kështu që zgjidhni Zgjidhni Layout.
Gjeni dhe zgjidhni paraqitjen "Flooring Home Page".
Zgjidhni "Zgjidhni paraqitjen" për të shtuar paraqitjen në faqen tuaj.
Tani dizajni është i plotë!
Rezultati përfundimtar
Përfundim
Siç thamë më lart, kreu dhe menyja e navigimit janë në qendër të përvojës së përdoruesit të faqes suaj të internetit. Tani e keni parë se sa e lehtë është të dizajnoni një titull të përgjithshëm mahnitës me modulin "Menyja e ekranit të plotë" të Divi.
Për fat të mirë, ndërtuesi i temave të Divi ju vë nën kontrollin e çdo aspekti të menusë dhe kokës së faqes suaj të internetit, dhe ju mund të krijoni dizajne krejtësisht të personalizuara dhe unike me vetëm disa klikime.
A i keni përdorur opsionet e titullit global të Divi për të personalizuar menynë e kokës dhe të lundrimit? Na tregoni se çfarë mendoni në komente!
