Dëshironi të personalizoni modulin e Divi's Fullwidth Header duke balancuar butonat parësor dhe dytësor?
Moduli Divi Header Fullwidth e bën të lehtë shtimin e seksioneve të bukura të Heroit në tuajin Site Web. Moduli vjen me dy butona, tekstin e titullit, tekstin e titrave, tekstin e trupit, logon dhe imazhin që i bën opsionet e personalizimit të pafundme.
Në artikullin e sotëm, ne do t'ju tregojmë se si të rikrijoni Seksionet e Heroit duke përdorur Kreu Divi Fullwidth. Ne do të fillojmë dizajnin tonë duke përdorur 3 paketat e paraqitjes së përgatitur paraprakisht dhe do të dizajnojmë seksionet tona me fokus në balancën e butonit parësor dhe dytësor.
Ne duam që butoni kryesor të dalë në pah sepse është thirrja jonë kryesore për veprim duke e mbajtur butonin dytësor të dukshëm dhe të aksesueshëm pa e kapërcyer butonin kryesor.
Parimet e projektimit të butonave parësor dhe dytësor
Butonat kryesorë dhe butonat dytësorë ndihmojnë në udhëzimin vizitorët juaj Site Web ndaj aksioneve të caktuara. Butonat kryesorë janë zakonisht veprimi më i zakonshëm ose i dëshiruar dhe butonat dytësorë janë një veprim më pak i zakonshëm. Kjo ndihmon në drejtimin e vizitorët atje ku duan të shkojnë.
Për ta bërë këtë, butonat kryesorë duhet të dalin vizualisht dhe butonat dytësorë nuk duhet të dalin aq shumë. Kjo do të thotë që butonat kryesorë duhet të jenë më të dallueshëm dhe të kenë më shumë peshë vizuale në mënyrë që të tërheqin më shumë vëmendje.
Tani që kuptojmë se si funksionojnë butonat kryesorë dhe dytësorë, le të kalojmë te tutoriali!
studim
Ja një vështrim në tre titujt me gjerësi të plotë që do të dizajnojmë sot.
Le të fillojmë duke krijuar një faqe të re me Divi Builder
Nga pulti i WordPress, shkoni te Faqet> Shto të Reja për të krijuar një faqe të re.
Jepini një titull që ka kuptim për ju dhe klikoni Përdorni Divi Builder
Pastaj kliko Filloni të ndërtoni (Ndërtoni nga Gërvishtja)
Pas kësaj, ju do të keni një kanavacë të zbrazët për të filluar projektimin në Divi.
Lexo gjithashtu: Divi: Si të përdorni maskat dhe modelet e sfondit për një seksion heronj
Dizajni i shembullit të parë
Tani që faqja jonë është konfiguruar, le të fillojmë me kokën me gjerësi të plotë të një faqeje uljeje UX.
Konfigurimi i faqes sonë
Përpara se të fillojmë personalizimin, do të na duhet të ngarkojmë paketën e paracaktuar të paraqitjes UX nga biblioteka Divi. Kur aktivizoni Visual Builder, do të shihni tre opsione që shfaqen, zgjidhni Shfletoni Layouts.
Ngarko paketën e paraqitjes
Për të ngarkuar paketën e paraqitjes UX në faqen tuaj:
- Në skedë "Paraqitje paraprake", përdorni funksionin e kërkimit për të gjetur paketën e paraqitjes UX.
- Pasi ta gjeni, klikoni mbi të. Kjo do të sjellë detajet e paraqitjes dhe faqet e disponueshme.
- Kliko në Ulje, pastaj kliko "Përdorni këtë paraqitje".
Ne do të rikrijojmë pjesën e sipërme të paraqitjes si një modul Kreu me gjerësi të plotë.
Fshi seksionin e parë
Meqenëse do të rikrijojmë seksionin e parë duke përdorur modulin Fullwidth Header në vend të kësaj, do të na duhet ta fshijmë këtë seksion. Zhvendosni pezull mbi seksion dhe klikoni ikonën e koshit.
Shtoni një seksion me gjerësi të plotë
Përpara se të shtojmë kokën me gjerësi të plotë, duhet të shtojmë një seksion me gjerësi të plotë.
Klikoni shigjetën "+" për të shfaqur seksionet Divi pastaj klikoni mbi "Gjerësia e plotë". Kjo do të sjellë automatikisht bibliotekën e modulit Divi Fullwidth.
Shtoni një kokë me gjerësi të plotë
Në bibliotekën e modulit Divi Fullwidth, klikoni në " Kreu me gjerësi të plotë".
Shto përmbajtje
Para se të fillojmë të personalizojmë modulin, le ta shtojmë atë përmbajtje kërkohet për këtë modul.
Shtoni përmbajtje tekstuale
Nën skedën Tekst, shtoni përmbajtje tjetër:
- Titulli: Përmirësoni njohuritë tuaja të dizajnit UX
- Nëntitulli: UX Design Course
- Butoni #1: Përmbledhje e kursit
- Butoni #2: Mësoni më shumë
- Trupi: i paracaktuar
Shto imazhe
Tani që kemi tonën përmbajtje teksti në vend, ne duhet të shtojmë dy imazhe në dizajnin tonë.
- Në skedë Images, shtoni imazhin e logos (yjet) dhe imazhin e kokës (foto e personit që mban një telefon).
Ndrysho ngjyrën e sfondit
Në skedë Sfond, konfiguroni këtë parametër:
- Ngjyra e sfondit: #131517
Personalizo kokën me gjerësi të plotë
Tani që përmbajtja jonë është konfiguruar, le t'i shtojmë disa stilime asaj nëpërmjet Projektimi.
Ikona e lëvizjes poshtë
Le të shtojmë ikonën e lëvizjes poshtë, shigjetën poshtë.
- Shfaq butonin e lëvizjes poshtë: PO.
- Zgjidhni ikonën e shigjetës poshtë.
- Lëvizni poshtë Ngjyra e ikonës: #000
Imazh
Le të shtojmë kthesa në imazhet tona duke rrumbullakosur qoshet.
Në skedë Imazh, konfiguroni cilësimet e mëposhtme:
- Kënde të rrumbullakosura të imazhit : Klikoni butonin e lidhjes së zinxhirit për të shkëputur qoshet, më pas shkruani 1000px në kutitë e hyrjes poshtë majtas dhe poshtë djathtas. Kjo do të rrumbullakos këndin e poshtëm të majtë dhe të poshtëm të djathtë të imazheve tona.
Teksti i titullit
Këtu, le të personalizojmë tekstin e titullit të këtij moduli. Në skedën Teksti i titullit, konfiguroni këto cilësime:
- Titulli:
- Fonti: PT Sans
- Pesha e shkronjave: Bold
- Madhësia e tekstit: 5 rem
- Lartësia e linjës: 1,2 em
Trupi i tekstit
Këtu ne personalizojmë tekstin e trupit për këtë modul. Në skedën BodyText, konfiguroni këto cilësime:
- Fonti i trupit: Mukta
- Madhësia e tekstit në trup: 18 px
Teksti i titrave
Këtu ne personalizojmë tekstin e titullit për këtë modul. Në skedën Teksti i nëntitullit, konfiguroni këto cilësime:
- Titrat:
- Fonti: Mukta
- Pesha e shkronjave: Bold
- Stili: shkronja të mëdha
- Ngjyra e tekstit: #13d678
- Hapësira e shkronjave: 3 px
butoni një
Këtu mund të përcaktojmë stilet e personalizuara për butonin një: butonin kryesor. Në skedën Butoni Një, konfiguroni këto cilësime:
- Përdorni stilin e personalizuar për butonin e parë: PO
- Butoni i parë:
- Ngjyra e tekstit: #ffffff
- Ngjyra e sfondit: #13d678
- Gjerësia e kufirit: 0 piksele
- Rrezja e kufirit: 100 px
- Fonti: Mukta
- Pesha e shkronjave: Bold
- Ikona e Shfaqit të Butonit Një: PO
- Ikona: Shigjeta djathtas
- Shfaq vetëm ikonën në lëvizje për butonin Një: Jo
Butoni i dytë
Tani, le të personalizojmë të dytën: butonin dytësor. Në skedën Butoni i dytë, konfiguroni këto cilësime:
- Përdorni stilin e personalizuar për butonin: PO
- Butoni i dytë
- Ngjyra e tekstit: #ffffff
- Ngjyra e sfondit: #303030
- Gjerësia e kufirit: 0 piksele
- Rrezja e kufirit: 100 piksele
- Fonti: Mukta
- Pesha e shkronjave: Bold
- Ikona e shfaqjes së butonit dy: Po
- Ikona e butonit dy: Shigjeta djathtas
- Shfaq vetëm ikonën në butonin e dytë : PO
Shtoni lidhjet e butonave
Mos harroni të shtoni lidhje në butonat tuaj! Në skedën lidhje, konfiguroni cilësimet e mëposhtme:
- Butoni numër 1 URL-ja e lidhjes: Ngjitni URL-në e butonit 1 këtu.
- Butoni numër 1 URL-ja e lidhjes: Ngjitni URL-në e butonit 2 këtu.
Ruani punën tuaj
Tani që kemi kokën tonë të projektuar plotësisht me gjerësi të plotë, sigurohuni që ta ruani dizajnin tuaj!
- Klikoni shigjetën e gjelbër në fund të djathtë të dritares së modulit.
- Ruaje
- Dilni nga VisualBuilder.
Lexo gjithashtu: Divi: Si të krijoni një seksion Fluid Hero
Argëtohuni duke eksperimentuar
Mënyrat për të personalizuar modulin Divi Fullwidth Header janë të pafundme. Përfitimi i butonit parësor dhe butonit dytësor mund të ndihmojë në drejtimin tuaj vizitorët në faqen që dëshironi që ata të shohin ose të ndërmarrin veprimin (si p.sh. të dërgoni një kërkesë) që dëshironi të kryejnë.
Le të hedhim një vështrim në dy shembuj të tjerë të titujve me gjerësi të plotë që kanë një buton kryesor që bie në sy.
Titulli me gjerësi të plotë nga paketa "Qendra e daljes në pension".
Stilet e butonave
Le të hedhim një vështrim në stilet unike të butonave parësorë dhe dytësorë.
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 i parë:
- Madhësia e tekstit: 14 px
- Ngjyra e tekstit: #ffffff
- Ngjyra e sfondit: #0a0a0a
- Gjerësia e kufirit: 0 piksele
- Rrezja kufitare: 10 px
- Hapësira e shkronjave: 3 px
- Pesha e shkronjave: Bold
- Stili i shkronjave: TT
- Shfaq vetëm ikonën në Hover për Buttpn One: PO
- Mbushja e një butoni: 15 px (lart dhe poshtë), 25 px (majtas dhe djathtas)
Butoni i dytë
Në skedë Butoni i dytë, konfiguroni cilësimet e mëposhtme:
- Përdorni stilin e personalizuar për butonin: PO
- Butoni i dytë:
- Madhësia e tekstit: 14 px
- Ngjyra e tekstit: #ffffff
- Ngjyra e sfondit: #0a0a0a
- Gjerësia e kufirit: 0 piksele
- Rrezja kufitare: 10 px
- Pesha e shkronjave: Bold
- Stili i shkronjave: TT
- Mbushja e dy butonave: 10 px (poshtë), 10 px (majtas dhe djathtas)
Dhe ja ku shkoni! Dy butona unikë, një që bie në sy dhe një që zë vendin e dytë.
Titulli me gjerësi të plotë të paketës "Planifikimi Financiar".
Stilet e butonave
Le të hedhim një vështrim në stilet unike të butonave parësorë dhe dytësorë.
butoni një
Në skedë Butoni Një, konfiguroni cilësimet e mëposhtme:
- Përdorni stilin e personalizuar për butonin e parë: PO
- Butoni i parë:
- Madhësia e tekstit: 18 px
- Ngjyra e tekstit: #ffffff
- Ngjyra e sfondit: #1b4ffe
- Mbushja: 15px()lart dhe poshtë); 25 px (majtas dhe djathtas)
Butoni i dytë
Në skedë Butoni i dytë, konfiguroni cilësimet e mëposhtme:
- Përdorni stilin e personalizuar për butonin e dytë: PO
- Butoni i dytë:
- Ngjyra e tekstit: #1b4ffe
- Ngjyra e sfondit: E qartë
- Ngjyra e ikonës: #1b4ffe
Shkarkoni DIVI tani!!!
Përfundim
Moduli Fullwidth Header i Divi e bën të lehtë krijimin e seksioneve mahnitëse të Heroit në tuaj Site Web.
Përdorimi strategjik i butonave parësor dhe dytësor do të përmirësojë përvojën tuaj të përdoruesit dhe do t'i ndihmojë vizitorët e faqes në internet të ndërmarrin veprimet që duan të ndërmarrin.
Opsionet e personalizimit janë të pafundme me kokën me gjerësi të plotë, kështu që argëtohuni duke eksperimentuar!
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.
...
