At skabe scroll-effekter ved hjælp af Section Divider er en enkel og sjov teknik, der kan tilføje liv til din Websted bruger WordPress tema Divi. En sektionsopdeler er fortsat et alsidigt designelement, nyttigt til at tilføje et strejf af kreativitet til dine overgange af indhold af siden. 

Men med Divis rulleeffekter bliver sektionsopdelere endnu mere interessante! Tricket er at isolere en sektion dedikeret til den valgte skillelinje. Derefter kan du tilføje alle slags scroll-genererede bevægelser til sektionen for at skabe smukke scroll-effekter som baggrund for indhold side.

Lad os starte!

Muligt resultat

Her er en oversigt over de designs, vi kan opnå efter at have gennemført denne tutorial.

Divi animation

Sådan oprettes animerede divisionsdelere med rulle med Divi

Oprettelse af de to indholdssektioner

Tilføj en række

For at starte skal du oprette en række med en kolonne i standardsektionen.

Tilføj divi sektion

Sektionsmargin (til test)

Til testformål skal du tilføje en topmargen til sektionen, så vi kan få plads til at rulle. Åbn sektionsindstillingerne, og tilføj følgende:

  • Øverste margen: 80vh
Konfigurer afstand for divisionssnit

Tilføj et tekstmodul

I rækken af ​​en kolonne skal du tilføje et nyt tekstmodul.

Divi-tekstmodul

Tekstmodulets indhold

Inden i indhold af kroppen skal du tilføje følgende H2-overskrift:

<h2>Section Avec Séparateurs</h2>

Sektion med skillevæg

Tekstmoduldesign

Opdater følgende under designindstillingerne:

  • Tekst font: Roboto
  • Justering af teksten: center
  • Punkt 2 Tekstfarve: # bae0d8
  • Header 2 Tekststørrelse: 80px (desktop), 50px (tablet), 30px (telefon)
Divi font konfiguration

Tilføj et andet indholdssektion

Under det foregående afsnit skal du tilføje et nyt regelmæssigt afsnit.

divider sektions divider rulleeffekter

Tilføj en række

I det nye afsnit skal du tilføje en række til en kolonne.

Tilføj divi sektion 1

Tilføj et tekstmodul

Føj derefter et nyt tekstmodul til linjen.

Tilføj divi-tekstmodul

Tekstmoduldesign

Vi kan opbevare standardpolstringsindholdet inde i kroppen for nu. Lad os gå videre til designfanen og opdatere følgende:

  • Tekst font: Roboto
  • Tekstfarve: #dddddd
  • Tekststørrelse: 16px
  • Tekstlinjehøjde: 1,5 em
  • Tekstjustering: venstre
  • Maksimal bredde: 400 px
  • Justering af modulet: center
Tilpas tekststil divi-modul

Sektionsindstillinger

Sørg for at fjerne sektionens standard baggrundsfarve, men giv den en helt gennemsigtig baggrund. Derefter kan vi fjerne den øverste polstring og tilføje en nederste margen til scrolltestformål.

For at gøre dette skal du åbne sektionsindstillingerne og opdatere følgende:

  • Baggrundsfarve: rgba (0,0,0,0)
  • Nederste margen: 80vh
  • Padding: 0px
Divi afstandsafsnit konfiguration

Oprettelse af den animerede sektionsseparator

Når to indholdssektioner er afsluttet, er vi klar til at tilføje sektionen til vores animerede sektionsdelere.

Tilføj en ny sektion

Gå videre og opret en ny regelmæssig sektion midt i de to indholdssektioner.

Tilføj almindelig sektionsdel

Kontekst af sektionen

Fjern igen sektionens standard baggrundsfarve, men opdater følgende:

  • Baggrundsfarve: rgba (0,0,0,0)
Personlig baggrundsafsnit divi

Sektion divider design

Bare rolig, vi opretter vores baggrundsfarve med sektionsdelerne. For at gøre dette skal du klikke på designfanen og tilføje en øvre og nedre skillevæg til sektionen som følger:

Superior divider design

  • Topdeler-stil: se skærmbillede
  • Farve på øverste skillelinje: # 524fbf
  • Øvre dividerhøjde: 20vw
  • Horisontal gentagelse af den øverste skillelinje: 0,6x
  • Flip af den øverste skillelinje: vandret
Divi sektion kantkonfiguration

Design af lavere divider

  • Nederste skillevægsstil: se skærmbillede
  • Nedre separatorfarve: # 524fbf
  • Højde på den nedre skillelinje: 20vw
  • Horisontal gentagelse af den nedre skillelinje: 0,5x
  • Nedre delevridning: vandret og lodret
Nederste divi-vælger
Sektionens højde og polstring

Da dette afsnit kun er beregnet til skillevægsdesign, kan vi slippe af med højden og polstringen, så kun skillevægstypen vises, og der ikke kommer unødvendigt mellemrum mellem de to indholdssektioner. Opdater følgende:

  • Højde: 0px
  • Polstring: 0px høj, 0px lav
Divi med lav skille sektion
Sektionsseparatorens rulleffekter

Giv derefter sektionen følgende rulleeffekter:

Under fanen Horisontal bevægelse ...

  • Aktivér vandret bevægelse: YES

Vi kan beholde standardindstillingerne for denne med henblik på bureau .

Vandret rulle divi

Opdater derefter de vandrette parametre for bevægelse på tablette :

  • Start offset: 3 (ved 0% af vinduet)
  • Gennemsnitlig forskydning: 0 (ved 50% af visningen)
  • End offset: -3 (ved 100% af visningen)
Vandret forureningstabel divi

Under fanen Skalering op og ned effekt , opdater følgende på bureau ...

  • Startskala: 200% (ved 0% af vinduet)
  • Gennemsnitlig skala: 150% (ved 45% -65% af visningen)
  • Afslutningsskala: 150% (ved 100% af visningen)
Layoutkonfiguration

Opdater derefter opskalering og nedeffekt på tablette som følger:

  • Startskala: 400% (ved 0% af vinduet)
  • Gennemsnitlig skala: 300% (ved 45% -65% af visningen)
  • Afslutningsskala: 400% (ved 100% af visningen)

Hovedårsagen til, at vi har brug for at justere bevægelseseffekterne på tabletten (og telefonen), skyldes de vandrette bevægelsesværdier ved hjælp af pixel længdeenheder (dvs. 3 = 300 pixels), som er absolut og tilpas ikke til browserens bredde.

Lad os nu se det endelige resultat af vores rullende animationssektionsdeler.

Mulig slutresultat divi

endelige tanker

Animering af sektionsdelere på rullen er en sjov og effektiv måde at bringe en webside til liv. Håber dette giver dig inspiration til at udløse endnu mere kreative designs selv.