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.
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.
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
Tilføj et tekstmodul
I rækken af en kolonne skal du tilføje et nyt tekstmodul.
Tekstmodulets indhold
Inden i indhold af kroppen skal du tilføje følgende H2-overskrift:
<h2>Section Avec Séparateurs</h2>
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)
Tilføj et andet indholdssektion
Under det foregående afsnit skal du tilføje et nyt regelmæssigt afsnit.
Tilføj en række
I det nye afsnit skal du tilføje en række til en kolonne.
Tilføj et tekstmodul
Føj derefter et nyt tekstmodul til linjen.
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
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
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.
Kontekst af sektionen
Fjern igen sektionens standard baggrundsfarve, men opdater følgende:
- Baggrundsfarve: rgba (0,0,0,0)
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
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
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
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 .
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)
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)
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.
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.