Å lage rulleeffekter ved hjelp av Section Divider er en enkel og morsom teknikk som kan gi liv til deg nettstedet Web bruker WordPress tema Divi. En seksjonsdeler fortsetter å være et allsidig designelement, nyttig for å legge til et snev av kreativitet til overgangene dine innhold av siden.
Men med Divis rulleeffekter blir seksjonsdelere enda mer interessante! Trikset er å isolere en seksjon dedikert til den valgte skillestilen. Deretter kan du legge til alle slags rullegenererte bevegelser til delen for å lage vakre rulleeffekter som bakgrunn for innhold siden.
La oss starte!
Mulig utfall
Her er en oversikt over designene som vi vil kunne oppnå etter å ha fullført denne opplæringen.
Slik oppretter du animerte delingsruller med Divi
Opprettelse av de to innholdsseksjonene
Legg til en rad
For å starte, oppretter du en rad med en kolonne i standardseksjonen.
Seksjonsmargin (for tester)
For testformål, legg til en toppmargin i seksjonen slik at vi kan ha plass til å bla. Åpne seksjonsinnstillingene og legg til følgende:
- Toppmargin: 80vh
Legg til en tekstmodul
Legg til en ny tekstmodul på raden i en kolonne.
Innholdet i tekstmodulen
Inni innhold av kroppen, legg til følgende H2-overskrift:
<h2>Section Avec Séparateurs</h2>
Tekstmoduldesign
Oppdater følgende under designinnstillingene:
- Tekst font: Roboto
- Justering av teksten: senter
- Punkt 2 Tekstfarge: # bae0d8
- Header 2 Tekststørrelse: 80px (stasjonær), 50px (nettbrett), 30px (telefon)
Legg til en andre innholdsseksjon
Under den forrige delen legger du til en ny vanlig seksjon.
Legg til en rad
I den nye delen legger du til en rad i en kolonne.
Legg til en tekstmodul
Legg deretter til en ny tekstmodul på linjen.
Tekstmoduldesign
Vi kan holde standard polstringsinnhold inne i kroppen for nå. La oss gå videre til designfanen og oppdatere følgende:
- Tekst font: Roboto
- Tekstfarge: #dddddd
- Tekststørrelse: 16px
- Tekstlinje høyde: 1,5 em
- Tekstinnretting: venstre
- Maksimal bredde: 400 px
- Justering av modulen: senter
Seksjonsinnstillinger
Sørg for å fjerne seksjonens standard bakgrunnsfarge, men gi den en helt gjennomsiktig bakgrunn. Deretter kan vi fjerne den øverste polstringen og legge til en bunnmargin for rulletestformål.
For å gjøre dette, åpne seksjonsinnstillingene og oppdater følgende:
- Bakgrunnsfarge: rgba (0,0,0,0)
- Bunnmargin: 80vh
- Padding: 0px
Oppretting av den animerte seksjonsseparatoren
Når to innholdsseksjoner er fullført, er vi klare til å legge til seksjonen for de animerte seksjonsdelerne.
Legg til en ny seksjon
Gå videre og lag en ny vanlig seksjon midt i de to innholdsseksjonene.
Konteksten til seksjonen
Og igjen, fjern seksjonens standard bakgrunnsfarge, men oppdater følgende:
- Bakgrunnsfarge: rgba (0,0,0,0)
Seksjonsdelere design
Ikke bekymre deg, vi lager bakgrunnsfargen vår med seksjonsdeler. For å gjøre dette, klikk på designfanen og legg til en øvre og nedre skillelinje i seksjonen som følger:
Overlegen skilledesign
- Top Divider Style: se skjermbilde
- Farge på øvre skillelinje: # 524fbf
- Overdelens høyde: 20vw
- Horisontal repetisjon av øvre skillelinje: 0,6x
- Vipp av øvre skillelinje: vannrett
Nedre skillelinje design
- Bunndeler stil: se skjermbilde
- Nedre separatorfarge: # 524fbf
- Nedre delers høyde: 20vw
- Horisontal repetisjon av nedre skillelinje: 0,5x
- Nedre delevinkling: vannrett og vertikal
Seksjonshøyde og polstring
Siden denne delen bare er beregnet på skillelinjen, kan vi kvitte oss med høyden og polstringen slik at bare skillelinjen vises og det ikke kommer unødvendig mellomrom mellom de to innholdsseksjonene. Oppdater følgende:
- Høyde: 0px
- Polstring: 0px høy, 0px lav
Seksjonens separatorrolleeffekter
Gi deretter seksjonen følgende rulleeffekter:
Under fanen Horisontal bevegelse ...
- Aktiver horisontal bevegelse: YES
Vi kan beholde standardinnstillingene for denne på visningen av byrå .
Oppdater deretter de horisontale bevegelsesparametrene på Tabl :
- Start offset: 3 (ved 0% av vinduet)
- Gjennomsnittlig forskyvning: 0 (ved 50% av visningen)
- Sluttforskyvning: -3 (ved 100% av visningen)
Under fanen Skaler opp og ned effekt , oppdater følgende på byrå ...
- Startskala: 200% (ved 0% av vinduet)
- Gjennomsnittlig skala: 150% (ved 45% -65% av visningen)
- Sluttskala: 150% (ved 100% av visningen)
Oppdater deretter Scaling Up and Down effect på Tabl som følger:
- Startskala: 400% (ved 0% av vinduet)
- Gjennomsnittlig skala: 300% (ved 45% -65% av visningen)
- Sluttskala: 400% (ved 100% av visningen)
Hovedårsaken til at vi trenger å justere bevegelseseffektene på nettbrettet (og telefonen) skyldes de horisontale bevegelsesverdiene som bruker pikselengdeenheter (dvs. 3 = 300 piksler), som er absolutt og ikke juster til nettleserens bredde.
La oss nå se det endelige resultatet av vår rullende animerte seksjonsdelere.
avslutt~~POS=TRUNC tanker
Animering av seksjonsdelere på rullen er en morsom og effektiv måte å få en webside til liv. Håper dette gir deg litt inspirasjon til å utløse enda mer kreative design selv.
