Dëshironi të krijoni një kokë të bukur transparente dhe ngjitëse me Divi?
Kur bëhet fjalë për vendosjen e një titulli global për tuajin Site Web, ka shumë mënyra për t'iu qasur. Një nga qasjet më delikate është një kokë transparente.
Nëse vendosni të përdorni një kokë transparente, por keni nevojë që të jetë ngjitëse kur lëvizni, do t'ju pëlqejë ky udhëzues. Kalimi midis transparent dhe ngjitës është i lehtë!
Le të shkojnë.
studim
Përpara se të zhytemi në tutorial, le t'i hedhim një vështrim të shpejtë rezultatit.
Krijo një shabllon të ri të kokës globale
Shkoni te Divi > Ndërtuesi i Temave.
Seksioni #1 Cilësimet
Ngjyrë e sfondit
Pasi të jeni në redaktuesin e shabllonit, do të vini re një seksion. Ky seksion do t'i kushtohet shiritit të titullit të sipërm, të cilin mund ta vëreni në pamjen paraprake të këtij artikulli. Hapni cilësimet e seksionit dhe shtoni një ngjyrë të zezë të sfondit.
- Sfondi: #000000
ndarje
Kaloni në skedën "Stili i seksionit" dhe hiqni të gjitha kufijtë e brendshëm (lart dhe poshtë) si parazgjedhje.
- Maja e marzhit të brendshëm: 0 px
- Marzhi i brendshëm i poshtëm: 0 px
Shto një rresht të ri
Struktura e kolonës
Vazhdoni duke shtuar një rresht të ri duke përdorur strukturën e mëposhtme të kolonës:
Shtoni një modul teksti në kolonë
Shtoni një modul teksti në kolonën e rreshtit dhe futni një mesazh sipas zgjedhjes suaj.
Cilësimet e tekstit
Kaloni në skedën "Stili i modulit" dhe ndryshoni cilësimet e tekstit në përputhje me rrethanat:
- Fonti i tekstit: Oswald
- Stili i kopjimit të tekstit: TT
- Ngjyra e tekstit Teksti: #ffffff
- Madhësia e tekstit:
- Desktop: 19 px
- Tableti: 18 px
- Telefoni: 16 px
- Rreshtimi i tekstit: në qendër
Shtoni seksionin # 2
ndarje
Vetëm poshtë seksionit të parë, shtoni një seksion tjetër të rregullt. Ky seksion do t'i kushtohet menysë sonë transparente, e cila do të ngjitet gjatë lëvizjes.
Hapni cilësimet e seksionit dhe hiqni të gjitha kufijtë e brendshëm (lart dhe poshtë) si parazgjedhje në skedën Stil.
- Maja e marzhit të brendshëm: 0 px
- Marzhi i brendshëm i poshtëm: 0 px
Shto një rresht të ri
Struktura e kolonës
Vazhdoni duke shtuar një rresht të ri duke përdorur strukturën e mëposhtme të kolonës:
Ngjyra transparente e sfondit
Hapni cilësimet e linjës dhe aplikoni një ngjyrë krejtësisht transparente të sfondit në linjë.
- Sfondi: rgba (255,255,255,0)
sizing
Kalo te skeda Line Style dhe ndrysho cilësimet e madhësisë.
- Përdorni gjerësinë e personalizuar të ulluqit: Po
- Hapësira e kolonave: 1
- Gjerësia maksimale: 100%
- Gjerësia maksimale: 100%
ndarje
Pastaj shtoni kufijtë e brendshëm të personalizuar (Majtas dhe Djathtas).
- Marzhi i brendshëm i majtë: 10%
- Ligji i marzhit të brendshëm: 10%
Kuti me hije
Tjetra, aplikoni një hije transparente kuti. Më vonë në tutorial do ta përdorim këtë hije kutie në një gjendje ngjitëse me një ngjyrë të ndryshme hije.
- Forca e turbullimit të hijes së kutisë: 50 px
- Ngjyra e shkronjave të titrave: rgba (0,0,0,0)
pozitë
Për t'u siguruar që vija të shfaqet në krye të përmbajtje të faqes, me një sfond transparent, ne do të përdorim një pozicion absolut për rreshtin tonë në skedën e avancuar.
- Pozicioni: Absolut
- Vendndodhja: majtas lart
Kolona 2 Dukshmëria
Ne gjithashtu fshehim kolonën e dytë të rreshtit tonë në tablet dhe telefon për të pasur një dizajn më pak kompleks të kokës në madhësi më të vogla të ekranit.
Shto modulin e menysë në kolonën 1
Zgjidhni një Menu
Tani që cilësimet tona të rreshtit janë vendosur, është koha për të shtuar module, duke filluar me një modul Meny në kolonën 1. Zgjidhni menunë e zgjedhjes suaj.
Shkarko logon
Pastaj ngarkoni një logo.
Hiq ngjyrën e sfondit
Hiqni gjithashtu ngjyrën e sfondit nga moduli.
Cilësimet e tekstit të menysë
Kaloni në skedën "Stili i modulit" dhe ndryshoni cilësimet e tekstit të menusë në përputhje me rrethanat:
- Menuja e shkronjave: Oswald
- Menyja e dritës së butë: Bold
- Menyja e stilit të kopjimit: TT
- Ngjyra e tekstit të menysë: #efefef
- Madhësia e tekstit të menysë: 18 px
- Rreshtimi i tekstit: djathtas
Cilësimet e menusë zbritëse
Ndryshoni gjithashtu cilësimet e menusë rënëse.
- Ngjyra e rreshtit me zbritje: rgba (0,0,0,0)
- Menyja celulare Ngjyra e sfondit: rgba (0,0,0,0,95)
Cilësimet e ikonës
Më pas, ndryshoni ngjyrat e ikonave në cilësimet e ikonave.
- Ngjyra e ikonës së karrocës: #ffffff
- Ngjyra e ikonës së kërkimit: #ffffff
- Ngjyra e ikonës së menysë së Hamburgerit: #ffffff
Cilësimet e logos
Ne gjithashtu ndryshojmë ngjyrën e logos sonë në cilësimet e logos duke ndryshuar filtrin e përmbysjes së imazhit.
- Përmbysja e imazhit: 90%
sizing
Më pas, ne do t'i caktojmë një lartësi maksimale logos sonë.
- Gjerësia maksimale e logos: 40 piksele
ndarje
Më pas, ne do të shtojmë mbushjen e sipërme dhe të poshtme në madhësitë e ekranit të vogël.
- Marzhi i brendshëm i pikut:
- Tableti dhe telefoni: 10 px
- Marzhi i brendshëm i poshtëm:
- Tableti dhe telefoni: 10 px
Shtoni modulin Button në kolonën 2
Shto tekst te Butoni
Në kolonën 2, i vetmi modul që na nevojitet është moduli Button. Shtoni një tekst sipas zgjedhjes suaj.
Rreshtimi i butonit
Kaloni në skedën "Stili i modulit" dhe ndryshoni shtrirjen e butonit.
- Shtrirja e butonave: djathtas
Cilësimet e butonit
Personalizojeni butonin tjetër.
- Përdorni stile të personalizuara për butonin: Po
- Madhësia e tekstit të butonit: 16 px
- Ngjyra e tekstit të butonit: #ffffff
- Butoni i sfondit: #ed4441
- Ngjyra e kufirit të butonit: #ed4441
- Butoni Border Radius: 0 pixel
- Hapësira e shkronjave të butonave: 4 px
- Fonti i butonit: Oswald
- Butoni i lehtë i dritës: Tekst i trashë
- Butoni i stilit të kopjimit: TT
- Ikona e butonit të shfaqjes: Po
- Ngjyra e ikonës së butonit: #1a1a1a
ndarje
Dhe plotësoni cilësimet e modulit duke shtuar vlerat e ndarjes me porosi.
- Marzhi i sipërm: -70 px
- Marzhi i brendshëm i sipërm dhe i poshtëm: 25 px
Aplikoni efekte ngjitëse të personalizuara
Bëni seksionin numër 2 ngjitës
Tani që kemi hedhur themelet për kokën tonë, është koha për të aplikuar efektin ngjitës! Për ta bërë këtë, filloni duke hapur cilësimet në seksionin e dytë dhe aplikoni cilësimet e mëposhtme ngjitëse në skedën e avancuar:
- Pozicioni ngjitës: Ngjit në krye
- Stick Top Offset: 0px
- Bottom Sticky Mimit: Asnjë
- Kompensimi nga elementët ngjitës përreth: PO
- Stilet e parazgjedhura dhe ngjitëse të tranzicionit: PO
Ngjitni ngjyrën e sfondit të vijës
Tani që opsioni ngjitës është aktivizuar, ne mund të bëjmë ndryshime të opsionit ngjitës në të gjithë elementët në seksion. Do të fillojmë duke hapur rreshtin që përmban menunë tonë dhe duke aplikuar një ngjyrë të bardhë sfondi në opsionin ngjitës.
- Ngjyra e sfondit: #FFFFFF
Hapësira ngjitëse e rreshtave
Më pas, ne do të modifikojmë vlerat e ndarjes së funksionit ngjitës të linjës.
- Maja e marzhit të brendshëm: 0 px
- Marzhi i brendshëm i poshtëm: 0 px
Kutia e hijes së rreshtit ngjitës
Ne gjithashtu po ndryshojmë ngjyrën e hijes së kutisë në një gjendje ngjitëse.
- Ngjyra e shkronjave të titrave: rgba (0,0,0,0.08)
Pozicionimi i linjës ngjitëse
Më pas, ne do të kthejmë pozicionimin e rreshtit në një gjendje ngjitëse.
- Pozicioni: I afërm
- Origjina e ofsetit: lart majtas
Cilësimet e tekstit të menusë së gjendjes ngjitëse
Më pas, ne do të ndryshojmë ngjyrën e tekstit të menusë në gjendjen ngjitëse.
- Ngjyra e tekstit të menysë: #000000
Cilësimet rënëse të menusë në gjendje ngjitëse
Me ngjyrën e sfondit të menysë celulare në cilësimet e menusë rënëse.
- Menyja celulare, ngjyra e sfondit: #ffffff
Ngjyrat e ikonave të menysë në gjendje ngjitëse
Ndryshoni gjithashtu ngjyrat e ikonave në një gjendje ngjitëse.
- Ngjyra e ikonës së karrocës: #000000
- Ngjyra e ikonës së kërkimit: #000000
- Ngjyra e ikonës së menysë së Hamburgerit: #000000
Filtri i logos në gjendje ngjitëse
Më pas, hiqni filtrin e përmbysur nga imazhi i logos në një gjendje ngjitëse.
- Përmbysja e imazhit: 0%
Hapësira e butonave në gjendje ngjitëse
Dhe përfundoni tutorialin duke hequr margjinën negative të sipërme nga butoni kur është në gjendje ngjitëse.
- Marzhi i sipërm: 0 px
studim
Tani që kemi kaluar nëpër të gjitha hapat, le t'i hedhim një vështrim të fundit rezultatit përfundimtar.
Shkarkoni DIVI Tani!!!
Përfundim
Në këtë artikull, ne ju treguam se si të kombinoni konstruktorin e themes e Divi me opsionet e reja ngjitëse. Në mënyrë të veçantë, ne ju treguam se si të kaloni nga një kokë transparente në një kokë ngjitëse me stil të ndryshëm gjatë lëvizjes.
Kjo qasje ju lejon të bashkoni dizajnin e faqes tuaj me menynë tuaj duke ruajtur ende një kokë të bukur ngjitëse kur lëvizni.
Nëse dëshironi të dini më shumë rreth Divi, mos hezitoni të vizitoni katalogun tonë të Divi tutorial. Ju gjithashtu mund të konsultoheni Si të krijoni faqen e Blog me modulin Divi Blog
Nëse keni ndonjë pyetje ose sugjerim, mos ngurroni të lini një koment në seksionin e komenteve më poshtë.
Sidoqoftë, gjithashtu mund të këshilloheni burimet tona, nëse keni nevojë për më shumë elementë 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 ndërkohë, ndajeni këtë artikull në rrjetet tuaja të ndryshme sociale.
...
