Divi: Hur man inkluderar en rullningsknapp i fullbreddshuvudmodulen

Vill du lägga till din Fullwidth Header-modul av Divi en rullningsknapp?

Fullwidth Header-modulen för Divi innehåller en knapp som talar om för användaren att de kan scrolla ner. När de klickar på den omdirigeras de automatiskt till nästa avsnitt. Det är en enkel knapp med flera ikoner att välja mellan och dess färg och storlek är helt anpassningsbara. 

I den här artikeln ser vi hur du anpassar den och ser fyra rullningsknappar som du kan inkludera i din Fullwidth Header-modul. Vi kommer också att se hur du anpassar den med CSS för ännu fler designalternativ.

Låt oss börja!

Översikt över rullningsknappar

Låt oss först titta på designen vi kommer att skapa i den här artikeln.

Exempel 1

Exempel 2

Ladda ner DIVI nu!!!

Exempel 3

Exempel 4

Ladda ner DIVI nu!!!

Rulla ned knappar Full bredd header design

Först skapar vi vår design i full bredd. Jag bygger det från grunden med hjälp av mönster från gratis terapilayoutpaket tillgängligt i Divi . Skapa en ny sida och lägg till en fullbreddshuvudmodul till en ny sektion i full bredd.

Se även: Divi: Hur man skapar ett organisationsschema med Blurb-modulen

Sektionsavdelare i full bredd

Vi lägger till en avdelare för den här rubriken i full bredd. Öppna inställningarna för full breddsektion .

Scrolla sedan ner till divider . Klicka på fliken Botten och välj den åttonde separatorstilen. Ställ in färgen på #e8e5f8 och ange 0vw för höjden. Stäng avsnittsinställningarna.

• Avdelare: Låg
• Stil: 8:e stilen
• Färg: #e5e8f0
• Höjd: 10vw

Rubrik

Öppna sedan modulen Fullwidth Header och lägg till din titel, underrubrik och knapptext. Ta bort dummytexten för innehåll av kroppen och lämna den tom.

• Titel: Börja din resa till att må bättre idag.
• Undertitel: Leslie Saindon, legitimerad terapeut
• Knapp #1: Boka ett möte
• bodysuit: ingen

Sidhuvudbilder

Bläddra till Bilder och välj en huvudbild. Jag väljer en bild som medföljer Terapi Layout Pack.

Rubrik bakgrund

Bläddra till Bakgrund. Ta bort bakgrundsfärg och välj flik Bakgrundsgradient.

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

aktivera Placera gradienten ovanför bakgrundsbilden .

• Fyrkantig gradient ovanför bakgrundsbild : JA

Full bredd header bakgrundsbild

Välj sedanFliken Bakgrundsbild och välj en helskärmsbild. Jag använder en annan bild från Therapy Layout Pack.

• Bakgrundsbild Position: Överst i mitten

Sidhuvudlayout i full bredd

Välj sedandesignfliken och aktivera Gör helskärm .

• Gör helskärm: JA

Hela bredd rubrik rulla ned ikon

Aktivera sedan Visa Scroll Down-knappen. Vi kommer att utforma den här knappen i våra exempel, så vi lämnar den i standardinställningarna tills vidare.

• Visa Scroll Down-knapp: YES

Rubrikbild

Scrolla sedan ner till Bild och ändra de övre vänstra rundade hörnen till 200px för stationära datorer. Ställ in resten av de rundade hörnen till 0px. Ändra rundade hörn till 100 pixlar för surfplattor och telefoner.

• Bild rundade hörn:
  • Desktop: 200px uppe till vänster, 0px alla andra
  • Surfplatta och telefon: 100px uppe till vänster, 0px alla andra

Rubriktiteltext

Scrolla sedan ner till Titeltext. Använd H1 för kursnivå. Välj Cormorant Garamond som titeltypsnitt, ställ in vikten till Fet och färgen till #e1ecea.

• Titel:
  • Rubriknivå: H1
  • Typsnitt: Skarv Garamond
  • Teckensnittsvikt: Fet
  • Textfärg: #e1ecea

Ställ sedan in Taille för alla tre skärmstorlekarna. Använd 90 pixlar för stationära datorer, 40 pixlar för surfplattor och 24 pixlar för telefoner. Ändra linjehöjden till 1.1 em.

• Titeltextstorlek: 90px, 40px, 24px
• Titelradshöjd: 1,1 em

Underrubrik i full bredd

Scrolla sedan ner till Undertext. Ändra teckensnittet till Inter, vikten till fetstil och färgen till #e1ecea.

• Texta:
  • Typsnitt: Inter
  • Teckensnittsvikt: Fet
  • Textfärg: #e1ecea

Ställ in Taille vid 22px för stationära datorer, 20px för surfplattor och 16px för telefoner. Ändra det Radhöjd vid 1,6 em.

• Textstorlek: 22px, 20px, 16px
• Textlinjehöjd: 1,6 em

rubrikknapp

Rulla ned till Inställningar Knapp ett och aktivera Använd anpassade stilar för knapp ett . Ändra storleken till 14px, textfärgen till #2e5b61 och bakgrundsfärgen till #e1ecea.

• Använd anpassade stilar för knapp ett: JA
• Knapp ett
  • Textstorlek: 14px
  • Textfärg: #2e5b61
  • Bakgrund: #e1ecea

Ändra bredden på gräns vid 0px och radien för gräns vid 50px. Använd Inter för typsnittet och ändra vikten till halvfet.

• Knapp ett:
  • Kantbredd: 0px
  • Kantradie: 50px
  • Typsnitt: Inter
  • Vikt: Fet

Pour le knappstoppning , använd 20px för topp och botten och 40px för vänster och höger.

• Button One-stoppning: 20 px upptill och nedtill, 40 px vänster och höger

Läs också: Divi: Hur man skapar en Fluid Hero-sektion

Exempel på rullningsknappar

Nu när vi har vår fullbreddshuvud, låt oss se hur man anpassar rullningsknapparna. Vi ska titta på fyra exempel med olika kombinationer av ikoner, färger och storlekar.

Rullningsknapparna innehåller tre parametrar. Varje inställning kan justeras oberoende för varje skärmstorlek. Parametrar inkluderar:

• Urval av ikoner – välj bland 11 ikoner. De inkluderar olika pildesigner med eller utan bakgrund, inklusive oinringade, inringade och solida.
• Färg – färgväljaren Divi standard.
• storlek – Standard Divi-storleksjustering.

Den innehåller också ett CSS-fält på fliken Avancerat. 

Vi kommer att använda alla dessa parametrar.

Se även: Divi: 5 överlägg av masker och mönster som är applicerbara på en bakgrundsbild

Exempel #1

För vårt första exempel kommer vi att använda en oinringad ikon utan bakgrund. Välj den första ikonen, ändra färgen till #e1ecea och ändra storleken till 66px för stationära datorer, 60px för surfplattor och 50px för telefoner.

• Ikon: 1:a ikonen
• Färg: #e1ecea
• Storlek: 66px (dator och surfplatta), 50px (telefon)

Detta skapar en ljusgrön nedåtpil som fungerar bra med resten av designen och sticker ut tillräckligt för att informera användaren.

Exempel 2

För vårt andra exempel använder vi en inringad ikon. Välj den sjunde ikonen och ändra färgen till #e8c553. Vi kommer att förstora ikonen för den här. Ändra storleken till 78px för stationära datorer, 70px för surfplattor och 60px för telefoner.

• Ikon: 7:e ikonen
• Färg: #e8c553
• Storlek: 78px (Skrivbord), 70px (Surfplatta), 60px (Telefon)

Den här färgen är en variant av den gula i layoutpaketet, men är ljusare och fungerar bäst på den gröna bakgrunden. Ikonen har skarpa hörn, men cirkeln matchar layoutens rundade design.

Exempel 3

För vårt tredje exempel använder vi en ikon som har en cirkel runt sig och en bakgrund. Detta färgar bakgrunden och skapar ikonen med en bländare som avslöjar bakgrundsbilden av webbplats. 

För bästa resultat måste vi vara mycket uppmärksamma på ikonstorleken och knappens bakgrundsfärg.

Välj den åttonde ikonen och ändra dess färg till #0e4951. Ställ in storleken på 60px för stationära datorer, 56px för surfplattor och 50px för telefoner.

• Ikon: 8:e ikonen
• Färg: #0e4951
• Storlek: 60px (Skrivbord), 56px (Surfplatta), 50px (Telefon)

Grönt är en mörkare nyans av grönt i bakgrunden. Den mörkare nyansen sticker ut mot det gröna och matchar fortfarande resten av layouten.

Exempel 4

Vad händer om du vill kombinera färger så att du har en bakgrundsfärg bakom utklippsikonen? Vi kan göra detta med CSS. 

I det här exemplet kommer vi att använda CSS för att skapa en bakgrundsform bakom ikonen som visas genom utklippsikonen. Själva ikonen kommer att använda standardinställningarna.

Välj den elfte ikonen och ändra färgen till #e1ecea. Vi gör ikonen mindre för den här och gör en stor bakgrundsform. Ändra storleken till 50px för stationära datorer, 40px för surfplattor och 30px för telefoner.

• Ikon: 11^th
• Färg: #e1ecea
• Storlek: 50px (Skrivbord), 40px (Surfplatta), 30px (Telefon)

Gå sedan till fliken Advanced Open water och bläddra till fältet Scroll ned-knappen och ange denna CSS:

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

Detta CSS-format lägger till utfyllnad till toppen, höger, botten och vänster. Jag använde den här stoppningen för att skapa en bakgrund oval som passar bra med rubrikdesignen med hjälp av layoutdesignguider.

Resultat av de olika exemplen

Exempel 1

Exempel 2

Ladda ner DIVI nu!!!

Exempel 3

Exempel 4

Ladda ner DIVI nu!!!

Slutsats

Det här är vår översikt över de fyra rullningsknapparna som du kan inkludera i din Fullwidth Header Divi-modul. Bläddringsknappen innehåller flera ikoner att välja mellan och du kan ställa in dess färg och storlek. 

Genom att använda CSS-fältet kan du anpassa knappen ytterligare. Kombinationerna av knappstilsalternativ och CSS ger dig massor av designmöjligheter med dina rullningsknappar.

Hoppas detta kommer att vara användbart för din nästa bloggsida. Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.

Du kan också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser.

Tveka inte att också konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.

Men under tiden dela den här artikeln på dina olika sociala nätverk.

.