Divi: Sådan inkluderes en rulle ned-knap i Fullwidth Header-modulet

Vil du tilføje til dit Fullwidth Header-modul af Divi en rulle ned-knap?

Fullwidth Header-modulet af Divi indeholder en knap, der fortæller brugeren, at de kan rulle ned. Når de klikker på det, bliver de automatisk omdirigeret til næste afsnit. Det er en simpel knap med flere ikoner at vælge imellem, og dens farve og størrelse kan tilpasses fuldt ud. 

I denne artikel vil vi se, hvordan du tilpasser det, og se fire rulleknapper, du kan inkludere i dit Fullwidth Header-modul. Vi vil også se, hvordan du tilpasser det med CSS for endnu flere designmuligheder.

Lad os starte!

Oversigt over rulleknapper

Lad os først se på de designs, vi vil skabe i denne artikel.

Eksempel 1

Eksempel 2

Download DIVI nu!!!

Eksempel 3

Eksempel 4

Download DIVI nu!!!

Rul ned knapper Fuld bredde header design

Først vil vi skabe vores header-design i fuld bredde. Jeg bygger det fra bunden ved hjælp af designs fra gratis terapilayoutpakke tilgængelig i Divi . Opret en ny side og tilføj en header-modul i fuld bredde til en ny sektion i fuld bredde.

Se også: Divi: Sådan opretter du et flowchart med Blurb-modulet

Fuld bredde sektionsopdeler

Vi tilføjer en skillelinje til denne overskrift i fuld bredde. Åbn indstillingerne for sektion i fuld bredde .

Rul derefter ned til Divider . Klik på fanen Bund og vælg den 8. separatorstil. Indstil farven til #e5e8f0 og indtast 10vw for højden. Luk sektionsindstillingerne.

• Skillere: Lave
• Stil: 8. stil
• Farve: #e5e8f0
• Højde: 10vw

Overskriftstekst

Åbn derefter Fullwidth Header-modulet og tilføj din titel, undertekst og knaptekst. Fjern dummy-teksten for indhold af kroppen og lad den være tom.

• Titel: Start din rejse til at føle dig bedre i dag.
• Undertitel: Leslie Saindon, autoriseret terapeut
• Knap #1: Lav en aftale
• bodysuit: ingen

Header-billeder

Rul til Billeder og vælg et overskriftsbillede. Jeg vælger et billede, der følger med Pakke med terapilayout.

Header baggrund

Rul til Baggrund. Fjern baggrundsfarve og vælg fane Baggrundsgradient.

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

Aktiver Placer gradienten over baggrundsbilledet .

• Firkantet gradient over baggrundsbillede : JA

Overskriftsbaggrundsbillede i fuld bredde

Vælg derefterFanen Baggrundsbillede og vælg et fuldskærmsbillede. Jeg bruger et andet billede fra Therapy Layout Pack.

• Baggrundsbillede Position: Øverst i midten

Overskriftslayout i fuld bredde

Vælg derefterfanen design og aktivere Lav fuldskærm .

• Gør fuldskærm: JA

Rul ned ikon for overskrift i fuld bredde

Aktivér derefter Vis rulle ned-knap. Vi vil style denne knap i vores eksempler, så vi lader den være i standardindstillingerne indtil videre.

• Vis rulle ned-knap: JA

Sidehovedbillede

Rul derefter ned til Billede og ændre de øverste venstre afrundede hjørner til 200px for desktops. Indstil resten af ​​de afrundede hjørner til 0px. Skift afrundede hjørner til 100 pixels for tablets og telefoner.

• Billede afrundede hjørner:
  • Desktop: 200px øverst til venstre, 0px alle andre
  • Tablet og telefon: 100px øverst til venstre, 0px alle andre

Overskrifts titeltekst

Rul derefter ned til Titeltekst. Brug H1 til kursniveau. Vælg Cormorant Garamond som titelskrifttype, indstil vægten til fed og farven til #e1ecea.

• Titel:
  • Overskriftsniveau: H1
  • Skrifttype: Cormorant Garamond
  • Skrifttypevægt: Fed
  • Tekstfarve: #e1ecea

Indstil derefter taille for alle tre skærmstørrelser. Brug 90 pixels til stationære computere, 40 pixels til tablets og 24 pixels til telefoner. Skift linjehøjden til 1.1 em.

• Titeltekststørrelse: 90px, 40px, 24px
• Titellinjehøjde: 1,1 em

Undertekst i fuld bredde til overskrift

Rul derefter ned til Undertekst tekst. Skift skrifttypen til Inter, vægten til fed og farven til #e1ecea.

• Undertekst:
  • Skrifttype: Inter
  • Skrifttypevægt: Fed
  • Tekstfarve: #e1ecea

Indstil taille ved 22px for desktops, 20px for tablets og 16px for telefoner. Ændre det rækkehøjde ved 1,6 em.

• Undertekst tekststørrelse: 22px, 20px, 16px
• Undertekstlinjehøjde: 1,6 em

header knap

Rul ned til Indstillinger Knap en og aktivere Brug Custom Styles til Button One . Skift størrelsen til 14px, tekstfarven til #2e5b61 og baggrundsfarven til #e1ecea.

• Brug brugerdefinerede stilarter til knap XNUMX: JA
• Knap en
  • Tekststørrelse: 14px
  • Tekstfarve: #2e5b61
  • Baggrund: #e1ecea

Skift bredden af grænse ved 0px og radius af grænse ved 50px. Brug Inter til skrifttypen og skift vægten til halvfed skrift.

• Knap et:
  • Kantbredde: 0px
  • Kantradius: 50px
  • Skrifttype: Inter
  • Vægt: Fed

for knappolstring , brug 20px til top og bund og 40px til venstre og højre.

• Button One-polstring: 20 px top og bund, 40 px venstre og højre

Læs også: Divi: Sådan opretter du en Fluid Hero-sektion

Eksempler på scroll-ned-knapper

Nu hvor vi har vores overskrift i fuld bredde, lad os se, hvordan du tilpasser rulleknapperne. Vi vil se på fire eksempler med forskellige kombinationer af ikoner, farver og størrelser.

Rul ned-knapperne omfatter tre parametre. Hver indstilling kan justeres uafhængigt for hver skærmstørrelse. Parametre omfatter:

• Udvalg af ikoner – vælg mellem 11 ikoner. De inkluderer forskellige piledesigns med eller uden baggrund, inklusive ucirklede, cirklede og solide.
• farve – farvevælgeren Divi standarden.
• Størrelse – standard Divi-størrelsesjustering.

Det inkluderer også et CSS-felt på fanen Avanceret. 

Vi vil bruge alle disse parametre.

Se også: Divi: 5 overlejringer af masker og mønstre, der gælder for et baggrundsbillede

Eksempel #1

Til vores første eksempel bruger vi et ikon uden cirkel uden baggrund. Vælg det første ikon, skift farven til #e1ecea, og skift størrelsen til 66px for desktops, 60px for tablets og 50px for telefoner.

• Ikon: 1. ikon
• Farve: #e1ecea
• Størrelse: 66px (desktop og tablet), 50px (telefon)

Dette skaber en lysegrøn pil ned, der fungerer godt sammen med resten af ​​designet og skiller sig ud nok til at informere brugeren.

Eksempel 2

Til vores andet eksempel bruger vi et cirkuleret ikon. Vælg det syvende ikon og skift farven til #e8c553. Vi vil forstørre ikonet for denne. Skift størrelsen til 78px for desktops, 70px for tablets og 60px for telefoner.

• Ikon: 7. ikon
• Farve: #e8c553
• Størrelse: 78px (desktop), 70px (tablet), 60px (telefon)

Denne farve er en variation af den gule i layoutpakken, men er lysere og fungerer bedst på den grønne baggrund. Ikonet har skarpe hjørner, men cirklen matcher layoutets afrundede design.

Eksempel 3

Til vores tredje eksempel bruger vi et ikon, der har en cirkel omkring sig og en baggrund. Dette farver baggrunden og skaber ikonet med en blændeåbning, der afslører baggrundsbilledet af Websted. 

For de bedste resultater skal vi være meget opmærksomme på ikonstørrelsen og knapbaggrundsfarven.

Vælg det ottende ikon og skift dets farve til #0e4951. Indstil størrelsen til 60px for desktops, 56pc for tablets og 50px for telefoner.

• Ikon: 8. ikon
• Farve: #0e4951
• Størrelse: 60px (desktop), 56px (tablet), 50px (telefon)

Grøn er en mørkere nuance af grøn i baggrunden. Den mørkere nuance skiller sig ud mod det grønne og matcher stadig resten af ​​layoutet.

Eksempel 4

Hvad hvis du vil kombinere farver, så du har en baggrundsfarve bag udskæringsikonet? Vi kan gøre dette med CSS. 

I dette eksempel bruger vi CSS til at skabe en baggrundsform bag ikonet, der vises gennem udskæringsikonet. Selve ikonet vil bruge standardindstillingerne.

Vælg det ellevte ikon, og skift farven til #e1ecea. Vi sætter ikonet mindre for denne og laver en stor baggrundsform. Skift størrelsen til 50px for desktops, 40px for tablets og 30px for telefoner.

• Ikon: 11^ème
• Farve: #e1ecea
• Størrelse: 50px (desktop), 40px (tablet), 30px (telefon)

Gå derefter til fanen Avanceret og rul til feltet Rul ned knap og indtast denne CSS:

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

Dette CSS-format tilføjer polstring til toppen, højre, bund og venstre. Jeg brugte denne polstring til at skabe en baggrundsoval, der passer godt til headerdesignet ved hjælp af layoutdesignguider.

Resultater af de forskellige eksempler

Eksempel 1

Eksempel 2

Download DIVI nu!!!

Eksempel 3

Eksempel 4

Download DIVI nu!!!

Konklusion

Dette er vores oversigt over de fire rulle ned-knapper, du kan inkludere i dit Fullwidth Header Divi-modul. Rulleknappen indeholder flere ikoner at vælge imellem, og du kan indstille dens farve og størrelse. 

Ved at bruge CSS-feltet kan du tilpasse knappen yderligere. Kombinationerne af knapstilingsmuligheder og CSS giver dig masser af designmuligheder med dine rulleknapper.

Håber dette vil være nyttigt til din næste blogside. Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.

Du kan også konsultere vores ressourcer, hvis du har brug for flere elementer til at gennemføre dine projekter med oprettelse af internetsider.

Tøv ikke med også at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.

Men i mellemtiden del denne artikel på dine forskellige sociale netværk.

...