Nevoja për të krijuar një menu transparente lundruese në Divi ?
Po kërkoni një mënyrë për të vendosur kokën tuaj të përgjithshme mbi seksionet kryesore të faqeve tuaja? Në tutorial Divi Sot do t'ju tregojmë saktësisht se si ta bëni këtë.
Ne do të krijojmë një kokë globale mahnitëse nga e para (duke përdorur konstruktorin e themes de Divi) dhe ne do të aplikojmë një efekt lundrues në shiritin e menusë.
Le të shkojnë.
studim
Përpara se të zhytemi në këtë tutorial, le të hedhim një vështrim të shpejtë në rezultatin që duam të arrijmë.
Shkoni te Divi's Theme Builder dhe shtoni një shabllon të ri
allez në Divi > Ndërtuesi i Temave.
Krijo kokën globale me Ndërtuesin e Temave Divi
Klikoni 'Shto Kreun Global' dhe vazhdoni duke zgjedhur 'Build Global Header'.
Cilësimet e seksionit
Ngjyrë e sfondit
Pasi të jeni në redaktuesin e shabllonit, do të vini re një seksion në faqe. Hapeni këtë seksion dhe ndryshoni ngjyrën e sfondit në një ngjyrë plotësisht transparente. Kjo do të lejojë që çdo gjë poshtë seksionit të shfaqet.
- Sfondi: rgba (0,0,0,0)
sizing
Pastaj shkoni te skeda Stili i seksionit dhe ndryshoni gjerësinë maksimale.
- Gjerësia maksimale (Shih pamjen e ekranit): 100%
ndarje
Hiqni gjithashtu të gjitha kufijtë e brendshëm të paracaktuar të sipërm dhe të poshtëm.
- Maja e marzhit të brendshëm: 0 px
- Marzhi i brendshëm i poshtëm: 0 px
Z-indeksi
Dhe për t'u siguruar që seksioni qëndron në krye të gjithçkaje përmbajtje Nga seksioni i heroit, do të duhet të rrisim indeksin z në cilësimet e dukshmërisë.
- Z-indeksi: 99999
Shto një rresht të ri
Struktura e kolonës
Pasi të keni përfunduar cilësimet e seksionit, mund të shtoni një rresht të ri duke përdorur strukturën e kolonës vijuese:
sizing
Pa shtuar asnjë modul, hapni cilësimet e rreshtit dhe ndryshoni cilësimet e madhësisë si më poshtë:
- Harmonizoni lartësitë e kolonave: Po
- Gjerësia maksimale: 100%
- Gjerësia maksimale: 100%
ndarje
Pastaj shtoni kufijtë e brendshëm të personalizuar (lart dhe poshtë).
- Marzhi i brendshëm i pikut: 2vw
- Marzhi i brendshëm i poshtëm: 0vw
Elementi kryesor
Më pas, shkoni te skedari "Avanced" dhe sigurohuni që kolonat të qëndrojnë pranë njëra-tjetrës në madhësi më të vogla të ekranit duke shtuar një rresht të vetëm të kodit CSS në elementin e rreshtit kryesor.
display: flex;
Kolona 2
Ngjyrë e sfondit
Vazhdoni duke hapur cilësimet e kolonës 2 dhe ndryshoni ngjyrën e sfondit në një ngjyrë gjysmë transparente.
- Ngjyra e sfondit: rgba (255,255,255,0.71)
kufi
Shtoni gjithashtu një kufi të poshtëm në kolonë.
- Gjerësia e kufirit të poshtëm: 2 px
- Ngjyra e butonit dhe kufirit të poshtëm: #f4583f
Kuti me hije
Dhe krijoni një efekt lundrues duke shtuar një hije delikate kutie.
- Shadow Box: [Shiko kapjen]
- Pozicioni fillestar: 20 px
- Forca e turbullimit të hijes së harkut: 50 px
- Forca e përhapjes së hijes së kutisë: -20 px
- Ngjyra e fontit të titrave: rgba(0,0,0,0.23)
Shtoni një modul imazhi në kolonën 1
Shkarko logon
Pasi të keni përfunduar cilësimet e rreshtit dhe kolonës, është koha për të shtuar modulet, duke filluar me një modul Image në kolonën 1. Ngarko një logo me një sfond transparent.
radhitje
Kaloni në skedën "Stili i modulit" dhe ndryshoni shtrirjen.
- Shtrirja e imazhit: në qendër
sizing
Ndryshoni gjithashtu gjerësinë e modulit në cilësimet e madhësisë.
- Gjerësia maksimale: 8 vw (desktop), 14 vw (tabletë), 21 vw (telefon)
Shto modulin e menysë në kolonën 2
Zgjidhni një Menu
Le të shkojmë në kolonën tjetër. Atje, i vetmi modul që na nevojitet është një modul Menu. Zgjidhni një menu sipas zgjedhjes suaj.
Hiq ngjyrën e sfondit
Pastaj shkoni te cilësimet e sfondit dhe hiqni ngjyrën e sfondit.
natyrë
Kaloni në skedën "Stili i modulit" dhe modifikoni paraqitjen.
- Stili: në qendër
- Menyja rënëse: poshtë
Teksti i menysë
Stiloni gjithashtu cilësimet e tekstit të menusë.
- Fonti i menysë: Mulish
- Ngjyra e tekstit të menysë: #6f6666
- Menyja e madhësisë së tekstit: 1vw (desktop), 2vw (tabletë), 3vw (telefon)
Menyja e lëshimit
Pastaj ndryshoni cilësimet nga menyja rënëse.
- Ngjyra e rreshtit zbritës: #f4583f
icons
Përdorni të njëjtën ngjyrë për ngjyrën e ikonës së menysë së hamburgerit në cilësimet e ikonës.
- Ngjyra e ikonës së menysë së Hamburgerit: #f4583f
ndarje
Plotësoni cilësimet e modulit duke shtuar mbushjen e sipërme dhe të poshtme në cilësimet e ndarjes.
- Marzhi i brendshëm i pikut: 1,5 vw
- Marzhi i brendshëm i poshtëm: 1,5 vw
Shtoni modulin Button në kolonën 3
Shtoni tekst në butonin
Le të kalojmë në kolonën tjetër dhe të fundit. Shtoni një modul Butoni me një tekst sipas zgjedhjes suaj.
radhitje
Pastaj ndryshoni shtrirjen e modulit.
- Shtrirja e butonave: në qendër
Cilësimet e butonit
Vazhdoni duke personalizuar butonin në përputhje me rrethanat:
- Përdorni stile të personalizuara për butonin: Po
- Madhësia e tekstit të butonit: 0,9 vw (desktop), 1,5 vw (tabletë), 2,5 vw (telefon)
- Ngjyra e tekstit të butonit: #ffffff
- Butoni i sfondit: #f4583f
- Gjerësia e kufirit të butonit: 0 piksel
- Ngjyra e kufirit të butonit: #f4583f
- Butoni Border Radius: 0 pixel
- Fonti i butonit: Mulish
- Butoni i dritës së zbehtë: Tekst i trashë
ndarje
Plotësoni cilësimet e modulit duke shtuar mbushje të personalizuara në madhësi të ndryshme të ekranit.
- Marzhi i brendshëm i sipërm dhe i poshtëm: 1vw (desktop), 2vw (tabletë), 3vw (telefon)
- Margjina e brendshme majtas dhe djathtas: 2vw (desktop), 3vw (tabletë), 4vw (telefon)
Parametrat shtesë të seksionit
Artikulli kryesor i parazgjedhur
Pasi të keni përfunduar personalizimin e përgjithshëm, ka edhe një gjë tjetër për të bërë; vendosni seksionin sipër përmbajtje e faqes tuaj. Për ta bërë këtë, do të duhet të shtojmë dy rreshta të kodit CSS në elementin kryesor të seksionit.
position: absolute;
top: 0;
Elementi kryesor në pezullim
Sigurohuni që të shtoni të njëjtat rreshta të CSS në opsionin e pezullimit të elementit kryesor. Kjo do të parandalojë dridhjen e seksionit sapo të rri pezull mbi të.
position: absolute;
top: 0;
Ruani ndryshimet e konstruktorit dhe shikoni rezultatin
Pasi të keni përfunduar seksionin, mund të ruani kokën globale dhe të shfaqni rezultatin në faqen tuaj!
studim
Tani që kemi kaluar nëpër të gjitha hapat, le t'i hedhim një vështrim të fundit rezultatit.
Shkarkoni DIVI Tani!!!
Përfundim
Kështu që ! Kaq për këtë artikull. Ne ju treguam se si të krijoni një shirit menuje lundrues dhe transparent me Divi's Theme Builder. Kreu vendoset sipër seksionit të parë të faqes ose postimit tuaj.
Për t'u njohur me Divi's Theme Builder, mund të lexoni gjithashtu artikullin tonë mbi Si të krijoni një titull global me Ndërtuesin e Temave të Divi
Ju gjithashtu mund të konsultoheni burimet tona, nëse keni nevojë për më shumë elemente për të realizuar projektet tuaja të krijimit të faqeve në Internet, duke u konsultuar 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.
...
