Divi: Det beste WordPress-temaet hele tiden!

mer 901.000 nedlastinger, Divi er det mest populære WordPress-temaet i verden. Den er komplett, enkel å bruke og leveres med mer enn 62 gratis maler.

Hvis du leter etter en måte å lage jevne animasjoner med Divis innebygde rulleeffekter, kommer du til å elske denne opplæringen. Vi viser deg hvordan du kombinerer rullebildet med Divis innebygde bevegelseseffekter for å lage seksjoner i full høyde som du kan bla gjennom på en gang. 

Vi begynner med å lage den første delen. Vi vil derfor bruke denne delen gjennom hele utformingen av siden vår. For å aktivere rulleknipsing bruker vi CSS-rulleknappegenskapene som vi tildeler seksjonene, HTML, topptekst og bunntekst på siden vår. 

Mulig utfall

Før vi dykker ned i opplæringen, la oss ta en rask titt på resultatet på forskjellige skjermstørrelser.

Divi scroll snapping desktop forhåndsvisning

1. Lag en ny side og begynn å designe den første delen

Legg til en ny side og bytt til Visual Builder

Start med å legge til en ny side. Skriv inn sidetittelen, publiser siden, og bytt til Visual Builder.

Legg til en divi-artikkel
Creation artikkel divi

Seksjonsinnstillinger

dimensjonering

Når du er inne på den nye siden, åpner du delen der og endrer størrelsesinnstillingene.

  • Min høyde: 100vh
Divi størrelse

Hovedelement

Vi legger også til to linjer med CSS-kode i seksjonen. Disse linjene med CSS-kode hjelper oss med å gjøre seksjonen om til et snappunkt for bla.

scroll-snap-align: start; scroll-snap-stop: normal;

Innhold css divi seksjon

synlighet

For å sikre at ingenting er utenfor seksjonsbeholderen, legger vi skjul på at avsnittet flyter over.

  • Horisontalt overløp: skjult
  • Vertikal overløp: skjult
Masuer seksjon divi

Legg til linje 1

Kolonne struktur

Fortsett å legge til en ny linje til seksjonen ved hjelp av følgende kolonnestruktur:

Velg kolonnestruktur

dimensjonering

Uten å legge til noen moduler ennå, åpner du radinnstillingene og endrer størrelsen på følgende måte:

  • Bruk tilpasset rennebredde: Ja
  • Rennebredde: 1
  • Bredde: 100%
  • Maks bredde: 100%
Kolonneavstandskonfigurasjon

Mellomrom

Vi fjerner også seksjonens standard polstring på topp og bunn.

  • Topp polstring: 0px
  • Bunn polstring: 0px
Konfigurer divi-avstand

Stilling

Og vi plasserer raden deretter:

  • Posisjon: Absolutt
  • Sted: Bunnsenter
Divi kolonneposisjonskonfigurasjon

Legg til tekstmodul i kolonnen

La innholdsboksen være tom

Den eneste modulen vi trenger i denne raden er en tekstmodul. Pass på at du lar innholdsboksen for modulen være tom.

Divi tekstmodul

Bakgrunnsfarge

Endre deretter bakgrunnsfargen.

Opprett enkelt nettstedet ditt med Elementor

Elementor lar deg lage Enkelt og gratis ethvert nettsted eller bloggdesign med et profesjonelt utseende. Slutt å betale mye for et nettsted du kan gjøre selv.

  • Bakgrunnsfarge: # ffee00
Divi bakgrunnsfarge tekstkonfigurasjon

Tekstinnstillinger

Vi fjerner også modulens tekstlinjehøyde.

  • Tekstlinje høyde: 1 em
Divi line høyde tekstjustering

Størrelse

Deretter går vi til størrelsesinnstillingene og endrer bredden.

  • Bredde: 30%
Avstand mellom Divi-tekstmodul

Mellomrom

Vi vil gjøre modulen om til en firkant ved å legge til litt topp polstring også.

  • Topp polstring: 30%
Intern avstandsmodul

Legg til rad 2

Kolonnestruktur

På neste linje. Bruk følgende kolonnestruktur:

Velg layoutlinje 2 divi

dimensjonering

Uten å legge til noen moduler ennå, åpne radinnstillingene og endre størrelsesinnstillingene i designfanen:

  • Bruk en tilpasset rennebredde: Ja
  • Rennesteinsbredde: 1
  • Bredde: 60vw
  • Maks bredde: 100%
Kolonn 2 divi-konfigurasjon

avstanden

Deretter legger du til en tilpasset toppmarge på forskjellige skjermstørrelser.

  • Toppmargin: 20vh (stasjonær), 5vw (nettbrett og telefon)
Divi kolonnemodulavstandskonfigurasjon

Kolonne 2 Avstand

Så vil vi åpne innstillingene i kolonne 2 og legge til tilpassede fyllingsverdier.

  • Øvre polstring: 2vh (nettbrett og telefon)
  • Venstre polstring: 2vw
  • Høyre polstring: 2vw
Kolonneavstandskonfigurasjon 2 divi-modul

Legg til en bildemodul i kolonne 1

Last opp bilde

Det er på tide å legge til mods, legge til et bildemodus i kolonne 1 og laste opp et bilde du ønsker.

Laster opp diiv-bilde

dimensjonering

Vi vil da tvinge full bredde på modulen.

  • Tving full bredde: Ja
Tving divi i full bredde

Legg til tekstmodul 1 i kolonne 2

Legg til H2-innhold

Ønsker du å selge produktene dine på internett?

Last ned WooCommerce gratis, de beste e-handelspluginene for å selge dine fysiske og digitale produkter på WordPress og enkelt lage din nettbutikk. Perfekt for nybegynnere.

I den andre kolonnen er den første modulen vi trenger en tekstmodul med H2-innhold.

Tekstmodulkolonne 2

H2 tekstinnstillinger

Gå til moduldesignfanen og endre H2-tekstinnstillingene som følger:

  • Overskrift 2 Font: Anton
  • Element 2 Tekststørrelse: 5vw (stasjonær), 7vw (nettbrett), 9vw (telefon)
Endre diiv font

Legg til tekstmodul 2 i kolonne 2

Legg til innhold

Legg til en annen tekstmodul like nedenfor den forrige og legg inn innholdet i beskrivelsen du ønsker.

Legg til innhold i divi-tekstmodulen

Tekstinnstillinger

Endre modulens tekstinnstillinger som følger:

  • Tekstfont: Åpen sans
  • Tekststørrelse: 0.8vw (stasjonær), 2vw (nettbrett), 2.5vw (telefon)
  • Tekstlinje høyde: 1,8 em
Divi-justeringskonfigurasjon

avstanden

Og legg til tilpasset topp- og bunnmargin i avstandsinnstillingene.

  • Øvre margin: 2vw
  • Bunnmargin: 2vw
Divi tekstmodul avstandskonfigurasjon

Legg til en knappmodul i 2-kolonnen

Legg til en kopi

Den neste og siste modulen vi trenger i denne kolonnen er en knappmodul. Legg til en kopi av ditt valg.

Legg til en divi-knapp

Knappinnstillinger

Stil knappen deretter:

  • Bruk egendefinerte stiler for knappen: Ja
  • Knapptekststørrelse: 1vw (skrivebord), 2vw (nettbrett), 3vw (telefon)
  • Tekstfarge på knapp: # 333333
  • Knapp kantfarge: # 333333
  • Knappradius: 1px
Divi-knappinnstillinger
  • Knappeskrift: Anton
  • Knapp Font Style: Store bokstaver
Divi-modul knappestil

avstanden

Og fullfør modulinnstillingene ved å legge til en tilpasset verdi basert på skjermstørrelser.

  • Høy intern margin: 1vw (stasjonær), 2vw (nettbrett), 3vw (telefon)
  • Lav intern margin: 1vw (stasjonær), 2vw (nettbrett), 3vw (telefon)
  • Venstre intern margin: 3vw (stasjonær), 5vw (nettbrett), 7vw (telefon)
  • Høyre internettmargin: 3vw (stasjonær), 5vw (nettbrett), 7vw (telefon)
Divi-knappavstandskonfigurasjon

2. Legg til rulleeffekter til forskjellige elementer

Tekstmodul på linje 1

Vertikal animasjon

Når alle elementene er på plass, er det på tide å legge til rulleeffektene. Åpne tekstmodulen i din første rad og bruk litt vertikal bevegelse.

  • Aktiver vertikal bevegelse: Ja
  • Start offset: 4
  • Midt offset: 0
  • Avsluttende forskyvning: -4
  • Motion Effect Trigger: Middle of Element
Divi tekstmodul animasjon

Linje nr. 2

Kolonne 1

Horisontal animasjon

Åpne deretter den første kolonnen på din andre rad og legg til en horisontal bevegelse.

  • Aktiver horisontal bevegelse: Ja
  • Start offset: -3
  • Gjennomsnittlig forskyvning: 0 (fra 40% til 60%)
  • Sluttforskyvning: -3
  • Trigger bevegelseseffekt: midten av elementet
Horisontal animasjon
Fade inn og ut

Vi bruker også en fade in og fade out effekt på den samme kolonnen.

  • Aktiver fade inn og ut: Ja
  • Opprinnelig opacitet: 0%
  • Gjennomsnittlig opacitet: 100%
  • Slutt uklarhet: 100%
  • Trigger bevegelseseffekt: midten av elementet
Fade animasjon

Kolonne 2

Horisontal bevegelse

Så vil vi åpne parametrene i den andre kolonnen og anvende følgende horisontale bevegelsesparametere:

  • Aktiver horisontal bevegelse: Ja
  • Start offset: 3
  • Gjennomsnittlig forskyvning: 0 (fra 40% til 60%)
  • Sluttforskyvning: 3
  • Trigger bevegelseseffekt: midten av elementet
Horisontal bevegelseskolonne 2
Fade inn og ut

Med en innkommende og utgående falming.

  • Aktiver fade inn og ut: Ja
  • Opprinnelig opacitet: 0%
  • Gjennomsnittlig opacitet: 100%
  • Slutt uklarhet: 100%
  • Trigger bevegelseseffekt: midten av elementet
Fondue-utgang

4. Gjenbruk den første delen

Klone seksjon fire ganger

Når du har fullført den første delen og rulleeffektene, kan du klone den så mange ganger du vil.

Klonseksjon

Endre bakgrunnsfargene til alle andre seksjoner

Vi vil endre bakgrunnsfargen på alle de andre delene.

  • Bakgrunnsfarge: # 111111

5. Legg til CSS-kode for å aktivere rullefangst på HTML-side

Legg til en kodemodul til den siste delen av siden

Nå for å aktivere rulleopptak på sidens HTML, skal vi legge til en kodemodul hvor som helst i den siste delen av siden vår.

Kodemodulinnføring

Sett inn HTML CSS-kode

Disse linjene med CSS-kode vil hjelpe oss med å bruke rullejusteringen på sidens HTML-kode:

<style> html {overflow-x: hidden;scroll-snap-type: y mandatory;scroll-snap-points-y: repeat(100vh);} </style>

Legg til Scroll Snapping Start i topptekst og bunntekst

Vi vil sørge for at topptekst og bunntekst også er rullefangstpunkter (akkurat som seksjonene våre) ved å legge til følgende linjer med CSS-kode:

topptekst, bunntekst {scroll-snap-align: start;}

Fullfør

I denne artikkelen har vi vist deg hvordan du lager jevne animasjoner ved å kombinere rulling snap med Divis innebygde bevegelseseffekter. Dette er en fin måte å aktivere rulleeffekter med bare en rulle. 

Scroll capture hjelper besøkende uanstrengt å navigere i forskjellige deler av nettstedet ditt. Vi kombinerte den med en seksjon i full høyde. Du kan også laste ned JSON-filen gratis! Hvis du har spørsmål eller forslag, er du velkommen til å legge igjen en kommentar i kommentarfeltet nedenfor.

0 aksjer
del
tweet
Enregistrer