Dëshironi të krijoni një seksion Hero Divi me modulin Fullwidth Header apo ta dizajnoni vetë?
Ndërtoni një seksion heroik të Site Web nga e para ose përdorimi i modulit Divi Fullwidth Header janë dy mënyrat për të krijuar një dizajn tërheqës për veten tuaj Faqja e internetit.
Në këtë artikull, ne do të shikojmë të mirat dhe të këqijat e përdorimit të një moduli Fullwidth Header kundrejt krijimit të seksionit tuaj Hero me Divi.
Le të shkojmë!
Rëndësia e seksioneve të heroit të faqes në internet
Një seksion Hero është seksioni i parë që keni vizitorët shikoni kur ata mbërrijnë në tuaj Site Web. Ky është shpesh një banderolë me gjerësi të plotë dhe mund të quhet gjithashtu një titull Hero. Është një vend i spikatur në faqen tuaj të internetit sepse ka fuqinë të lërë një përshtypje të parë të qëndrueshme.
Lexo gjithashtu: Divi: Si të shfaqni modulin Fullwidth Header në ekran të plotë
Prandaj është e rëndësishme që ai të jetë i dizajnuar në mënyrë të tillë që të jetë i lehtë për t'u lexuar, ndërkohë që të jetë ende tërheqës dhe bindës. Seksionet e Heroit të Uebsajtit janë të rëndësishme sepse mund të tërheqin vëmendjen e klientëve të mundshëm, të përshkruajnë shpejt një faqe dhe të çojnë në angazhim shtesë dhe drejtime të mundshme. Seksionet e heroit duhet të jenë të markës, të përfshijnë një titull H1 dhe CTA.
Krijo një seksion Hero nga e para
Dizajnimi i një seksioni Hero nga e para ju lejon të keni kontroll të plotë mbi dizajnin dhe përmbajtje. Në varësi të situatës dhe nevojave tuaja, kjo mund të jetë një zgjidhje e shkëlqyer për faqen tuaj të internetit.
Le të hedhim një vështrim në të mirat dhe të këqijat e kësaj qasjeje.
Përfitimet e kësaj qasjeje
Së pari, le të shohim përfitimet e ndërtimit të një seksioni Hero të faqes në internet nga e para duke përdorur Divi.
- Kontroll i plotë i dizajnit
- Përdorni çdo modul Divi
Disavantazhet e kësaj qasjeje
Tani le të shohim anët negative të krijimit të një seksioni heroik nga e para.
- Ju duhet të ndërtoni nga e para
- Kërkon moda të shumta
Krijoni një seksion Hero me modulin Divi Fullwidth Header
Krijimi i një seksioni heroik duke përdorur modulin Divi Fullwidth Header e bën të lehtë krijimin e një dizajni tërheqës dhe të përgjegjshëm për celularin në vetëm disa minuta.
Le të hedhim një vështrim në të mirat dhe të këqijat e kësaj qasjeje.
Përfitimet e kësaj qasjeje
Le të hedhim një vështrim në përfitimet e ndërtimit të një seksioni Hero me modulin Divi Fullwidth Header.
- Të gjitha tuajat përmbajtje është në një modul të vetëm
- Dizajni tashmë është optimizuar
Disavantazhet e kësaj qasjeje
Tani le të vlerësojmë disavantazhet e dizajnimit të një seksioni Hero me modulin Divi Fullwidth Header.
- Më pak fleksibilitet me dizajn
Moduli Divi Fullwidth Header vjen me opsione për përmbajtje të paracaktuara, ndërsa shumë mund të kufizohen nëse po kërkoni të shtoni një pjesë të përmbajtjes që nuk është e disponueshme në modul. Kjo do të thotë se do të keni më pak fleksibilitet me dizajnin e përgjithshëm.
Ndërtimi i dy seksioneve Hero hap pas hapi
Tani që i kuptoni të mirat dhe të këqijat e të dyja qasjeve, le të ndërtojmë çdo seksion Hero në mënyrë që të shihni saktësisht se si funksionon secila qasje.
Krijo një faqe të re me Divi Builder
Për të filluar, do t'ju duhet të bëni sa më poshtë:
- Instaloni Divi në uebfaqen tuaj të WordPress.
- Shtoni një faqe dhe jepini një titull.
- Aktivizo ndërtuesin vizual
Krijoni seksionin tuaj Hero nga e para
Tani që faqja jonë është ngritur, le të fillojmë të krijojmë një seksion heronj nga e para.
Shkarkoni DIVI tani!!!
Aktivizo "Divi Builder"
Për të përdorur ndërtuesin e tërheqjes dhe lëshimit të Divi, do të na duhet të aktivizojmë Visual Builder duke klikuar në butonin "Përdor DiviBuilder". Kjo do të rifreskojë faqen duke përdorur Divi Visual Builder.
Zgjidh: Ndërto nga e para
Tani që faqja juaj është ringarkuar me ndërtuesin vizual të aktivizuar, klikoni në opsionet " NDËRTOHET NGA HERJA në mënyrë që të kemi një faqe të zbrazët për të punuar me të gjatë dizajnimit.
Shtoni rreshtin dhe konfiguroni kolonat
Krijoni një rresht me strukturën e kolonës së mëposhtme.
Shtoni modalitete
Tani le të shtojmë modulet e përmbajtjes që do të na duhen.
- 2 Modulet e tekstit, ndarës, një buton në kolonën e majtë
- 1 Moduli i imazhit në kolonën e mesme
- 1 Moduli i imazhit në kolonën e djathtë
Seksioni i stilit
Tani le të konfigurojmë cilësimet e seksionit.
Shtoni një seksion, më pas konfiguroni cilësimet e mëposhtme:
- Sfondi: #1d1d25
Stili i tekstit të kokës
Personalizo tekstin e kokës:
- Kreu 1:
- Pesha e shkronjave: Gjysmë e trashë
- Ngjyra e tekstit: #ffffff
- Madhësia e tekstit: 90 px
- Lartësia e linjës: 1,1 em
separator
Konfiguro cilësimet e ndarësit:
- Ngjyra e linjës: rgba (255,255,255,0.3)
- Pesha e ndarësit: 10 px
- Gjerësia maksimale: 260 piksele
teksti i trupit
Personalizo tekstin e trupit:
- Ngjyra e tekstit: rgba (255,255,255,0.7)
- Madhësia e tekstit: 13 px
- Lartësia e linjës: 1,8 em
buton
Tani le të personalizojmë butonin.
Në skedën "Buton":
- Përdorni stilet e personalizuara për butonin: Po
- Madhësia e tekstit të butonit: 14 px
- Ngjyra e tekstit: #ffffff
- Sfondi i butonit:
- Gjerësia e kufirit: 0 piksele
- Rrezja kufitare: 0 piksele
Në skedën Hapësirë:
- Sipër dhe poshtë: 40px
- Majtas dhe djathtas: 20 px
Shto imazhe
Shtoni imazhet në modulet e imazhit.
Rregulloni cilësimet e linjës
Parametrat në linjë:
- Margjina (majtas): 15vw
Rregulloni kolonën e 2-të
Në kolonën e dytë, konfiguroni këto cilësime:
Custom CSS
Ngjitni kodin e mëposhtëm në seksionin e kodit të elementit kryesor:
argin-right: -15vw!important;
z-index: 100!important;ndarje
Shtoni 100 piksele të mbushjes së sipërme.
Kështu që ! Tani keni një seksion të personalizuar të Heroit të dizajnuar plotësisht.
Shkarkoni DIVI tani!!!
Krijoni seksionin tuaj Hero me modulin Divi's Fullwidth Header
Tani le të shohim se si ta rikrijojmë këtë seksion Hero duke përdorur modulin Fullwidth Header të Divi.
Shkarkoni DIVI tani!!!
Shtoni një faqe dhe zgjidhni Ndërtoni nga e para
Shtoni një faqe të re, jepini një titull, më pas klikoni në "Përdor Divi Builder" më pas zgjidhni Build From Scratch.
Futni një seksion me gjerësi të plotë dhe një kokë me gjerësi të plotë
Vendos pjesën Gjerësia e plotë, pastaj zgjidhni Kreu me gjerësi të plotë në bibliotekën e modulit.
Përmbajtje
Shtoni përmbajtjen tekstuale në modul në skedën Tekst.
Images
Shtoni imazhet në skedën e imazhit.
Ndrysho ngjyrën e sfondit
Në skedën e sfondit, konfiguroni cilësimin e mëposhtëm:
- Sfondi: #1D1D25
Teksti i kokës
Konfiguro cilësimet e tekstit të kokës:
- Pesha e shkronjave të titullit: Bold
- Madhësia e tekstit: 90 px
teksti i trupit
Konfiguro cilësimet e tekstit të trupit:
- Ngjyra e tekstit të trupit: rgba (255,255,255,0.55)
Teksti i titrave
Konfiguro cilësimet e tekstit të titullit:
- Pesha e shkronjave të titrave: Bold
- Ngjyra e tekstit: #4C594C
- Hapësira e shkronjave: 3 px
buttons
Tani le të personalizojmë dy butonat.
butoni një
Në skedën Button One, konfiguroni cilësimet e mëposhtme:
- Përdorni stile të personalizuara për butonin e parë: Po
- Butoni Një
- Sfondi: #4c594c
- Gjerësia e kufirit: 0 piksele
- Rrezja e kufirit: 0 px
- Shfaq ikonën: PO
- Shfaq vetëm ikonën në lëvizje: Jo
- Mbushje: 25 piksel (lart dhe poshtë); 25 px (majtas), 50 px (djathtas)
Butoni i dytë
Në skedën Button Two, konfiguroni cilësimet e mëposhtme:
- Përdorni stile të personalizuara për butonin e dytë: PO
- Gjerësia e kufirit me dy buton: 0 piksele
- Rrezja e kufirit: 0 px
- Mbushja: 25 px (sipër, poshtë, majtas dhe djathtas)
- Hije e kutisë së butonit: Zgjidhni të katërtën
- Pozicioni horizontal i hijes së kutisë: 0 px
- Pozicioni vertikal i hijes së kutisë: 2 px
- Ngjyra e hijes: #ffffff
Kështu që ! Tani keni një seksion Hero të dizajnuar plotësisht duke përdorur modulin Divi Fullwidth Header.
Shiko gjithashtu: Divi: Si të krijoni kalime në sfond midis elementeve
Shkarkoni DIVI tani!!!
Përfundim
Ndërtimi i një seksioni Hero me Divi është i lehtë, pavarësisht nëse jeni duke ndërtuar nga e para ose duke përdorur modulin Fullwidth Header. Të dyja opsionet ju lejojnë të krijoni modele mahnitëse të kokës që tërheqin interesin tuaj vizitorët.
Në varësi të nevojave tuaja unike, secili opsion është një opsion i shkëlqyeshëm për t'u marrë parasysh kur stiloni seksionin tuaj Hero.
Pasi të keni lexuar të mirat dhe të këqijat e të dyjave, si do ta dizajnonit 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ë elementë për të realizuar projektet tuaja të krijimit të faqeve të Internetit.
Mos hezitoni të konsultoheni edhe 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.
...
