Të kesh thirrje të qarta për veprim në faqet e tua është një domosdoshmëri për shumicën e faqeve të internetit. Dhe çfarë mënyre më të mirë për të tërhequr vëmendjen për disa nga CTA-të tuaja më të rëndësishme sesa duke i vendosur ato në kokën tuaj?
Në tutorialin e sotëm, ne do t'ju tregojmë se si të shtoni dy butona krah për krah në kokën tuaj globale duke përdorur Ndërtuesin e butonave. themes nga Divi. Njëri nga butonat është parësor, tjetri sekondar. Ju gjithashtu do të jeni në gjendje të shkarkoni falas skedarin e titullit global JSON!
studim
Para se të zhyteni në tutorial, le të hedhim një vështrim të shpejtë të rezultatit në madhësi të ndryshme të ekranit.
zyrë
1. Qasni Ndërtuesin e Temave të Divi dhe krijoni një kokë globale
Shkoni te Ndërtuesi i Temave Divi
Filloni duke shkuar te Divi Theme Builder dhe duke klikuar "Shto Kreun Global".
Krijoni një kokë globale
Vazhdoni duke klikuar në "Build Global Header".
2. Ndërtoni një dizajn të përgjithshëm të kokës
Shto një seksion të ri
ndarje
Sapo të hyni brenda redaktuesit të modelit, do të vini re një seksion. Hapni cilësimet e seksionit dhe hiqni të gjitha mbushjet e parazgjedhura të sipërme dhe të poshtme.
- Mbushja e sipërme: 0px
- Mbushja e poshtme: 0px
Indeksi Z
Gjithashtu sigurohuni që të rrisni indeksin z të seksionit në cilësimet e dukshmërisë. Kjo do të sigurojë që përmbajtje titulli global do të shfaqet në krye të të gjithë faqes dhe do të postojë përmbajtje.
- Indeksi Z: 99999
Shto një rresht të ri
Struktura e kolonës
Pasi të keni përfunduar cilësimet e seksionit, shtoni një rresht të ri në seksion duke përdorur strukturën e kolonës së mëposhtme:
sizing
Pa shtuar module, hapni parametrat e linjës dhe lëreni që linja të zërë tërë gjerësinë e enës së seksionit.
- Përdorni një gjerësi të ulluqeve me porosi: Po
- Gjerësia e zorrës së trashë: 1
- Barazoni lartësitë e kolonave: Po
- Gjerësia: 100%
- Gjerësia maksimale: 100%
ndarje
Ndryshoni gjithashtu vlerat e mbushjes majtas dhe djathtas të linjës.
- Mbushja e majtë: 2vw (tavolinë), 10vw (tablet dhe telefon)
- Mbushja e duhur: 2vw (tavolinë), 10vw (tablet dhe telefon)
Elementi kryesor
Për të përqendruar gjithçka përmbajtje kolona, ne do t'i shtojmë këto dy rreshta të kodit CSS në elementin kryesor të rreshtit.
display: flex;align-items: center;
Hiqni pronën e ekranit në desktop në tabletë dhe celular.
display: block;
Kolona 1
kufi
Vazhdoni duke hapur cilësimet në kolonën 1 dhe shtoni një kufi të duhur vetëm në desktop.
- Gjerësia e kufirit të djathtë: 1px (tavolinë), 0px (tablet dhe telefon)
- Ngjyra e drejtë e kufirit: # d8d8d8
Indeksi Z
Gjithashtu rrit indeksin z të kolonës.
- Indeksi Z: 11
Kolona 2
Elementi kryesor
Pastaj hapni cilësimet për kolonën 2 dhe shtoni linjat e mëposhtme të kodit CSS në elementin kryesor të kolonës për ta kthyer atë në dy kolona.
display: grid;grid-template-columns: 50% 50%;
Shtoni një modul menuje në kolonën 1
Zgjidhni menunë
Timeshtë koha të filloni të shtoni module! Shtoni një modul menuje në kolonën 1 dhe zgjidhni një menu sipas zgjedhjes suaj.
Shkarko logon
Pastaj ngarkoni një logo.
natyrë
Kaloni në skedën e dizajnit të modulit dhe sigurohuni që të zbatohen cilësimet e mëposhtme të paraqitjes:
- Stili: majtas i shtruar
- Drejtimi i menusë që lëshohet: poshtë
Teksti i menusë
Pastaj ndryshoni cilësimet e tekstit të menusë.
- Ngjyra e lidhjes aktive: # ef6f49
- Shkronja e menusë: Montserrat
- Pesha e fontit të menusë: Gjysmë e theksuar
- Stili i fontit të menusë:
- Ngjyra e tekstit të menusë: # 333333 (default), # ef6f49 (rri pezull)
- Madhësia e tekstit të menusë: 0.7vw (desktop), 1.8vw (tabletë), 2.5vw (telefon)
- Hapësira e shkronjave të menusë: 1px
Tekst menuja e lëshuar nga poshtë
Bëni gjithashtu ndryshime në cilësimet e tekstit në menunë rënëse.
- Ngjyra e sfondit të menusë zbritëse: #ffffff
- Ngjyra e rreshtit në menunë rënëse: # ef6f49
icons
Tjetra, ndryshoni ngjyrën e ikonës së menusë së hamburgerit.
- Ngjyra e ikonës së menusë Hamburger: # 000000
sizing
Shtoni gjithashtu një gjerësi maksimale të logos në parametrat e madhësisë.
- Gjerësia maksimale e logos: 9vw (tavolinë), 12vw (tabletë), 15vw (telefon)
Menuja CSS logo
Dhe plotësoni cilësimet e modulit duke shtuar një linjë të kodit CSS në logon e menusë në skedën e përparuar.
margin-right: 10vw;
Shtoni një modul kodi në kolonën 1
Shtoni një kod CSS me porosi në modul
Moduli tjetër dhe i fundit që na duhet në kolonën 1 është një modul kodi. Shtoni linjat e mëposhtme të kodit CSS për të personalizuar hapësirën midis artikujve të menusë:
<style>.et-menu>li {padding-left: 1.5vw !important;padding-right: 1.5vw !important;}</style>
Shtoni modulin e parë të butonit në kolonën 2
Shto një kopje
Le të kalojmë në modulin tjetër! Shtoni modulin e parë të butonit dhe futni një kopje të zgjedhjes suaj.
Shto një lidhje
Pastaj shtoni një lidhje në modulin e butonit.
radhitje
Kaloni në skedën e dizajnit të modulit dhe ndryshoni shtrirjen e butonit.
- Rreshtimi i butonave: E drejtë
Cilësimet e butonit
Gjithashtu stilo butonin.
- Përdorni stilet me porosi për butonin: Po
- Madhësia e tekstit të butonit: 0.8vw (desktop), 1.7vw (tablet), 2.5vw (telefon)
- Ngjyra e tekstit të butonit: # 000000
- Ngjyra e sfondit të butonit: # edeef0 (parazgjedhur), # d6d7d8 (rri pezull)
- Gjerësia e kufirit të butonit: 0px
- Rrezja kufitare e butonit: 0px
- Hapësira e shkronjave të butonave: 2px
- Shkronja e butonit: Montserrat
- Pesha e shkronjave të butonit: Gjysmë e theksuar
- Stili i shkronjave të butonit:
ndarje
Përfundoni cilësimet e modulit duke shtuar vlera të personalizuara të mbushjes në madhësi të ndryshme të ekranit.
- Mbushja e sipërme: 1vw (desktop), 2vw (tabletë), 3vw (telefon)
- Mbushja e poshtme: 1vw (tavolinë), 2vw (tabletë), 3vw (telefon)
- Mbushja e majtë: 2vw (desktop), 4vw (tabletë), 6vw (telefon)
- Mbushja e duhur: 2vw (tavolinë), 4vw (tabletë), 6vw (telefon)
Moduli i butonit klon
Pasi të keni përfunduar modulin e parë të butonit, klonojeni atë.
Ndrysho lidhjen
Hapni modulin e butonave të kopjuar dhe ndryshoni URL.
Ndryshimi i shtrirjes
Gjithashtu ndryshoni shtrirjen e modulit.
- Rreshtimi i butonit: majtas
Ndryshoni cilësimet e butonit
Bëni gjithashtu ndryshime në cilësimet e butonit.
- Ngjyra e tekstit të butonit: #ffffff
- Ngjyra e sfondit të butonit: # ef6f49 (parazgjedhur), # e06945 (rri pezull)
Shkalla e transformimit të rri pezull
Përfundoni cilësimet e butonit duke shtuar një efekt rri pezull në shkallë të transformimit.
- E drejta: 110%
- E ulët: 110%
3. Ruani ndryshimet në gjeneratorin e temës dhe rezultatin e pamjes paraprake
Pasi të përfundojë titulli juaj global, ruani të gjitha ndryshimet e bëra në ndërtuesin e temave dhe shikoni rezultatin në faqen tuaj Site Web!
studim
Tani që kemi kaluar të gjithë hapat, le të hedhim një vështrim përfundimtar se si duket në madhësi të ndryshme të ekranit.
Mendimet e fundit
Në këtë manual, ne ju kemi treguar se si të shtoni dy butona krah për krah në kokën tuaj të përgjithshme duke përdorur krijuesin e temave të Divi.
Një nga butonat që shtuam është primar, tjetri është dytësor. Shtimi i butonave në kokën tuaj të përgjithshme ju ndihmon të nënvizoni disa nga CTA-të më të rëndësishme në tuaj Site Web. Ju gjithashtu mund të shkarkoni skedarin JSON falas! Nëse keni ndonjë pyetje, mos ngurroni të lini një koment në seksionin e komenteve më poshtë.
