Dëshiron të krijosh një kokë globale anësore me Divi?
Në këtë tutorial, ne do t'ju tregojmë se si të krijoni një kokë të rrotulluar globale që shfaqet në anën e majtë të faqeve dhe postimeve tuaja. Ngjyra e sfondit të kokës është plotësisht transparente, duke e lejuar atë përmbajtje të faqes/postimit.
Ne u siguruam që koka globale të qëndrojë e fiksuar në anën e majtë gjatë lëvizjes dhe gjithashtu e bëmë menunë një version miqësor për celularin.
Në këtë tutorial, ne do t'ju tregojmë se si ta rikrijoni dizajnin nga e para!
Le të shkojnë.
studim
Përpara se të zhytemi në tutorial, le t'i hedhim një vështrim të shpejtë rezultatit që duam të arrijmë.
Shkoni te ndërtuesi i temave të Divi dhe filloni të krijoni një kokë globale
Nga pulti i WordPress, shkoni te Divi > Ndërtues i Temave
Kliko në "Shto titullin global"
zgjedh "Ndërtoni titullin global".
Filloni të krijoni kokën anësore globale
Shto një seksion të ri
Ngjyrë e sfondit
Pasi të jeni në redaktuesin e shabllonit, mund të hapni seksionin tashmë atje dhe të ndryshoni ngjyrën e sfondit në madhësi të ndryshme të ekranit.
- Ngjyra e sfondit: rgba(0,0,0,0) (Desktop), #FFFFFF (Tableti dhe telefoni)
sizing
Shkoni te skeda Projektimi, tërhiqni opsionin sizing dhe më pas ndryshoni parametrat e madhësisë së seksionit.
- Gjerësia: 5vw (Desktop), 100% (Tableti dhe telefoni)
- Lartësia minimale: 100 vw (Desktop), automatike (Tablet dhe telefon)
ndarje
Më pas tërhiqni opsionin Spacing dhe ndryshoni cilësimet si më poshtë:
- Mbushje (sipër dhe poshtë): 2vw
Kuti me hije
Pastaj shkoni tek Hija e Kutisë dhe shtoni hijen e kutisë së personalizuar në madhësi të ndryshme të ekranit.
- Pozicioni horizontal i hijes së kutisë: 32 px (desktop), 0 px (tableti dhe telefoni)
- Forca e turbullimit të hijes së kutisë: 49 px
- Forca e përhapjes: 0 px (Desktop), 19 px (Tableti dhe telefoni)
- Ngjyra e hijes: rgba (0,0,0,0.12)
Shtimi i CSS i personalizuar
Ne gjithashtu do të sigurohemi që titulli anësor global të qëndrojë i fiksuar në anën e majtë duke shtuar disa rreshta të kodit CSS në elementin e seksionit kryesor.
position: fixed;
top: 0;
display: flex;
flex-wrap: wrap;
align-content: center;
Duke qëndruar pezull mbi seksion
Sigurohuni që të shtoni edhe këto rreshta të kodit CSS në elementin kryesor kur rri pezull në seksion.
position: fixed;
top: 0;
Dukshmëria e parazgjedhur
Pastaj rrisni z-indeksin në parametrat e pozicionit.
- Z Indeksi: 99999
Dukshmëria e pezullimit
Sigurohuni që të zbatohet e njëjta vlerë kur qëndroni pezull.
- Z Indeksi: 99999
Shto një rresht të ri
Struktura e kolonës
Pasi të keni përfunduar cilësimet e seksionit, vazhdoni duke shtuar një rresht të ri duke përdorur strukturën e kolonës vijuese:
sizing
Pa shtuar ende asnjë modul, hapni cilësimet e linjës dhe ndryshoni cilësimet e madhësisë.
- Përdorni gjerësinë e ulluqit të personalizuar: PO
- Gjerësia e kanalit: 1
ndarje
Hiqni gjithashtu të gjitha kufijtë e paracaktuar.
- Mbushje (lart dhe poshtë): 0 px
Parametrat e kolonës
U shtua CSS e personalizuar (tableti dhe telefoni)
Në tablet dhe telefon, ne zgjedhim një ekran krejtësisht të ndryshëm. Ne do të vendosim tre module të ndryshme pranë njëri-tjetrit. Për ta bërë këtë, do të na duhet të shtojmë disa kode CSS.
Hapni cilësimet e kolonës, shkoni te skeda Avancuar dhe futni rreshtat e mëposhtëm të kodit CSS në hapësirë Elementi kryesor për tablet dhe telefon:
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
Shtoni një modul imazhi në kolonë
Shkarko logon
Është koha për të filluar shtimin e moduleve! Moduli i parë që na nevojitet është një modul Image. Ngarko një skedar imazhi të logos gjysmë transparente sipas zgjedhjes suaj.
sizing
Pastaj shkoni te skeda Projektimi dhe ndryshoni gjerësinë në madhësi të ndryshme të ekranit.
- Gjerësia: 4 vw (Desktop), 12 vw (Tablet), 16 vw (Telefon)
Shkalla e transformimit
Rritni madhësinë e modulit duke ndryshuar më pas cilësimet e shkallës së transformimit.
- Djathtas: 170% (Desktop), 100% (Tableti dhe telefoni)
- E ulët: 170% (desktop), 100% (tableti dhe telefoni)
"Përkthe Përkthe"
Dhe shtyjeni modulin në të djathtë duke modifikuar parametrat e mëposhtëm
- Fundi: 1vw (desktop), 0vw (tableti dhe telefoni)
Shtoni një modul meny në kolonë
Zgjidhni menunë për të shtuar
Moduli tjetër që na nevojitet është moduli i Menysë. Zgjidhni një menu sipas zgjedhjes suaj.
Hiq ngjyrën e sfondit
Pastaj hiqni ngjyrën e sfondit nga moduli.
natyrë
Pastaj shkoni te skeda Projektimi dhe ndryshoni cilësimet e paraqitjes.
- Stili: në qendër
- Drejtimi i menysë rënëse: poshtë
Cilësimet e tekstit të menysë
Ndryshoni gjithashtu cilësimet e tekstit të menysë.
- Ngjyra e lidhjes aktive: #cecece
- Fonti i menysë: Montserrat
- Pesha e shkronjave të menysë: Bold
- Ngjyra e tekstit: #000000
- Madhësia e tekstit të menysë: 0,9 vw (Desktop), 2 vw (Tablet), 2,5 vw (Telefon)
Teksti i menysë në lëvizje
Ndrysho ngjyrën e tekstit të menysë kur rri pezull.
- Ngjyra e tekstit të menysë: #afafaf
Menyja e lëshimit
Ne po bëjmë gjithashtu disa ndryshime në cilësimet e menusë rënëse.
- Ngjyra e linjës së menysë rënëse: #000000
- Ngjyra e tekstit të menysë rënëse: #000000
icons
Më pas ndryshoni ngjyrën e ikonës së menysë së hamburgerit.
- Ngjyra e ikonës së menysë së Hamburgerit: #000000
ndarje
Dhe shtoni vlera marzhi të personalizuara në madhësi të ndryshme të ekranit.
- Marzhi (lart dhe poshtë): 18 vw (desktop), 0 vw (tableti dhe telefoni)
- Margjina (majtas dhe djathtas): -13vw (desktop), 0vw (tableti dhe telefoni)
Transformimi i rrotullimit
Tani, për të krijuar efektin e rrotullimit, ne do të luajmë me vlerat e rrotullimit të transformimit të modulit.
- Majtas: 270 gradë (Desktop), 0 gradë (Tableti dhe telefoni)
Shtoni modulin "Ndjekja e mediave sociale" në kolonë
Shtoni rrjetet sociale
Le të kalojmë te moduli "Ndjekja e mediave sociale", i cili është moduli i radhës dhe i fundit që na nevojitet për të përfunduar kokën tonë të përqendruar globale. Shtoni disa rrjete sociale sipas zgjedhjes suaj.
Rivendosni stilet e ikonave të mediave sociale
Vazhdoni duke rivendosur cilësimet për secilin rrjet social individualisht. Kjo do të na ndihmojë të heqim qafe ngjyrën e tyre të sfondit.
radhitje
Pastaj kaloni në skedën Projektimi të modulit dhe ndryshoni shtrirjen e modulit në madhësi të ndryshme të ekranit.
- Moduli i shtrirjes: majtas (desktop), djathtas (tableti dhe telefoni)
Cilësimet e ikonës
Së fundi, ndryshoni edhe cilësimet e ikonës.
- Ngjyra e ikonës: #000000
- Përdorni madhësinë e ikonës së personalizuar: PO
- Madhësia e shkronjave të ikonës: 2,1 vw
Ruani ndryshimet e konstruktorit dhe shikoni rezultatin
Pasi të keni përfunduar të gjitha modulet, mund ta ruani modelin, të dilni nga ndërtuesi i themes e Divi dhe vizualizoni rezultatin në tuaj Site Web !
studim
Tani që kemi kaluar nëpër të gjitha hapat, le t'i hedhim një vështrim të fundit rezultatit.
zyrë
Shkarkoni DIVI tani!!!
Përfundim
Në këtë artikull, ne ju treguam se si të krijoni një kokë globale të rrotulluar. Nëse nuk zgjidhni ndryshe, titulli global që krijuam do të shfaqet në të gjitha postimet dhe faqet tuaja.
Nëse keni ndonjë shqetësim apo sugjerim, na gjeni në pjesa e komenteve për ta diskutuar atë.
Shih gjithashtu 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.
...
