Gå till innehållet

Hur man skapar en bläddraanimering på Divi

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Om dig-sidan är en av de viktigaste sidorna på din webbplats. Detta gör att människor kan lära känna dig bättre och bestämma om de är bekväma att ta nästa steg. Om du letar efter ett enkelt sätt att ta med berättande på den här sidan kommer du att älska den här handledningen. Vi använder Divis rullningseffekter för att skapa en smidig berättande övergång på rullningen. Så snart en del av berättelsen bleknar, dyker en annan del upp. Det ger besökarna en känsla av att läsa en intressant historia. 

Möjligt slutresultat

Innan vi dyker in i handledningen, låt oss ta en titt på resultatet på olika skärmstorlekar.

Divi-animation

1. Skapa det första helskärmsavsnittet på sidan

Lägg till en ny sektion

Bakgrundsfärg

Börja med att lägga till ett första avsnitt på din Om-sida. Öppna sektionsinställningarna och ändra bakgrundsfärgen till svart.

  • Bakgrundsfärg: # 000000
Divi bakgrundssektion

dimensionering

Vrid sedan avsnittet till helskärm genom att lägga till en minsta höjd i storleksparametrarna.

  • Min höjd: 100vh
Divi sektion höjd

2. Lägg till en animerad rad

Lägg till en ny rad

Kolumnstruktur

Lägg sedan till en ny rad i ditt avsnitt med följande kolumnstruktur:

Lägg till en divi-linje

dimensionering

Öppna linjeparametrarna och låt linjen uppta hela sektionens behållares bredd genom att ändra dimensioneringsparametrarna.

  • Bredd: 100%
  • Max bredd: 100%
Maximal konfiguration av divi-bredd

avstånd

Lägg sedan till vänster och höger fyllning på olika skärmstorlekar.

  • Vänster stoppning: 20vw (skrivbord), 10vw (surfplatta och telefon)
  • Höger stoppning: 20vw (skrivbord) 10vw (surfplatta och telefon)
Anpassa divi stoppning

animering

För att öka berättande effekten kommer vi också att använda en blek animering för linjen.

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

  • Animeringsstil: blekna
  • Animeringstid: 3000ms
  • Animationshastighetskurva: enkel in-ut
  • Animationsupprepning: en gång
Divi avsnitt animation

Placera

Slutligen kommer vi att se till att linjen är placerad i mitten av sektionsbehållaren genom att ändra positionsalternativen.

  • Position: absolut
  • Plats: Center
Position avskaffad divi

3. Sätt in en titel med rullningseffekter

Lägg till textmodul # 1 i kolumnen

Lägg till H1-innehåll

Den enda modulen vi behöver på den här raden är en textmodul med H1-innehåll.

Design titire divi

Titel 1 Textinställningar

Gå till fliken moduldesign och ändra H1-textinställningarna enligt följande:

  • Titel typsnitt: Nunito
  • Vikt för titelsteckensnitt: Halv fet
  • Rubriktextfärg: #ffffff
  • Rubriktextstorlek: 7vw (skrivbord), 9vw (surfplatta), 11vw (telefon)
Konfiguration av Divi-teckensnitt

Vertikal rörelse

Vi kommer också att lägga till en subtil vertikal animation.

  • Aktivera vertikal rörelse: Ja
  • Startförskjutning: 0 (vid 50%)
  • Genomsnittlig offset: 10 (vid 100%)
  • Sista offset: 10
Divi text animation

Inkommande och utgående rullningseffekt

Med en inkommande och utgående blekningseffekt.

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

  • Aktivera fade in och ut: Ja
  • Initial opacitet: 100%
  • Genomsnittlig opacitet: 100% (vid 55%)
  • Slut opacitet: 0% (till 62%)
Opacitetsanimationsval

Skalar rullningseffekten upp och ner

Sist men inte minst kommer vi också att använda en upp- och nedåtgående rullningseffekt.

  • Aktivera skalning upp och ner: Ja
  • Startskala: 100% (till 40%)
  • Genomsnittlig skala: 95% (till 74%)
  • Slutskala: 90%
Divi-animationstext

4. Klona ett helt avsnitt en gång och inkludera beskrivningstexten med rullningseffekter

Redigera titel och innehåll

När du har slutfört det första avsnittet kan du klona det helt. Öppna textmodulen inuti behållaren för dubbla avsnitt och använd en H2-kopia.

Avsnitt duplicerad divi

Ändra textparametrarna för H2 Text-modulen

Ändra H2-textinställningarna i enlighet med detta:

  • Avdelning 2 Polis: Nunito
  • Teckensnitt titel 2: halvfet
  • Punkt 2 Textfärg: #ffffff
  • Artikel 2 Textstorlek: 5vw (skrivbord), 7vw (surfplatta), 8vw (telefon)
  • Linje 2: 1 höjd (kontor), 1.2em (surfplatta och telefon)
berättelse på rullning

Lägg till textmodul # 2 i kolumnen

Lägg till innehåll

Lägg sedan till en annan textmodul i kolumnen med beskrivningsinnehåll efter eget val.

berättelse på rullning

Textinställningar

Ändra textinställningarna för textmodulen på följande sätt:

  • Textstilsort: Öppna Sans
  • Textfärg: #ffffff
  • Textstorlek: 1vw (skrivbord), 2.5vw (surfplatta), 3vw (telefon)
  • Textlinjens höjd: 3.1em (skrivbord), 2.5em (surfplatta och telefon)
berättelse på rullning

avstånd

Använd också en övre marginal.

  • Övre marginal: 8vw
berättelse på rullning

Inkommande och utgående rullningseffekt

Byt sedan till bläddringseffekter på den avancerade fliken och använd följande inställningar för fade in och fade out:

  • Aktivera fade in och ut: Ja
  • Initial opacitet: 100%
  • Genomsnittlig opacitet: 0% (vid 31%)
  • Slutlig opacitet: 0% (till 35%)
Animering av rullande divi-textmodul

Skalar rullningseffekten upp och ner

Lägg också till en uppskalningseffekt.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

  • Aktivera skalning upp och ner: Ja
  • Startskala: 100% (till 40%)
  • Genomsnittlig skala: 95% (till 74%)
  • Slutskala: 90%
Animeringsanpassning divi textmodul

Du kan nu klona det sista avsnittet så många gånger. Du måste dock justera innehållet i varje avsnitt efter dina behov.

undersökningen

Nu när vi har gått igenom alla steg, låt oss ta en sista titt på hur det ser ut på olika skärmstorlekar.

Provresultat

Avslutande tankar

I den här artikeln har vi visat dig hur du berättar en historia på din About-sida med Divis inbyggda rullningseffekter. Effekten vi skapade gör att den på varandra följande kopian bleknar och försvinner, vilket gör att besökarna känner att de läser en historia. Du kan också ladda ner JSON-filen gratis! Om du har några frågor eller förslag, lämna gärna en kommentar i kommentarfältet nedan.

Denna artikel innehåller 1 kommentar

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
1 aktier
del1
tweet
Enregistrer