Divi: Hvordan inkludere en rulle ned-knapp i Fullwidth Header-modulen

Vil du legge til din Fullwidth Header-modul av Divi en rulle ned-knapp?

Fullwidth Header-modulen til Divi inkluderer en knapp som forteller brukeren at de kan rulle ned. Når de klikker på den, blir de automatisk omdirigert til neste seksjon. Det er en enkel knapp med flere ikoner å velge mellom, og fargen og størrelsen kan tilpasses fullt ut. 

I denne artikkelen ser vi hvordan du tilpasser den og ser fire rulle ned-knapper du kan inkludere i Fullwidth Header-modulen. Vi vil også se hvordan du kan tilpasse den med CSS for enda flere designalternativer.

La oss starte!

Oversikt over rulle ned-knapper

La oss først se på designene vi skal lage i denne artikkelen.

Eksempel 1

Eksempel 2

Last ned DIVI nå!!!

Eksempel 3

Eksempel 4

Last ned DIVI nå!!!

Rull ned knapper Full bredde topptekstdesign

Først skal vi lage vår topptekstdesign i full bredde. Jeg bygger det fra bunnen av ved hjelp av design fra gratis terapioppsettpakke tilgjengelig i Divi . Opprett en ny side og legg til en topptekstmodul i full bredde til en ny seksjon i full bredde.

Se også: Divi: Hvordan lage et organisasjonskart med Blurb-modulen

Seksjonsdeler i full bredde

Vi legger til en skillelinje for denne overskriften i full bredde. Åpne innstillingene til full bredde seksjon .

Bla deretter ned til divider . Klikk på fanen Bunn og velg den åttende skillestilen. Sett fargen til #e8e5f8 og skriv inn 0vw for høyden. Lukk seksjonsinnstillingene.

• Skillere: Lave
• Stil: 8. stil
• Farge: #e5e8f0
• Høyde: 10vw

Overskriftstekst

Deretter åpner du Fullwidth Header-modulen og legger til tittel, undertittel og knappetekst. Fjern dummy-teksten for innhold av kroppen og la den stå tom.

• Tittel: Start reisen til å føle deg bedre i dag.
• Undertittel: Leslie Saindon, lisensiert terapeut
• Knapp #1: Bestill en avtale
• bodysuit: ingen

Topptekstbilder

Bla til Bilder og velg et overskriftsbilde. Jeg velger et bilde som følger med Pakke med terapioppsett.

Overskriftsbakgrunn

Bla til Bakgrunn. Fjern bakgrunnsfarge og velg fane Bakgrunnsgradient.

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

aktiver Plasser gradienten over bakgrunnsbildet .

• Firkantet gradient over bakgrunnsbilde: JA

Bakgrunnsbilde for topptekst i full bredde

Velg deretterBakgrunnsbilde-fanen og velg et fullskjermbilde. Jeg bruker et annet bilde fra Therapy Layout Pack.

• Bakgrunnsbilde Posisjon: Øverst i midten

Overskriftsoppsett i full bredde

Velg deretterdesign-fanen og aktivere Lag fullskjerm .

• Gjør fullskjerm: JA

Rull nedover ikon i full bredde

Aktiver deretter Vis rulle ned-knappen. Vi vil style denne knappen i eksemplene våre, så vi lar den være i standardinnstillingene for nå.

• Vis rulle ned-knapp: JA

Toppbilde

Bla deretter ned til Bilde og endre de øvre venstre avrundede hjørnene til 200px for stasjonære datamaskiner. Sett resten av de avrundede hjørnene til 0px. Endre avrundede hjørner til 100 piksler for nettbrett og telefoner.

• Bilde avrundede hjørner:
  • Desktop: 200px øverst til venstre, 0px alle andre
  • Nettbrett og telefon: 100px øverst til venstre, 0px alle andre

Overskriftstitteltekst

Bla deretter ned til Titteltekst. Bruk H1 for overskriftsnivå. Velg Cormorant Garamond for tittelfonten, sett vekten til Fet og fargen til #e1ecea.

• Tittel:
  • Overskriftsnivå: H1
  • Font: Cormorant Garamond
  • Skriftvekt: Fet
  • Tekstfarge: #e1ecea

Still deretter inn taille for alle tre skjermstørrelsene. Bruk 90 piksler for stasjonære datamaskiner, 40 piksler for nettbrett og 24 piksler for telefoner. Endre linjehøyden til 1.1em.

• Tittel Tekststørrelse: 90px, 40px, 24px
• Tittellinjehøyde: 1,1 em

Overskriftstekst i full bredde

Bla deretter ned til Underteksttekst. Endre skrifttypen til Inter, vekten til fet og fargen til #e1ecea.

• Undertittel:
  • Font: Inter
  • Skriftvekt: Fet
  • Tekstfarge: #e1ecea

Sett taille ved 22px for stasjonære datamaskiner, 20px for nettbrett og 16px for telefoner. Endre det radhøyde på 1,6 em.

• Tekststørrelse: 22px, 20px, 16px
• Tekstlinjehøyde: 1,6 em

overskriftsknapp

Rull ned til Innstillinger Knapp en og aktivere Bruk egendefinerte stiler for Button One . Endre størrelsen til 14px, tekstfargen til #2e5b61, og bakgrunnsfargen til #e1ecea.

• Bruk egendefinerte stiler for knapp én: JA
• Knapp en
  • Tekststørrelse: 14px
  • Tekstfarge: #2e5b61
  • Bakgrunn: #e1ecea

Endre bredden på grense ved 0px og radiusen til grense på 50 px. Bruk Inter for fonten og endre vekten til halvfet skrift.

• Knapp en:
  • Kantbredde: 0px
  • Kanteradius: 50px
  • Font: Inter
  • Vekt: Fet

for knapp polstring , bruk 20px for topp og bunn og 40px for venstre og høyre.

• Button One-polstring: 20 px topp og bunn, 40 px venstre og høyre

Les også: Divi: Hvordan lage en Fluid Hero-seksjon

Eksempler på rulle ned-knapper

Nå som vi har vår overskrift i full bredde, la oss se hvordan du tilpasser rulle ned-knappene. Vi skal se på fire eksempler med ulike kombinasjoner av ikoner, farger og størrelser.

Rulle ned-knappene inkluderer tre parametere. Hver innstilling kan justeres uavhengig for hver skjermstørrelse. Parametre inkluderer:

• Utvalg av ikoner – velg mellom 11 ikoner. De inkluderer forskjellige pildesign med eller uten bakgrunn, inkludert utsirklet, sirklet og solid.
• Farge – fargevelgeren Divi standard.
• Størrelse – standard Divi-størrelsesjustering.

Den inkluderer også et CSS-felt i Avansert-fanen. 

Vi vil bruke alle disse parameterne.

Se også: Divi: 5 overlegg av masker og mønstre som gjelder for et bakgrunnsbilde

Eksempel #1

For vårt første eksempel bruker vi et utsirkelt ikon uten bakgrunn. Velg det første ikonet, endre fargen til #e1ecea, og endre størrelsen til 66px for stasjonære datamaskiner, 60px for nettbrett og 50px for telefoner.

• Ikon: 1. ikon
• Farge: #e1ecea
• Størrelse: 66px (stasjonær PC og nettbrett), 50px (telefon)

Dette skaper en lysegrønn pil ned som fungerer godt med resten av designet og skiller seg ut nok til å informere brukeren.

Eksempel 2

For vårt andre eksempel bruker vi et sirklet ikon. Velg det syvende ikonet og endre fargen til #e8c553. Vi skal forstørre ikonet for denne. Endre størrelsen til 78px for stasjonære datamaskiner, 70px for nettbrett og 60px for telefoner.

• Ikon: 7. ikon
• Farge: #e8c553
• Størrelse: 78px (stasjonær), 70px (nettbrett), 60px (telefon)

Denne fargen er en variant av den gule i layoutpakken, men er lysere og fungerer best på den grønne bakgrunnen. Ikonet har skarpe hjørner, men sirkelen samsvarer med den avrundede utformingen av oppsettet.

Eksempel 3

For vårt tredje eksempel bruker vi et ikon som har en sirkel rundt seg og en bakgrunn. Dette farger bakgrunnen og skaper ikonet med en blenderåpning som avslører bakgrunnsbildet til nettstedet Web. 

For best resultat må vi være nøye med ikonstørrelsen og knappens bakgrunnsfarge.

Velg det åttende ikonet og endre fargen til #0e4951. Sett størrelsen til 60px for stasjonære datamaskiner, 56pc for nettbrett og 50px for telefoner.

• Ikon: 8. ikon
• Farge: #0e4951
• Størrelse: 60px (stasjonær), 56px (nettbrett), 50px (telefon)

Grønn er en mørkere nyanse av grønn i bakgrunnen. Den mørkere nyansen skiller seg ut mot det grønne og matcher fortsatt resten av layouten.

Eksempel 4

Hva om du vil kombinere farger slik at du har en bakgrunnsfarge bak utklippsikonet? Vi kan gjøre dette med CSS. 

For dette eksempelet bruker vi CSS for å lage en bakgrunnsform bak ikonet som vises gjennom utklippsikonet. Selve ikonet vil bruke standardinnstillingene.

Velg det ellevte ikonet og endre fargen til #e1ecea. Vi setter ikonet mindre for denne og lager en stor bakgrunnsform. Endre størrelsen til 50px for stasjonære datamaskiner, 40px for nettbrett og 30px for telefoner.

• Ikon: 11^th
• Farge: #e1ecea
• Størrelse: 50px (stasjonær), 40px (nettbrett), 30px (telefon)

Gå deretter til fanen Avansert og bla til feltet Rull ned-knappen og skriv inn denne CSS:

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

Dette CSS-formatet legger til utfylling øverst, høyre, bunn og venstre. Jeg brukte denne polstringen for å lage en bakgrunnsoval som passer godt med overskriftsdesignet ved hjelp av layoutdesignguider.

Resultater av de ulike eksemplene

Eksempel 1

Eksempel 2

Last ned DIVI nå!!!

Eksempel 3

Eksempel 4

Last ned DIVI nå!!!

konklusjonen

Dette er vår oversikt over de fire rulle ned-knappene du kan inkludere i Fullwidth Header Divi-modulen. Rulleknappen inneholder flere ikoner å velge mellom, og du kan angi farge og størrelse. 

Ved å bruke CSS-feltet kan du tilpasse knappen ytterligere. Kombinasjonene av knappestilingsalternativer og CSS gir deg mange designmuligheter med rulleknappene dine.

Håper dette vil være nyttig for din neste bloggside. Hvis du har noen bekymringer eller forslag, finn oss inn kommentarfeltet å diskutere det.

Du kan også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder.

Ikke nøl med å også konsultere vår guide på WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.

Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.

...