Divi: Cum să includeți un buton de derulare în jos în modulul Fullwidth Header

Doriți să adăugați la modulul dvs. Fullwidth Header de Divi un buton de defilare în jos?

Modulul Fullwidth Header al Divi include un buton care îi spune utilizatorului că poate derula în jos. Odată ce fac clic pe el, sunt redirecționați automat la următoarea secțiune. Este un buton simplu cu mai multe pictograme din care să alegeți, iar culoarea și dimensiunea acestuia sunt complet personalizabile. 

În acest articol, vom vedea cum să-l personalizăm și vom vedea patru butoane de derulare în jos pe care le puteți include în modulul Antet cu lățime completă. Vom vedea, de asemenea, cum să-l personalizăm cu CSS pentru și mai multe opțiuni de design.

Să începem!

Prezentare generală a butoanelor de derulare în jos

Mai întâi, să ne uităm la modelele pe care le vom crea în acest articol.

Exemplul 1

Exemplu 2

Descărcați DIVI acum!!!

Exemplu 3

Exemplu 4

Descărcați DIVI acum!!!

Butoane de derulare în jos Design antet cu lățime completă

În primul rând, vom crea designul antetului cu lățime completă. Îl construiesc de la zero folosind modele de la Pachet gratuit de layout pentru terapie disponibil în Divi . Creați o pagină nouă și adăugați un modul de antet cu lățime completă la o nouă secțiune cu lățime completă.

Vezi si: Divi: Cum se creează o organigramă cu modulul Blurb

Despărțitor de secțiune pe toată lățimea

Vom adăuga un divizor pentru acest antet cu lățime completă. Deschideți setările secțiune pe toată lățimea .

Apoi derulați în jos la compas . Faceți clic pe filă De jos și alegeți al 8-lea stil de separare. Setați culoarea la #e5e8f0 și introduceți 10vw pentru înălțime. Închideți setările secțiunii.

• Divizoare: scăzute
• Stil: al 8-lea stil
• Culoare: #e5e8f0
• Înălțime: 10vw

Antet

Apoi, deschideți modulul Antet cu lățime completă și adăugați titlul, subtitrarea și textul butonului. Eliminați textul fals pentru cuprins a corpului și lăsați-l gol.

• Titlu: Începe-ți călătoria pentru a te simți mai bine astăzi.
• Subtitrare: Leslie Saindon, terapeut autorizat
• Butonul #1: Faceți o programare
• body: niciunul

Imagini antet

Derulați până la imagini și alegeți o imagine de antet. Aleg o imagine furnizată împreună cu Pachet de aspect pentru terapie.

Fundal antet

Derulați până la Context. Eliminați culoarea de fundal și selectați fila Gradient de fundal.

• Opriri de gradient:
  • 25%: #2e5b61
  • 100%: RGBA (46, 91, 97, 0,5)

permite Plasați gradientul deasupra imaginii de fundal .

• Gradient pătrat deasupra imaginii de fundal: DA

Imagine de fundal antet cu lățime completă

Apoi selectațiFila Imagine de fundal și alegeți o imagine pe ecran complet. Folosesc o altă imagine din pachetul Therapy Layout.

• Poziția imaginii de fundal: Centru sus

Dispunerea antetului la lățime completă

Apoi selectațifila design și activați Faceți ecran complet .

• Faceți ecran complet: DA

Pictograma de derulare în jos a antetului la lățime completă

Apoi activați Afișați butonul de derulare în jos. Vom stila acest buton în exemplele noastre, așa că îl vom lăsa în setările implicite pentru moment.

• Afișați butonul de derulare în jos: DA

Imagine antet

Apoi derulați în jos la Imagine și modificați colțurile rotunjite din stânga sus la 200 px pentru desktop. Setați restul colțurilor rotunjite la 0px. Schimbați colțurile rotunjite la 100 de pixeli pentru tablete și telefoane.

• Colțuri rotunjite din imagine:
  • Desktop: 200px din stânga sus, 0px toate celelalte
  • Tabletă și telefon: 100 px în stânga sus, 0 px toate celelalte

Textul titlului antetului

Apoi derulați în jos la Textul titlului. Utilizați H1 pentru nivelul de cap. Alegeți Cormorant Garamond pentru fontul titlului, setați greutatea la Bold și culoarea la #e1ecea.

• Titlu :
  • Nivel de titlu: H1
  • Font: Cormoran Garamond
  • Greutatea fontului: aldine
  • Culoare text: #e1ecea

Apoi setați Dimensiunea pentru toate cele trei dimensiuni de ecran. Utilizați 90 de pixeli pentru desktopuri, 40 de pixeli pentru tablete și 24 de pixeli pentru telefoane. Schimbați înălțimea liniei la 1.1 em.

• Dimensiunea textului titlului: 90px, 40px, 24px
• Înălțimea liniei de titlu: 1,1 em

Textul subtitrării antetului cu lățime completă

Apoi derulați în jos la Subtitrare text. Schimbați fontul în Inter, greutatea în aldine și culoarea în #e1ecea.

• Subtitrare:
  • Font: Inter
  • Greutatea fontului: aldine
  • Culoare text: #e1ecea

Seteaza Dimensiunea la 22px pentru desktop, 20px pentru tablete și 16px pentru telefoane. Schimba-l înălțimea rândului la 1,6 em.

• Dimensiunea textului subtitrarilor: 22px, 20px, 16px
• Înălțimea liniei de subtitrare: 1,6 em

butonul de antet

Derulați în jos la Setări Butonul Unu și activați Utilizați stiluri personalizate pentru butonul unu . Schimbați dimensiunea la 14px, culoarea textului la #2e5b61 și culoarea de fundal la #e1ecea.

• Utilizați stiluri personalizate pentru butonul unu: DA
• Butonul Unu
  • Dimensiune text: 14 px
  • Culoare text: #2e5b61
  • Fundal: #e1ecea

Modificați lățimea frontieră la 0px și raza lui frontieră la 50px. Folosiți Inter pentru font și schimbați greutatea la semi-aldine.

• Butonul Unu:
  • Lățimea chenarului: 0px
  • Raza chenarului: 50px
  • Font: Inter
  • Greutate: îndrăzneață

pentru umplutură de butoane , utilizați 20px pentru Sus și Jos și 40px pentru Stânga și Dreapta.

• Buton One Umplutură: 20 px sus și jos, 40 px la stânga și la dreapta

Citiți și: Divi: Cum se creează o secțiune Fluid Hero

Exemple de butoane de derulare în jos

Acum că avem antetul pe lățime completă, să vedem cum să personalizăm butoanele de derulare în jos. Vom analiza patru exemple cu diferite combinații de pictograme, culori și dimensiuni.

Butoanele de derulare în jos includ trei parametri. Fiecare setare poate fi ajustată independent pentru fiecare dimensiune a ecranului. Parametrii includ:

• Selectarea pictogramelor – alegeți dintre 11 pictograme. Acestea includ diverse modele de săgeți cu sau fără fundal, inclusiv necercuite, încercuite și solide.
• Culoare – selectorul de culori Divi standardul.
• Dimensiune – ajustarea standard a dimensiunii Divi.

Include, de asemenea, un câmp CSS în fila Avansat. 

Vom folosi toți acești parametri.

Vezi si: Divi: 5 suprapuneri de măști și modele aplicabile unei imagini de fundal

Exemplul #1

Pentru primul nostru exemplu, vom folosi o pictogramă neîncercuită fără fundal. Selectați prima pictogramă, schimbați culoarea la #e1ecea și modificați dimensiunea la 66px pentru desktop-uri, 60px pentru tablete și 50px pentru telefoane.

• Pictogramă: prima pictogramă
• Culoare: #e1ecea
• Dimensiune: 66 px (desktop și tabletă), 50 px (telefon)

Acest lucru creează o săgeată în jos verde deschis, care funcționează bine cu restul designului și iese în evidență suficient pentru a informa utilizatorul.

Exemplu 2

Pentru al doilea exemplu, vom folosi o pictogramă încercuită. Selectați a șaptea pictogramă și schimbați culoarea la #e8c553. Vom mări pictograma pentru aceasta. Schimbați dimensiunea la 78 px pentru computere desktop, 70 px pentru tablete și 60 px pentru telefoane.

• Pictogramă: a 7-a pictogramă
• Culoare: #e8c553
• Dimensiune: 78px (desktop), 70px (tabletă), 60px (telefon)

Această culoare este o variație a galbenului din pachetul de aspect, dar este mai deschisă și funcționează cel mai bine pe fundalul verde. Pictograma are colțuri ascuțite, dar cercul se potrivește cu designul rotunjit al aspectului.

Exemplu 3

Pentru al treilea exemplu, vom folosi o pictogramă care are un cerc în jurul ei și un fundal. Acest lucru colorează fundalul și creează pictograma cu o deschidere care dezvăluie imaginea de fundal a site-ul web. 

Pentru cele mai bune rezultate, va trebui să acordăm o atenție deosebită dimensiunii pictogramei și culorii de fundal a butonului.

Selectați a opta pictogramă și schimbați-i culoarea la #0e4951. Setați dimensiunea la 60 px pentru computere desktop, 56 px pentru tablete și 50 px pentru telefoane.

• Pictogramă: a 8-a pictogramă
• Culoare: #0e4951
• Dimensiune: 60px (desktop), 56px (tabletă), 50px (telefon)

Verdele este o nuanță mai închisă de verde în fundal. Nuanța mai închisă iese în evidență față de verde și se potrivește în continuare cu restul aspectului.

Exemplu 4

Ce se întâmplă dacă doriți să combinați culorile astfel încât să aveți o culoare de fundal în spatele pictogramei decupate? Putem face asta cu CSS. 

Pentru acest exemplu, vom folosi CSS pentru a crea o formă de fundal în spatele pictogramei care va apărea prin pictograma decupată. Pictograma în sine va folosi setările standard.

Selectați a unsprezecea pictogramă și schimbați culoarea la #e1ecea. Vom seta pictograma mai mică pentru aceasta și vom face o formă mare de fundal. Schimbați dimensiunea la 50 px pentru computere desktop, 40 px pentru tablete și 30 px pentru telefoane.

• Pictogramă: 11^-a
• Culoare: #e1ecea
• Dimensiune: 50px (desktop), 40px (tabletă), 30px (telefon)

Apoi accesați fila Avansat și derulați la câmp Butonul de derulare în jos și introduceți acest CSS:

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

Acest format CSS adaugă umplutură în partea de sus, dreapta, jos și stânga. Am folosit această umplutură pentru a crea un oval de fundal care se potrivește bine cu designul antetului folosind ghiduri de design de aspect.

Rezultatele diferitelor exemple

Exemplu 1

Exemplu 2

Descărcați DIVI acum!!!

Exemplu 3

Exemplu 4

Descărcați DIVI acum!!!

Concluzie

Aceasta este prezentarea noastră de ansamblu asupra celor patru butoane de derulare în jos pe care le puteți include în modulul Fullwidth Header Divi. Butonul de defilare include mai multe pictograme din care puteți alege și îi puteți seta culoarea și dimensiunea. 

Folosind câmpul CSS, puteți personaliza în continuare butonul. Combinațiile de opțiuni de stil pentru butoane și CSS vă oferă o mulțime de posibilități de design cu butoanele de defilare în jos.

Sper că acest lucru va fi util pentru următorul dvs. site de blog. Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.

De asemenea, puteți consulta resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet.

Nu ezitați să consultați și ghidul nostru despre Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.

Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.

...