Dëshironi të dini se si të krijoni një seksion Hero me modulin Divi's Fullwidth Header?
Ndërtimi i një seksioni Hero është një mënyrë e shkëlqyer për të tërhequr vëmendjen te përmbajtje e rëndësishme për faqen tuaj. Kjo eshte nje përmbajtje madhësia e madhe që mund ta përdorni për të treguar historinë tuaj, për të ndarë informacione rreth punës suaj ose për të theksuar një produkt ose shërbim.
Me modulin Fullwidth Header të Divi, mund të shtoni një titull, nëntitull, dy butona, tekst të trupit, imazhin e logos dhe imazhin e kokës. Sigurisht, mund të përdorni gjithashtu opsionet e sfondit për të shtuar dhe kombinuar imazhe, gradientë, ngjyra, modele dhe maska.
Ju mund t'i ndryshoni të gjitha këto cilësime në cilësimet e modulit në vend që të kaloni midis moduleve të shumta të imazhit, tekstit dhe butonit.
Në këtë tutorial, ne do t'ju tregojmë se si të krijoni një seksion Hero tërheqës dhe tërheqës duke përdorur modulin e Divi's Fullwidth Header.
Shkojme !
studim
Këtu është një pamje paraprake e asaj që ne do të dizajnojmë.
Çfarë duhet të filloni
Para se të filloni, sigurohuni që të keni versionin më të fundit të Divi në tuaj Site Web.
Tani jeni gati për të filluar!
Si të krijoni një seksion heroik me modulin e titullit të plotë të gjerësisë së Divi
Lexo gjithashtu: Divi: Si të përdorni "Gradient Builder" për të zbukuruar imazhet tuaja
Krijoni një faqe të re me një plan urbanistik të paracaktuar
Le të fillojmë duke përdorur një plan urbanistik të paracaktuar nga biblioteka Divi. Për këtë dizajn ne do të përdorim faqen kryesore paketa e paraqitjes së veterinerit.
Nga paneli i Worpress, shtoni një faqe të re në faqen tuaj Site Web
Jepini një titull, më pas zgjidhni opsionin Përdorni Divi Builder.
Ne do të përdorim një plan urbanistik të paracaktuar nga biblioteka Divi për këtë shembull. Pra zgjidhni Shfletoni Layouts.
Gjeni dhe zgjidhni paraqitjen mbarështues qensh.
zgjedh Përdorni këtë paraqitje për të shtuar paraqitjen në faqen tuaj.
Tani jemi gati për të projektuar.
Shtoni modulin Fullwidth Header
Ne do të rikrijojmë seksionin e heroit duke përdorur modulin Fullwidth Header. Shtoni një seksion të ri me gjerësi të plotë në faqe, poshtë kokës ekzistuese.
Shtoni një modul Kreu me gjerësi të plotë në seksion.
Tjetra, fshini seksionin origjinal të kokës.
Personalizo modulin Fullwidth Header
Shto përmbajtje
Hapni cilësimet e modulit dhe shtoni përmbajtje pranë modulit:
- Titulli: Veteriner
- Nëntitulli: Divivet. Shërbejini miqtë tanë më të mirë
- Butoni #1: Të gjitha shërbimet
- Butoni #2: Lini një takim
- Trupi: Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla quis lorem ut libero malesuada feugiat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta.
Tjetra, shtoni një imazh të kokës.
Cilësimet e sfondit të gradientit
Shkoni te cilësimet e sfondit. Fshini ngjyrën origjinale të sfondit, më pas shtoni një gradient të sfondit.
- 0%: rgba(255,170,205,0.48)
- 40%: rgba(110,66,255,0.24)
- 87%: rgba (124,239,255,0.71)
- Lloji i gradientit: eliptik
- Pozicioni i gradientit: djathtas
Pastaj zgjidhni skedën Maska e sfondit dhe shtoni një maskë sfondi.
- Sfondi i maskës: Bllok qoshe
- Ngjyra e maskës: #FFFFFF
- Transformimi: vertikal
Personalizo tekstin
Kalo te skeda Projektimi dhe ndryshoni cilësimet e titullit
- Fonti i titullit: Nunito
- Pesha e shkronjave të titullit: Ultra e trashë
- Stili i shkronjave: TT (shkronja të mëdha)
- Ngjyra e tekstit të titullit: #a9cb6b
- Madhësia e tekstit: 14 px
- Hapësira e shkronjave të titullit: 2 px
Shkoni në seksionin e BodyText dhe personalizoni fontin.
- Ngjyra e tekstit: #000000
- Madhësia e tekstit të trupit:
- Desktop: 18px
- Telefoni: 14 px
- Lartësia e vijës së trupit: 1.8em
Shiko gjithashtu: Divi: Si të personalizoni ikonat e shportës dhe kërkimit të modulit "Menyja me gjerësi të plotë".
Më pas, hapni cilësimet e titrave dhe personalizoni fontin.
- Fonti i titrave: Nunito
- Pesha e shkronjave të titrave: Bold
- Ngjyra e tekstit: #000000
Së fundi, ndryshoni madhësinë e tekstit
- Madhësia e tekstit të titrave:
- Desktop: 56px
- E lëvizshme: 32 px
- Lartësia e linjës së titrave: 1.2em
Personalizo butonin #1
Më pas, ne do të personalizojmë stilet e butonave. Filloni duke aktivizuar stilet e personalizuara për butonin një, më pas rregulloni madhësinë e tekstit.
- Përdorni stile të personalizuara për butonin: PO
- Madhësia e tekstit në një buton: 14 px
Shtoni një gradient të sfondit në butonin. Vlerat e gradientit janë si më poshtë:
- 58%: #316EFF
- 100%: #1D2B60
- Drejtimi i gradientit: 90 gradë
Më pas, personalizoni cilësimet e kufirit dhe cilësimet e shkronjave.
- Butoni i parë:
- Gjerësia e kufirit: 0 px
- Rrezja e kufirit: 80 px
- Hapësira e shkronjave: 2 px
- Fonti: Nunito
- Pesha e shkronjave: Ultra Bold
- Stili: TT (me shkronjë të madhe)
- Ikona e Shfaqit të Butonit Një: JO
Më pas, personalizoni parametrat e diferencës dhe të mbushjes për dizajnin e desktopit dhe shtoni një hije kutie.
- Butoni Një Marzh
- Top: 200 px
- Fundi: 0px
- Mbushja e një butoni:
- Top: 16 px
- Pjesa e poshtme: 16 px
- Majtas: 2em
- Djathtas: 50 em
- Kutia e hijes: Shiko kapjen
Përdorni cilësimet e përgjegjshme për të vendosur vlera të ndryshme të marzhit dhe mbushjes në pajisjet celulare.
- Butoni One Margin-Top-Mobile: 25px
- Butoni Një Mbushje-Djathtas-Mobile: 10em
Personalizo butonin #2
Së pari, klikoni me të djathtën në butonin #1 dhe klikoni Stilet e një butoni të kopjimit.
Më pas, klikoni me të djathtën në butonin dy dhe ngjitni stilet nga butoni #1.
Tani mund të personalizojmë butonin dy. Ndryshoni ngjyrën e tekstit.
- Ngjyra e tekstit të butonit dy: #121F60
Personalizo gradientin e sfondit për butonin dy.
- 30%: rgba(0,229,198,0)
- 100%: #00e5c6
Përdorni cilësimet e përgjegjshme për të rregulluar gradientin e sfondit për pajisjet celulare.
- 0%: rgba(0,229,198,0)
- 100%: #00e5c6
Më pas, rregulloni kufirin dhe mbushjen për dizajnin e desktopit.
- Marzhi i butonit dy:
- Sipër: 0px
- Fundi: 0px
- majtas: 30%
- Mbushja e butonit dy:
- Top: 16 px
- Fundi: 16px
- Majtas: 48em
- Djathtas: 2 em
Përdorni cilësimet e responsifq për të vendosur vlera të ndryshme të marzhit dhe mbushjes për dizajnin celular.
- Butoni Dy Margin-Left-Mobile: 5%
- Mbushja e butonit dy:
- Majtas-Mobile: 35%
- Djathtas-Mobile: 5%
Custom CSS
Më në fund, pjesa më e madhe e punës së projektimit është kryer. Tani duhet të shtojmë CSS të personalizuar për të përfunduar dizajnin. Kalo te skeda Avancuar dhe hapni seksionin Custom CSS.
Së pari, le të fillojmë me CSS për imazhin e kokës. Kjo CSS lejon që imazhi i kokës të shfaqet sipër butonit.
z-index: 1;
position:relative;
Tjetra, CSS me porosi në titull. Ne do të vendosim vlera të ndryshme për pamjet e desktopit dhe celularit duke përdorur cilësimet reaguese.
Për kompjuterin desktop:
padding-top:50px;
padding-bottom:30px;
Për celularin:
padding-top:5px;
padding-bottom:10px;
Së fundi, shtoni CSS-në e mëposhtme në butonin një dhe butonin dy.
white-space: nowrap;
Rezultati përfundimtar
Këtu është dizajni përfundimtar për seksionin tonë të heroit të kokës me gjerësi të plotë.
Lexo gjithashtu: Divi: Si të krijoni një seksion të anëtarëve të ekipit si një karusel
Shkarkoni DIVI Tani!!!
Përfundim
Moduli Fullwidth Header ju lejon të krijoni me lehtësi një seksion të bukur Hero për të reklamuar shërbimet tuaja dhe për t'i treguar vizitorët per cfare e ke fjalen Site Web.
Cilësimet e integruara e bëjnë të lehtë personalizimin e çdo aspekti të kokës dhe është e gjitha në një vend, kështu që nuk ka nevojë të kaloni midis moduleve të shumta për të ndërtuar seksionin tuaj Hero.
Shpresojmë që ky tutorial t'ju frymëzojë për projektet tuaja të ardhshme Divi. Nëse keni ndonjë shqetësim apo sugjerim, na gjeni në pjesa e komenteve për ta diskutuar atë.
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.
...
