Siden, der taler om dig (om), er en af ​​de vigtigste sider på din Websted. Dette giver folk mulighed for at lære dig bedre at kende og beslutte, om de er trygge ved at tage det næste skridt. Hvis du leder efter en nem måde at inkludere fortælling på denne side, vil du elske denne tutorial. Vi vil bruge Divi's rulleeffekter til at skabe en jævn beretningsovergang på scroll. Så snart en del af historien forsvinder, dukker en anden del op. Dette giver besøgende følelsen af ​​at læse en interessant historie. 

Muligt slutresultat

Før vi dykker ned i vejledningen, lad os se på resultatet på forskellige skærmstørrelser.

1. Opret den første fuldskærmsafsnit på siden

Tilføj en ny sektion

Baggrundsfarve

Start med at tilføje et første afsnit til din Om-side. Åbn sektionsindstillingerne, og skift baggrundsfarven til sort.

• Baggrundsfarve: # 000000

dimensionering

Drej derefter sektionen til fuld skærm ved at tilføje en minimumshøjde i størrelsesparametrene.

• Min højde: 100vh

2. Tilføj en animeret linje

Tilføj en ny linje

Kolonne struktur

Føj derefter en ny række til dit afsnit ved hjælp af følgende kolonnestruktur:

dimensionering

Åbn linjeparametrene, og lad linjen optage hele bredden af ​​sektionsbeholderen ved at ændre dimensioneringsparametrene.

• Bredde: 100%
• Maks bredde: 100%

afstand

Tilføj derefter venstre og højre udfyldning på forskellige skærmstørrelser.

• Venstre polstring: 20vw (skrivebord), 10vw (tablet og telefon)
• Højre polstring: 20vw (skrivebord) 10vw (tablet og telefon)

Animation

For at øge historiefortællingseffekten bruger vi også en fade-animation til linjen.

• Animationsstil: Fade
• Animationsvarighed: 3000ms
• Animationshastighedskurve: let ind-ud
• Gentagelse af animation: en gang

Position

Endelig vil vi sørge for, at linjen er placeret i midten af ​​sektionsbeholderen ved at ændre positionsindstillingerne.

• Position: absolut
• Placering: Center

3. Indsæt en titel med rulleeffekter

Føj tekstmodul nr. 1 til kolonnen

Tilføj H1 indhold

Det eneste modul vi skal bruge i denne linje er et tekstmodul med indhold H1.

Titel 1 Tekstindstillinger

Gå til fanen til moduldesign, og skift indstillingerne for H1-tekst som følger:

• Titeltype: Nunito
• Vægt på titeltype: Semi-fed
• Sidehovedtekstfarve: #ffffff
• Overskriftstekststørrelse: 7vw (desktop), 9vw (tablet), 11vw (telefon)

Lodret bevægelse

Vi vil også tilføje en subtil lodret animation.

• Aktivér lodret bevægelse: Ja
• Start offset: 0 (ved 50%)
• Gennemsnitlig forskydning: 10 (ved 100%)
• Sidste offset: 10

Indgående og udgående rulningseffekt

Med en indgående og udgående falmende effekt.

• Aktivér fade ind og ud: Ja
• Indledende opacitet: 100%
• Gennemsnitlig opacitet: 100% (ved 55%)
• Endeopacitet: 0% (til 62%)

Skalering af rulleeffekten op og ned

Sidst men ikke mindst bruger vi også en rulleeffekt op og ned i skalaen.

• Aktiver skalering op og ned: Ja
• Startskala: 100% (til 40%)
• Gennemsnitlig skala: 95% (til 74%)
• Slutskala: 90%

4. Klon et helt afsnit én gang og inkluder beskrivelsesteksten med rulleeffekter

Rediger titel og indhold

Når du har gennemført det første afsnit, kan du klone det helt. Åbn tekstmodulet i beholderen til duplikatafsnittet, og brug en H2-kopi.

Rediger tekstparametrene for H2 Tekstmodulet

Skift H2-tekstindstillinger i overensstemmelse hermed:

• Afsnit 2 Politi: Nunito
• Skrifttitel 2: semi-fed
• Punkt 2 Tekstfarve: #ffffff
• Element 2 Tekststørrelse: 5vw (desktop), 7vw (tablet), 8vw (telefon)
• Linje 2: 1 em (kontor), 1.2 em (tablet og telefon)

Føj tekstmodul nr. 2 til kolonnen

Tilføj indhold

Tilføj derefter endnu et tekstmodul til kolonnen med en indhold beskrivelse af dit valg.

Tekstindstillinger

Skift tekstindstillingerne for tekstmodulet som følger:

• Tekst font: Open Sans
• Tekstfarve: #ffffff
• Tekststørrelse: 1vw (desktop), 2.5vw (tablet), 3vw (telefon)
• Tekstlinjehøjde: 3.1 em (skrivebord), 2.5 em (tablet og telefon)

afstand

Brug også en øverste margen.

• Øvre margen: 8vw

Indgående og udgående rulningseffekt

Skift derefter til rulleeffekter i den avancerede fane og brug følgende indstillinger for udtoning og udtoning:

• Aktivér fade ind og ud: Ja
• Indledende opacitet: 100%
• Gennemsnitlig opacitet: 0% (ved 31%)
• Endelig opacitet: 0% (til 35%)

Skalering af rulleeffekten op og ned

Tilføj også en skaleringseffekt.

• Aktiver skalering op og ned: Ja
• Startskala: 100% (til 40%)
• Gennemsnitlig skala: 95% (til 74%)
• Slutskala: 90%

Du kan nu klone denne sidste sektion så mange gange som muligt. Du bliver dog nødt til at justere indhold af hver sektion til dine behov.

undersøgelse

Nu hvor vi har gennemgået alle trinene, lad os tage et sidste kig på, hvordan det ser ud på forskellige skærmstørrelser.

endelige tanker

I denne artikel viste vi dig, hvordan du fortæller en historie på din om-side ved hjælp af Divis indbyggede rulleeffekter. Den effekt, vi skabte, tillader den fortløbende kopi at fade ind og ud, hvilket giver besøgende som at læse en historie. Du var også i stand til at downloade JSON-filen gratis! Hvis du har spørgsmål eller forslag, er du velkommen til at efterlade en kommentar i kommentarfeltet nedenfor.