Divi: Een scroll-down-knop opnemen in de Fullwidth Header-module

Wilt u toevoegen aan uw Fullwidth Header-module van: Divi een scroll-down-knop?

De Fullwidth Header-module van Divi bevat een knop die de gebruiker vertelt dat hij naar beneden kan scrollen. Zodra ze erop klikken, worden ze automatisch doorgestuurd naar de volgende sectie. Het is een eenvoudige knop met meerdere pictogrammen om uit te kiezen en de kleur en grootte zijn volledig aanpasbaar. 

In dit artikel zullen we zien hoe u het kunt aanpassen en zien we vier scroll-down-knoppen die u kunt opnemen in uw Fullwidth Header-module. We zullen ook zien hoe je het kunt aanpassen met CSS voor nog meer ontwerpopties.

Laten we beginnen!

Overzicht van scroll-down-knoppen

Laten we eerst eens kijken naar de ontwerpen die we in dit artikel gaan maken.

voorbeeld 1

Voorbeeld 2

Download DIVI nu!!!

Voorbeeld 3

Voorbeeld 4

Download DIVI nu!!!

Knoppen om naar beneden te scrollen Koptekstontwerp over de volledige breedte

Eerst maken we ons koptekstontwerp over de volledige breedte. Ik bouw het helemaal opnieuw met behulp van ontwerpen uit de gratis therapielay-outpakket beschikbaar in Divi . Maak een nieuwe pagina en voeg een . toe koptekstmodule over de volledige breedte naar een nieuwe sectie over de volledige breedte.

Zie ook: Divi: Een organigram maken met de Blurb-module

Sectieverdeler over de volledige breedte

We voegen een scheidingslijn toe voor deze koptekst over de volledige breedte. Open de instellingen van de sectie over de volledige breedte .

Scroll dan naar beneden naar verdeler . Klik op het tabblad Onder en kies de 8e scheidingstekenstijl. Stel de kleur in op #e5e8f0 en voer 10vw in voor de hoogte. Sluit de sectie-instellingen.

• Verdelers: Laag
• Stijl: 8e stijl
• Kleur: #e5e8f0
• Hoogte: 10vw

Koptekst

Open vervolgens de Fullwith Header-module en voeg uw titel, ondertitel en knoptekst toe. Verwijder de proeftekst voor de inhoud van het lichaam en laat het leeg.

• Titel: Begin je reis om je vandaag beter te voelen.
• Ondertitel: Leslie Saindon, gediplomeerd therapeut
• Knop #1: Maak een afspraak
• bodysuit: geen

Afbeeldingen koptekst

Scroll naar Afbeeldingen en kies een kopafbeelding. Ik kies een afbeelding die bij de Therapie-indelingspakket.

Koptekst achtergrond

Scroll naar Achtergrond. Achtergrondkleur verwijderen en tab selecteren Achtergrond verloop.

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

in staat stellen Plaats het verloop boven de achtergrondafbeelding .

• Vierkant verloop boven achtergrondafbeelding: JA

Achtergrondafbeelding koptekst op volledige breedte

Selecteer vervolgens deTabblad Achtergrondafbeelding en kies een afbeelding op volledig scherm. Ik gebruik een andere afbeelding uit het Therapy Layout Pack.

• Positie achtergrondafbeelding: midden boven

Koptekstindeling over de volledige breedte

Selecteer vervolgens deontwerp tabblad en activeer Volledig scherm maken .

• Volledig scherm maken: JA

Pictogram voor koptekst over volledige breedte scrollen

Activeer vervolgens Knop omlaag scrollen weergeven. We zullen deze knop in onze voorbeelden opmaken, dus we laten hem voorlopig in de standaardinstellingen.

• Toon Scroll Down-knop: JA

Header Afbeelding

Scroll dan naar beneden naar Beeld en verander de afgeronde hoeken linksboven in 200px voor desktops. Stel de rest van de afgeronde hoeken in op 0px. Verander afgeronde hoeken in 100 pixels voor tablets en telefoons.

• Afbeelding afgeronde hoeken:
  • Desktop: 200px linksboven, 0px alle anderen
  • Tablet en telefoon: 100px linksboven, 0px alle anderen

Koptekst titel

Scroll dan naar beneden naar Titel Tekst. Gebruik H1 voor koersniveau. Kies Cormorant Garamond als titellettertype, stel het gewicht in op Vet en de kleur op #e1ecea.

• Titel:
  • Koersniveau: H1
  • Lettertype: Aalscholver Garamond
  • Lettergewicht: Vet
  • Tekstkleur: #e1ecea

Stel dan de grootte voor alle drie de schermformaten. Gebruik 90 pixels voor desktops, 40 pixels voor tablets en 24 pixels voor telefoons. Verander de lijnhoogte in 1.1em.

• Titel tekstgrootte: 90px, 40px, 24px
• Hoogte titelregel: 1,1 em

Koptekst ondertiteling op volledige breedte

Scroll dan naar beneden naar Ondertitel tekst. Verander het lettertype in Inter, het gewicht in vet en de kleur in #e1ecea.

• Ondertitel:
  • Lettertype: Inter
  • Lettergewicht: Vet
  • Tekstkleur: #e1ecea

Definieer de grootte bij 22px voor desktops, 20px voor tablets en 16px voor telefoons. Verander het rijhoogte op 1,6 em.

• Tekstgrootte ondertitel: 22px, 20px, 16px
• Hoogte ondertitelregel: 1,6 em

koptekst knop

Scroll naar beneden naar Instellingen Knop een en activeer Gebruik aangepaste stijlen voor knop één . Wijzig de grootte in 14px, de tekstkleur in #2e5b61 en de achtergrondkleur in #e1ecea.

• Gebruik aangepaste stijlen voor knop één: JA
• Knop een
  • Tekstgrootte: 14px
  • Tekstkleur: #2e5b61
  • Achtergrond: #e1ecea

Verander de breedte van de grens op 0px en de straal van de grens op 50px. Gebruik Inter voor het lettertype en verander het gewicht in halfvet.

• Knop één:
  • Randbreedte: 0px
  • Grensstraal: 50px
  • Lettertype: Inter
  • Gewicht: Vet

voor knop vulling , gebruik 20px voor boven en onder en 40px voor links en rechts.

• Button One Padding: 20 px boven en onder, 40 px links en rechts

Lees ook: Divi: Hoe maak je een Fluid Hero-sectie aan

Voorbeelden van omlaag scrollen

Nu we onze header over de volledige breedte hebben, laten we eens kijken hoe we de scroll-down-knoppen kunnen aanpassen. We bekijken vier voorbeelden met verschillende combinaties van pictogrammen, kleuren en formaten.

De scroll-down-knoppen bevatten drie parameters. Elke instelling kan voor elke schermgrootte afzonderlijk worden aangepast. Parameters zijn onder meer:

• Selectie van pictogrammen – kies uit 11 iconen. Ze omvatten verschillende pijlontwerpen met of zonder achtergrond, inclusief niet-omcirkeld, omcirkeld en vast.
• Kleur – de kleurenkiezer Divi standaard.
• Maat – de standaard Divi maataanpassing.

Het bevat ook een CSS-veld op het tabblad Geavanceerd. 

We zullen al deze parameters gebruiken.

Zie ook: Divi: 5 overlays van maskers en patronen die van toepassing zijn op een achtergrondafbeelding

Voorbeeld 1

Voor ons eerste voorbeeld gebruiken we een niet-omcirkeld pictogram zonder achtergrond. Selecteer het eerste pictogram, verander de kleur in #e1ecea en wijzig de grootte in 66px voor desktops, 60px voor tablets en 50px voor telefoons.

• Icoon: 1e icoon
• Kleur: #e1ecea
• Grootte: 66px (desktop en tablet), 50px (telefoon)

Dit creëert een lichtgroene pijl naar beneden die goed past bij de rest van het ontwerp en voldoende opvalt om de gebruiker te informeren.

Voorbeeld 2

Voor ons tweede voorbeeld gebruiken we een omcirkeld pictogram. Selecteer het zevende pictogram en verander de kleur in #e8c553. We gaan het pictogram voor deze vergroten. Wijzig de grootte in 78px voor desktops, 70px voor tablets en 60px voor telefoons.

• Icoon: 7e icoon
• Kleur: #e8c553
• Grootte: 78px (bureaublad), 70px (tablet), 60px (telefoon)

Deze kleur is een variatie op het geel in het lay-outpakket, maar is lichter en werkt het beste op de groene achtergrond. Het pictogram heeft scherpe hoeken, maar de cirkel past bij het ronde ontwerp van de lay-out.

Voorbeeld 3

Voor ons derde voorbeeld gebruiken we een pictogram met een cirkel eromheen en een achtergrond. Dit kleurt de achtergrond en creëert het pictogram met een opening die de achtergrondafbeelding van de Site web. 

Voor de beste resultaten moeten we goed letten op de pictogramgrootte en de achtergrondkleur van de knop.

Selecteer het achtste pictogram en verander de kleur in # 0e4951. Stel de grootte in op 60px voor desktops, 56pc voor tablets en 50px voor telefoons.

• Icoon: 8e icoon
• Kleur: #0e4951
• Grootte: 60px (bureaublad), 56px (tablet), 50px (telefoon)

Groen is een donkerdere tint groen op de achtergrond. De donkere tint steekt af tegen het groen en past nog steeds bij de rest van de lay-out.

Voorbeeld 4

Wat als je kleuren wilt combineren zodat je een achtergrondkleur achter het uitgesneden icoon hebt? Dit kunnen we doen met CSS. 

Voor dit voorbeeld gebruiken we CSS om een ​​achtergrondvorm achter het pictogram te maken die door het uitgesneden pictogram wordt weergegeven. Het pictogram zelf gebruikt de standaardinstellingen.

Selecteer het elfde pictogram en verander de kleur in #e1ecea. We zullen het pictogram voor deze kleiner maken en een grote achtergrondvorm maken. Wijzig de grootte in 50px voor desktops, 40px voor tablets en 30px voor telefoons.

• Icoon: 11^Eme
• Kleur: #e1ecea
• Grootte: 50px (bureaublad), 40px (tablet), 30px (telefoon)

Ga dan naar het tabblad Geavanceerd en scroll naar het veld Scroll naar beneden knop en voer deze CSS in:

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

Deze CSS-indeling voegt opvulling toe aan de boven-, rechter-, onder- en linkerzijde. Ik heb deze opvulling gebruikt om een ​​achtergrondovaal te maken dat goed past bij het ontwerp van de kop met behulp van lay-outontwerpgidsen.

Resultaten van de verschillende voorbeelden

Voorbeeld 1

Voorbeeld 2

Download DIVI nu!!!

Voorbeeld 3

Voorbeeld 4

Download DIVI nu!!!

Conclusie

Dit is ons overzicht van de vier scroll-omlaagknoppen die u kunt opnemen in uw Fullwidth Header Divi-module. De schuifknop bevat verschillende pictogrammen waaruit u kunt kiezen en u kunt de kleur en grootte ervan instellen. 

Door het CSS-veld te gebruiken, kunt u de knop verder aanpassen. De combinaties van opties voor het stylen van knoppen en CSS geven je veel ontwerpmogelijkheden met je scroll-down-knoppen.

Ik hoop dat dit nuttig zal zijn voor uw volgende blogsite. Als u zich zorgen maakt of suggesties heeft, kunt u ons vinden in het commentaar gedeelte om het te bespreken.

U kunt ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren.

Aarzel niet om ook onze gids te raadplegen over de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.

Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.

...