Divi: Kako uključiti gumb za pomicanje prema dolje u modul Fullwidth Header

Želite li svom modulu Fullwidth Header dodati Divi gumb za pomicanje prema dolje?

Modul Fullwidth Header od Divi uključuje gumb koji govori korisniku da se može pomaknuti prema dolje. Nakon što kliknu na njega, automatski se preusmjeravaju na sljedeći odjeljak. To je jednostavan gumb s višestrukim ikonama koje možete izabrati, a njegova boja i veličina su potpuno prilagodljive. 

U ovom ćemo članku vidjeti kako ga prilagoditi i vidjeti četiri gumba za pomicanje prema dolje koje možete uključiti u svoj modul Fullwidth Header. Također ćemo vidjeti kako ga prilagoditi pomoću CSS-a za još više mogućnosti dizajna.

Započnimo!

Pregled gumba za pomicanje prema dolje

Prvo, pogledajmo dizajne koje ćemo izraditi u ovom članku.

Primjer 1

Primjer 2

Preuzmite DIVI sada!!!

Primjer 3

Primjer 4

Preuzmite DIVI sada!!!

Gumbi za pomicanje prema dolje Dizajn zaglavlja pune širine

Prvo ćemo izraditi naš dizajn zaglavlja pune širine. Gradim ga od nule koristeći nacrte iz besplatni paket izgleda terapije dostupan u Divi . Napravite novu stranicu i dodajte modul zaglavlja pune širine na novi odjeljak pune širine.

Vidi također: Divi: Kako izraditi organizacijsku shemu s Blurb modulom

Pregrada za dijelove pune širine

Dodat ćemo razdjelnik za ovo zaglavlje pune širine. Otvorite postavke za presjek pune širine .

Zatim se pomaknite dolje do šestar . Pritisnite karticu Dno i odaberite 8. stil razdjelnika. Postavite boju na #e5e8f0 i unesite 10vw za visinu. Zatvorite postavke odjeljka.

• Razdjelnici: Niski
• Stil: 8. stil
• Boja: #e5e8f0
• Visina: 10vw

Zaglavlje Tekst

Zatim otvorite modul Fullwidth Header i dodajte naslov, podnaslov i tekst gumba. Uklonite lažni tekst za sadržaj tijela i ostavite ga praznim.

• Naslov: Započnite svoje putovanje do boljeg osjećaja već danas.
• Podnaslov: Leslie Saindon, licencirani terapeut
• Gumb #1: Zakažite termin
• bodi: nema

Slike zaglavlja

Pomaknite se do Slike i odaberite sliku zaglavlja. Odabirem sliku priloženu uz Therapy Layout Pack.

Pozadina zaglavlja

Pomaknite se do pozadina. Uklonite boju pozadine i odaberite karticu Gradijent pozadine.

• Gradijent zaustavljanja:
  • 25%: #2e5b61
  • 100%: RGBA (46, 91, 97, 0,5)

Aktivirati Postavite gradijent iznad pozadinske slike .

• Kvadratni gradijent iznad pozadinske slike: DA

Pozadinska slika zaglavlja pune širine

Zatim odaberiteKartica Pozadinska slika i odaberite sliku preko cijelog zaslona. Koristim drugu sliku iz Therapy Layout Packa.

• Položaj pozadinske slike: gore u sredini

Izgled zaglavlja pune širine

Zatim odaberitekartica dizajna i aktivirati Napravi cijeli zaslon .

• Napravi cijeli zaslon: DA

Ikona za pomicanje prema dolje zaglavlja pune širine

Zatim aktivirajte Prikaži gumb za pomicanje prema dolje. Stilizirat ćemo ovaj gumb u našim primjerima, pa ćemo ga za sada ostaviti u zadanim postavkama.

• Prikaži gumb za pomicanje prema dolje: DA

Slika zaglavlja

Zatim se pomaknite dolje do Slika i promijenite gornje lijeve zaobljene kutove na 200px za stolna računala. Ostatak zaobljenih kutova postavite na 0px. Promijenite zaobljene kutove na 100 piksela za tablete i telefone.

• Zaobljeni kutovi slike:
  • Radna površina: 200 px gore lijevo, 0 px sve ostale
  • Tablet i telefon: 100px gore lijevo, 0px svi ostali

Tekst naslova zaglavlja

Zatim se pomaknite dolje do Tekst naslova. Koristite H1 za razinu naslova. Odaberite Cormorant Garamond za font naslova, postavite težinu na Bold i boju na #e1ecea.

• Naslov:
  • Razina naslova: H1
  • Font: Kormoran Garamond
  • Težina fonta: Podebljano
  • Boja teksta: #e1ecea

Zatim postavite struk za sve tri veličine ekrana. Koristite 90 piksela za stolna računala, 40 piksela za tablete i 24 piksela za telefone. Promijenite visinu linije na 1.1 em.

• Veličina teksta naslova: 90px, 40px, 24px
• Visina retka naslova: 1,1 em

Tekst podnaslova zaglavlja pune širine

Zatim se pomaknite dolje do Tekst podnaslova. Promijenite font u Inter, težinu u podebljano, a boju u #e1ecea.

• Titl:
  • Font: Inter
  • Težina fonta: Podebljano
  • Boja teksta: #e1ecea

Postavi struk na 22 px za stolna računala, 20 px za tablete i 16 px za telefone. Promijeni to visina reda na 1,6 em.

• Veličina teksta podnaslova: 22px, 20px, 16px
• Visina retka titla: 1,6 em

gumb zaglavlja

Pomaknite se prema dolje do Postavke Gumb jedan i aktivirati Koristite prilagođene stilove za gumb jedan . Promijenite veličinu na 14px, boju teksta na #2e5b61 i boju pozadine u #e1ecea.

• Koristi prilagođene stilove za gumb jedan: DA
• Gumb jedan
  • Veličina teksta: 14px
  • Boja teksta: #2e5b61
  • Pozadina: #e1ecea

Promijenite širinu bordura na 0px i radijus od bordura na 50 px. Koristite Inter za font i promijenite težinu u polu-podebljano.

• Gumb jedan:
  • Širina obruba: 0 px
  • Polumjer ruba: 50px
  • Font: Inter
  • Težina: Podebljano

Za podstava za gumbe , koristite 20px za vrh i dno i 40px za lijevo i desno.

• Button One Padding: 20 px gore i dolje, 40 px lijevo i desno

Pročitajte također: Divi: Kako stvoriti odjeljak Fluid Hero

Primjeri gumba za pomicanje prema dolje

Sada kada imamo zaglavlje pune širine, pogledajmo kako prilagoditi gumbe za pomicanje prema dolje. Pogledat ćemo četiri primjera s različitim kombinacijama ikona, boja i veličina.

Gumbi za pomicanje prema dolje uključuju tri parametra. Svaka postavka može se podesiti neovisno za svaku veličinu zaslona. Parametri uključuju:

• Izbor ikona – odaberite između 11 ikona. Uključuju različite dizajne strelica sa ili bez pozadine, uključujući nezaokružene, zaokružene i pune.
• Boja – birač boja Divi standard.
• Veličina – standardno podešavanje Divi veličine.

Također uključuje CSS polje na kartici Napredno. 

Koristit ćemo sve ove parametre.

Vidi također: Divi: 5 preklapanja maski i uzoraka primjenjivih na pozadinsku sliku

Primjer #1

Za naš prvi primjer upotrijebit ćemo nezaokruženu ikonu bez pozadine. Odaberite prvu ikonu, promijenite boju u #e1ecea i promijenite veličinu na 66px za stolna računala, 60px za tablete i 50px za telefone.

• Ikona: 1. ikona
• Boja: #e1ecea
• Veličina: 66 px (stolno računalo i tablet), 50 px (telefon)

Ovo stvara svijetlozelenu strelicu prema dolje koja dobro funkcionira s ostatkom dizajna i dovoljno se ističe da informira korisnika.

Primjer 2

Za naš drugi primjer koristit ćemo zaokruženu ikonu. Odaberite sedmu ikonu i promijenite boju u #e8c553. Povećat ćemo ikonu za ovu. Promijenite veličinu na 78 px za stolna računala, 70 px za tablete i 60 px za telefone.

• Ikona: 7. ikona
• Boja: #e8c553
• Veličina: 78 px (stolno računalo), 70 px (tablet), 60 px (telefon)

Ova je boja varijacija žute u paketu izgleda, ali je svjetlija i najbolje funkcionira na zelenoj pozadini. Ikona ima oštre kutove, ali krug odgovara zaobljenom dizajnu izgleda.

Primjer 3

Za naš treći primjer koristit ćemo ikonu koja ima krug oko sebe i pozadinu. Ovo boji pozadinu i stvara ikonu s otvorom koji otkriva pozadinsku sliku web stranica. 

Za najbolje rezultate morat ćemo obratiti veliku pozornost na veličinu ikone i boju pozadine gumba.

Odaberite osmu ikonu i promijenite joj boju u #0e4951. Postavite veličinu na 60 px za stolna računala, 56 px za tablete i 50 px za telefone.

• Ikona: 8. ikona
• Boja: #0e4951
• Veličina: 60 px (stolno računalo), 56 px (tablet), 50 px (telefon)

Zelena je tamnija nijansa zelene u pozadini. Tamnija nijansa ističe se u odnosu na zelenu i još uvijek odgovara ostatku rasporeda.

Primjer 4

Što ako želite kombinirati boje tako da imate boju pozadine iza ikone izreza? To možemo učiniti pomoću CSS-a. 

Za ovaj primjer, koristit ćemo CSS za stvaranje pozadinskog oblika iza ikone koji će se prikazati kroz ikonu izreza. Sama ikona koristit će standardne postavke.

Odaberite jedanaestu ikonu i promijenite boju u #e1ecea. Postavit ćemo manju ikonu za ovu i napraviti veliku pozadinu. Promijenite veličinu na 50 px za stolna računala, 40 px za tablete i 30 px za telefone.

• Ikona: 11^EME
• Boja: #e1ecea
• Veličina: 50 px (stolno računalo), 40 px (tablet), 30 px (telefon)

Zatim idite na karticu napredan i dođite do polja Gumb za pomicanje prema dolje i unesite ovaj CSS:

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

Ovaj CSS format dodaje ispunu na vrhu, desno, dnu i lijevo. Upotrijebio sam ovu podlogu za stvaranje ovalne pozadine koja se dobro slaže s dizajnom zaglavlja pomoću vodiča za dizajn izgleda.

Rezultati različitih primjera

Primjer 1

Primjer 2

Preuzmite DIVI sada!!!

Primjer 3

Primjer 4

Preuzmite DIVI sada!!!

Zaključak

Ovo je naš pregled četiri gumba za pomicanje prema dolje koje možete uključiti u svoj modul Fullwidth Header Divi. Gumb za pomicanje uključuje nekoliko ikona koje možete odabrati, a možete postaviti njegovu boju i veličinu. 

Korištenjem CSS polja možete dodatno prilagoditi gumb. Kombinacije opcija oblikovanja gumba i CSS-a daju vam obilje mogućnosti dizajna s gumbima za pomicanje prema dolje.

Nadam se da će ovo biti korisno za vaš sljedeći blog. Ako imate nedoumica ili prijedloga, potražite nas odjeljak komentara raspravljati o tome.

Također se možete konzultirati naši resursi, ako vam je potrebno više elemenata za provođenje projekata kreiranja internetskih stranica.

Ne ustručavajte se također konzultirati naš vodič o Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.

Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.

...