Divi: Si të përfshini një buton lëvizës poshtë në modulin Fullwidth Header

Dëshironi të shtoni në modulin tuaj Fullwidth Header Divi një buton lëviz poshtë?

Moduli Fullwidth Header i Divi përfshin një buton që i tregon përdoruesit se mund të lëvizë poshtë. Pasi të klikojnë mbi të, ata ridrejtohen automatikisht në seksionin tjetër. Është një buton i thjeshtë me ikona të shumta për të zgjedhur dhe ngjyra dhe madhësia e tij janë plotësisht të personalizueshme. 

Në këtë artikull, ne do të shohim se si ta personalizojmë atë dhe do të shohim katër butona lëvizës poshtë që mund t'i përfshini në modulin tuaj Fullwidth Header. Do të shohim gjithashtu se si ta personalizojmë me CSS për më shumë opsione dizajni.

Le të fillojmë!

Pasqyrë e butonave të lëvizjes poshtë

Së pari, le të shohim modelet që do të krijojmë në këtë artikull.

Shembulli 1

Shembull 2

Shkarkoni DIVI tani!!!

Shembull 3

Shembull 4

Shkarkoni DIVI tani!!!

Butonat e lëvizjes poshtë Dizajni i kokës me gjerësi të plotë

Së pari, ne do të krijojmë dizajnin tonë të kokës me gjerësi të plotë. Unë jam duke e ndërtuar atë nga e para duke përdorur dizajne nga Paketa e paraqitjes së terapisë falas e disponueshme në Divi . Krijoni një faqe të re dhe shtoni një Moduli i kokës me gjerësi të plotë në një seksion të ri me gjerësi të plotë.

Shiko gjithashtu: Divi: Si të krijoni një grafik organizimi me modulin Blurb

Ndarës i seksionit me gjerësi të plotë

Ne do të shtojmë një ndarës për këtë kokë me gjerësi të plotë. Hapni cilësimet e seksion me gjerësi të plotë .

Më pas lëvizni poshtë te ai që ndan . Klikoni në skedën Fund dhe zgjidhni stilin e 8-të ndarës. Vendosni ngjyrën në #e5e8f0 dhe vendosni 10vw për lartësinë. Mbyllni cilësimet e seksionit.

• Ndarësit: i ulët
• Stili: Stili i 8-të
• Ngjyra: #e5e8f0
• Lartësia: 10vw

Teksti i kokës

Më pas, hapni modulin Fullwidth Header dhe shtoni titullin, titrat dhe tekstin e butonit. Hiqni tekstin e rremë për përmbajtje të trupit dhe lëreni bosh.

• Titulli: Filloni udhëtimin tuaj për t'u ndjerë më mirë sot.
• Nëntitulli: Leslie Saindon, terapiste e licencuar
• Butoni #1: Bëni një takim
• trupi: asnjë

Imazhet e kokës

Shkoni te Images dhe zgjidhni një imazh të kokës. Unë zgjedh një imazh të dhënë me Paketa e paraqitjes së terapisë.

Sfondi i kokës

Shkoni te Sfond. Hiqni ngjyrën e sfondit dhe zgjidhni skedën Gradienti i Sfondit.

• Ndalesat e gradientit:
  • 25%: #2e5b61
  • 100%: RGBA (46, 91, 97, 0,5)

mundësoj Vendosni gradientin mbi imazhin e sfondit .

• Gradient katror mbi sfond Imazhi: PO

Imazhi i sfondit të kokës me gjerësi të plotë

Pastaj zgjidhniSkeda e imazhit të sfondit dhe zgjidhni një imazh në ekran të plotë. Po përdor një imazh tjetër nga Paketa e Paraqitjes së Terapisë.

• Pozicioni i imazhit në sfond: Qendra e sipërme

Paraqitja e kokës me gjerësi të plotë

Pastaj zgjidhniskeda e dizajnit dhe aktivizoni Bëni ekran të plotë .

• Bëni ekran të plotë: PO

Ikona e lëvizjes poshtë e kokës me gjerësi të plotë

Më pas aktivizoni Shfaq butonin e lëvizjes poshtë. Ne do ta stilojmë këtë buton në shembujt tanë, kështu që do ta lëmë atë në cilësimet e paracaktuara për momentin.

• Shfaq butonin e lëvizjes poshtë: PO

Imazhi i kokës

Më pas lëvizni poshtë te Imazh dhe ndryshoni qoshet e rrumbullakosura majtas në 200 px për desktopët. Vendosni pjesën tjetër të qosheve të rrumbullakosura në 0px. Ndrysho qoshet e rrumbullakosura në 100 piksele për tabletët dhe telefonat.

• Këndet e rrumbullakosura të figurës:
  • Desktop: 200px lart majtas, 0px gjithë të tjerët
  • Tableti dhe telefoni: 100px lart majtas, 0px të gjithë të tjerët

Teksti i titullit të titullit

Më pas lëvizni poshtë te Teksti i titullit. Përdorni H1 për nivelin e titullit. Zgjidhni Cormorant Garamond për fontin e titullit, vendosni peshën në Bold dhe ngjyrën në #e1ecea.

• Titulli:
  • Niveli i titullit: H1
  • Fonti: Cormorant Garamond
  • Pesha e shkronjave: Bold
  • Ngjyra e tekstit: #e1ecea

Më pas vendosni madhësi për të tre madhësitë e ekranit. Përdorni 90 pikselë për kompjuterët desktop, 40 pikselë për tabletët dhe 24 pikselë për telefonat. Ndrysho lartësinë e linjës në 1.1em.

• Madhësia e tekstit të titullit: 90px, 40px, 24px
• Lartësia e linjës së titullit: 1,1 em

Teksti i titrave të titullit me gjerësi të plotë

Më pas lëvizni poshtë te Teksti i nëntitullit. Ndrysho fontin në Inter, peshën në bold dhe ngjyrën në #e1ecea.

• Titrat:
  • Fonti: Inter
  • Pesha e shkronjave: Bold
  • Ngjyra e tekstit: #e1ecea

Vendos madhësi në 22 px për desktop, 20px për tablet dhe 16px për telefona. Ndryshoje lartësia e rreshtit në 1,6 em.

• Madhësia e tekstit të titrave: 22px, 20px, 16px
• Lartësia e rreshtit të titrave: 1,6 em

butoni i kokës

Lëvizni poshtë te Cilësimet Butoni Një dhe aktivizoni Përdorni stile të personalizuara për butonin Një . Ndrysho madhësinë në 14 px, ngjyrën e tekstit në #2e5b61 dhe ngjyrën e sfondit në #e1ecea.

• Përdorni stile të personalizuara për butonin e parë: PO
• Butoni Një
  • Madhësia e Tekstit: 14px
  • Ngjyra e tekstit: #2e5b61
  • Sfondi: #e1ecea

Ndryshoni gjerësinë e kufiri në 0px dhe rreze e kufiri në 50 px. Përdorni Inter për fontin dhe ndryshoni peshën në gjysmë të theksuar.

• Butoni i parë:
  • Gjerësia e kufirit: 0 px
  • Rrezja e kufirit: 50 px
  • Fonti: Inter
  • Pesha: E guximshme

Hidh le mbushje e butonit , përdorni 20 px për lart dhe poshtë dhe 40 px për majtas dhe djathtas.

• Mbushja e një butoni: 20 px lart dhe poshtë, 40 px majtas dhe djathtas

Lexo gjithashtu: Divi: Si të krijoni një seksion Fluid Hero

Shembuj të butonave të lëvizjes poshtë

Tani që kemi kokën tonë me gjerësi të plotë, le të shohim se si të personalizojmë butonat e lëvizjes poshtë. Ne do të shohim katër shembuj me kombinime të ndryshme ikonash, ngjyrash dhe madhësish.

Butonat e lëvizjes poshtë përfshijnë tre parametra. Çdo cilësim mund të rregullohet në mënyrë të pavarur për çdo madhësi ekrani. Parametrat përfshijnë:

• Zgjedhja e ikonave – zgjidhni nga 11 ikona. Ato përfshijnë modele të ndryshme shigjetash me ose pa sfond, duke përfshirë të paqarkuara, të rrethuara dhe të forta.
• Ngjyrë – zgjedhësi i ngjyrave Divi standarde.
• Madhësi – rregullimi standard i madhësisë Divi.

Ai gjithashtu përfshin një fushë CSS në skedën Advanced. 

Ne do të përdorim të gjithë këta parametra.

Shiko gjithashtu: Divi: 5 mbivendosje maskash dhe modelesh të zbatueshme për një imazh të sfondit

Shembulli #1

Për shembullin tonë të parë, ne do të përdorim një ikonë të pa rrethuar pa sfond. Zgjidhni ikonën e parë, ndryshoni ngjyrën në #e1ecea dhe ndryshoni madhësinë në 66px për desktopët, 60px për tabletët dhe 50px për telefonat.

• Ikona: Ikona e parë
• Ngjyra: #e1ecea
• Madhësia: 66 px (Desktop dhe tablet), 50 px (Telefon)

Kjo krijon një shigjetë poshtë jeshile të lehtë që funksionon mirë me pjesën tjetër të dizajnit dhe qëndron mjaftueshëm për të informuar përdoruesin.

Shembull 2

Për shembullin tonë të dytë, ne do të përdorim një ikonë të rrethuar. Zgjidhni ikonën e shtatë dhe ndryshoni ngjyrën në #e8c553. Ne do të zgjerojmë ikonën për këtë. Ndrysho madhësinë në 78 px për desktopët, 70 px për tabletët dhe 60 px për telefonat.

• Ikona: ikona e 7-të
• Ngjyra: #e8c553
• Madhësia: 78 px (Desktop), 70 px (Tablet), 60 px (Telefon)

Kjo ngjyrë është një variacion i të verdhës në paketën e paraqitjes, por është më e lehtë dhe funksionon më mirë në sfondin e gjelbër. Ikona ka qoshe të mprehta, por rrethi përputhet me modelin e rrumbullakosur të paraqitjes.

Shembull 3

Për shembullin tonë të tretë, ne do të përdorim një ikonë që ka një rreth rreth tij dhe një sfond. Kjo ngjyros sfondin dhe krijon ikonën me një hapje që zbulon imazhin e sfondit të Site Web. 

Për rezultate më të mira, do të na duhet t'i kushtojmë vëmendje madhësisë së ikonës dhe ngjyrës së sfondit të butonit.

Zgjidhni ikonën e tetë dhe ndryshoni ngjyrën e saj në #0e4951. Vendosni madhësinë në 60 px për desktopët, 56 pc për tabletët dhe 50 px për telefonat.

• Ikona: ikona e 8-të
• Ngjyra: #0e4951
• Madhësia: 60 px (Desktop), 56 px (Tablet), 50 px (Telefon)

E gjelbërta është një nuancë më e errët e gjelbër në sfond. Nuanca më e errët bie në sy kundrejt ngjyrës së gjelbër dhe ende përputhet me pjesën tjetër të paraqitjes.

Shembull 4

Po sikur të doni të kombinoni ngjyrat në mënyrë që të keni një ngjyrë sfondi pas ikonës së prerjes? Këtë mund ta bëjmë me CSS. 

Për këtë shembull, ne do të përdorim CSS për të krijuar një formë sfondi prapa ikonës që do të shfaqet përmes ikonës së prerjes. Vetë ikona do të përdorë cilësimet standarde.

Zgjidhni ikonën e njëmbëdhjetë dhe ndryshoni ngjyrën në #e1ecea. Ne do ta vendosim ikonën më të vogël për këtë dhe do të bëjmë një formë të madhe sfondi. Ndrysho madhësinë në 50 px për kompjuterët desktop, 40 px për tabletët dhe 30 px për telefonat.

• Ikona: 11^th
• Ngjyra: #e1ecea
• Madhësia: 50 px (Desktop), 40 px (Tablet), 30 px (Telefon)

Pastaj shkoni te skeda Avancuar dhe lëvizni në fushë Butoni i lëvizjes poshtë dhe shkruani këtë CSS:

border-radius: 45%;
padding:12px 40px 14px 40px;
background-color:#2e5b61

Ky format CSS shton mbushje lart, djathtas, poshtë dhe majtas. E përdora këtë mbushje për të krijuar një ovale të sfondit që shkon mirë me modelin e kokës duke përdorur udhëzuesit e dizajnit të paraqitjes.

Rezultatet e shembujve të ndryshëm

Shembull 1

Shembull 2

Shkarkoni DIVI tani!!!

Shembull 3

Shembull 4

Shkarkoni DIVI tani!!!

Përfundim

Kjo është përmbledhja jonë e katër butonave të lëvizjes poshtë që mund të përfshini në modulin tuaj Fullwidth Header Divi. Butoni i lëvizjes përfshin disa ikona për të zgjedhur dhe ju mund të vendosni ngjyrën dhe madhësinë e tij. 

Duke përdorur fushën CSS, mund ta personalizoni më tej butonin. Kombinimet e opsioneve të stilimit të butonave dhe CSS ju japin shumë mundësi dizajni me butonat e lëvizjes poshtë.

Shpresoj se kjo do të jetë e dobishme për faqen tuaj të ardhshme të blogut. 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.

...