Gå till innehållet

Hur man skapar en sömlös övergång med rullningseffekter 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]

När du utformar din tjänstesida vill du se till att dina besökare märker alla olika tjänster som du tillhandahåller. I många fall kommer detta bara att vara en specifik tjänst som de letar efter, men om du tillhandahåller ett strömlinjeformat sätt i din servicestruktur är det troligare att dina besökare behandlar dem alla. 

I den här handledningen visar vi dig hur du blir kreativ med Divis rullningseffekter och skapar en sömlös serviceövergång. Du kan också ladda ner JSON-filen gratis!

Låt oss gå.

Möjligt resultat

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

Övergång mellan sektionsdel

1, återskapa strukturen för elementen

Lägg till avsnitt 1

avstånd

Börja med att lägga till ett nytt avsnitt på sidan du arbetar med. Öppna sektionsinställningarna och ändra vadderingsvärdena på olika skärmstorlekar.

  • Övre stoppning: 80px (skrivbord och surfplatta), 0px (telefon)
  • Botten stoppning: 80px
Divi-parameteravsnitt

Lägg till en ny rad

Kolumnstruktur

Fortsätt att lägga till en ny rad med följande kolumnstruktur:

dimensionering

Utan att lägga till fler moduler, öppna radparametrarna och tillämpa följande ändringar på dimensioneringsparametrarna:

  • Använd en anpassad rännbredd: Ja
  • Rännbredd: 1
  • Bredd: 90%
  • Max bredd: 1580px
Konfiguration av divi-avstånd

avstånd

Lägg sedan till en anpassad övre och undre marginal.

  • Övre marginal: 200px
  • Nedre marginal: 200px
Konfiguration av divi-linjeavstånd

Lägg till en textmodul i 1-kolumnen

Lägg till H2-innehåll

Det är dags att lägga till moduler, börjar med en textmodul i kolumn 1. Ange önskat H2-innehåll.

Våra tjänster som erbjuds av just nu experterna

H2 textinställningar

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

  • Avdelning 2 Polis: kvartalsvis
  • Rubrik 2 Textstorlek: 80px (skrivbord), 50px (surfplatta), 40px (telefon)
  • Höjden på huvudets linje 2: 1.2em
Chef divi polis

avstånd

Lägg sedan till en lägre marginal på surfplattan och telefonen.

  • Nedre marginal: 50 pixlar (endast surfplatta och telefon)
Konfiguration av divi-textavstånd

Lägg till en textmodul i 2-kolumnen

Lägg till innehåll

Låt oss gå vidare till andra kolumnen. Där är den första modulen vi behöver en textmodul med lite beskrivningsinnehåll.

Textruta för innehållsdivi

Textinställningar

Byt till fliken moduldesign och ändra textinställningarna i enlighet med detta:

  • Textstilsort: stuga
  • Textstilsstil: versaler
  • Textfärg: # 000000
  • Textstorlek: 18 px (skrivbord), 15 px (surfplatta), 13 px (telefon)
  • Avstånd mellan textbokstäver: 3px (skrivbord), 1px (surfplatta och telefon)
  • Höjd på textrad: 3em
Divi-textparameter

Lägg till en separationsmodul i kolumn 2

synlighet

Nästa och sista modul vi behöver i den här kolumnen är en separationsmodul. Se till att alternativet "Visa separator" är aktiverat.

  • Visa separator: Ja
Synlig avdelare

Linje

Ändra sedan modulens linjefärg.

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]

  • Linjefärg: # 000000
Avdelningsfärgbakgrund

dimensionering

Gör sedan några ändringar i dimensioneringsparametrarna.

  • Divider vikt: 3px
  • Bredd: 28%
Divi separator storlek

avstånd

Vi lägger också till en toppmarginal.

  • Övre marginal: 10px
Divi separator modulavstånd

Lägg till avsnitt 2

avstånd

Låt oss gå vidare till nästa vanliga avsnitt. Ta bort standard toppdynan från avsnittet.

  • Övre stoppning: 0px
Avsnitt 2 divi-avstånd

överflöden

Göm också överflödet.

  • Horisontellt överflöde: dold
  • Vertikalt överflöde: dold
Göm divi-modulen överflöd

Lägg till en ny rad

Kolumnstruktur

Fortsätt att lägga till en första rad med följande kolumnstruktur:

Välj en divi-layout

dimensionering

Utan att lägga till fler moduler öppnar du linjeparametrarna, öppnar dimensioneringsparametrarna och gör följande ändringar:

  • Använd en anpassad rännbredd: Ja
  • Rännbredd: 1
  • Utjämna kolumnhöjder: Ja
  • Bredd: 90%
  • Max bredd: 1580px
Divisionsektion för rännsten

avstånd

Ta sedan bort all standard övre och nedre stoppning.

  • Övre stoppning: 0px
  • Botten stoppning: 0px
Avståndsinställningar för Divi 1-radmodul

Inställningar för kolumn 1

Bakgrundsfärg

Öppna sedan inställningarna för kolumn 1 och ändra bakgrundsfärgen.

  • Bakgrundsfärg: # f7f7f7
Divi line modul bakgrundskonfiguration

avstånd

Slutför kolumninställningarna genom att lägga till anpassade utfyllnadsvärden på olika skärmstorlekar.

  • Övre stoppning: 200 px (skrivbord), 100 px (surfplatta och telefon)
  • Botten stoppning: 200 px (skrivbord), 100 px (surfplatta och telefon)
  • Vänster stoppning: 8%
  • Höger stoppning: 8%
Radmodulens kolumninställningar

Inställningar för kolumn 2

avstånd

Fortsätt genom att öppna inställningarna i kolumn 2. Gå till fliken avancerad och lägg till anpassade utfyllnadsvärden på olika skärmstorlekar.

  • Topp stoppning: 100px (skrivbord), 50px (surfplatta och telefon)
  • Botten stoppning: 200px
  • Vänster stoppning: 150 px (skrivbord), 0 px (surfplatta och telefon)
Avståndsinställningar för divi-modul

Lägg till en separationsmodul i kolumn 1

synlighet

I den första kolumnen är den första modulen vi behöver en separationsmodul. Se till att alternativet "Visa separator" är aktiverat.

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]

  • Visa separator: Ja
Visa separator för divi 1

Linje

Ändra sedan modulens linjefärg.

  • Linjefärg: # 000000
Divi separator inställningar

dimensionering

Ändra även storlek på parametrarna.

  • Divider vikt: 3px
  • Bredd: 50%
Divi separator storlek

Lägg till en textmodul i 1-kolumnen

Lägg till H3-innehåll

Nästa modul vi behöver i kolumn 1 är en textmodul med H3-innehåll.

Inställning av Divi-innehållsavsnitt

H3 textinställningar

Byt till fliken moduldesign och ändra H3-textinställningarna:

  • Avdelning 3 Polis: kvartalsvis
  • Textfärg på artikel 3: # 000000
  • Artikel 3 Textstorlek: 50 px (skrivbord), 40 px (surfplatta), 35 px (telefon)
  • Höjden på huvudets linje 3: 1.1em

Lägg till en textmodul i 2-kolumnen

Lägg till innehåll

I den andra kolumnen är den första modulen vi behöver en textmodul med lite beskrivningsinnehåll.

Inställning av Divi-textmodul

Textinställningar

Ändra modulens textinställningar enligt följande:

  • Textstilsort: stuga
  • Textstilsstil: versaler
  • Textstorlek: 18 px (skrivbord), 15 px (surfplatta), 13 px (telefon)
  • Avstånd mellan textbokstäver: 3px (skrivbord), 1px (surfplatta och telefon)
  • Höjd på textrad: 3em
Justering av teckensnitt för Divi-textform

Lägg till en knappmodul i 2-kolumnen

Lägg till en kopia

Nästa och sista modul vi behöver är en knappmodul. Ange en kopia efter eget val.

Inställning av textmodulinnehåll

Knappinställningar

Ställ sedan in knappen.

  • Använd anpassade stilar för knappen: Ja
  • Knapptextstorlek: 20 pixlar
  • Knapptextfärg: #ffffff
  • Knappens bakgrundsfärg: # 000000
  • Knappens bredd: 0px
Inställning av stil för Divi-knapp
  • Knappsnitt: kvartalsvis
  • Knappsnittets vikt: fetstil
Färginställningar för Divi-knappen

avstånd

Lägg också till anpassad stoppning.

  • Övre stoppning: 50px
  • Botten stoppning: 50px
  • Vänster padding: 100px
  • Höger stoppning: 100px
Inställningar för avstånd för divi-modulknapp

Placera

Och placera om knappen i enlighet därmed:

  • Position: Absolut
  • Plats: längst ner till vänster
Divi-knappmodulens positionsjustering

Klona linjen så många gånger som behövs

När du har slutfört hela raden och alla dess moduler kan du klona hela linjen tre gånger.

Klon divi-modul

Ändra allt innehåll

Se till att redigera allt innehåll i dubbla rader.

Redigera innehållet i avsnittet

2. Använd rullningseffekter

Första radens rullningseffekter

Horisontell rörelse

När du har slutfört alla raderna i ditt avsnitt är det dags att lägga till rullningseffekterna. Öppna den första raden i sektionen och lägg till horisontell rörelse.

  • Aktivera horisontell rörelse: Ja
  • Startförskjutning: -5
  • Genomsnittlig offset: 0 (vid 26%)
  • Slutförskjutning: 0
  • Trigger motion-effekt: mitt i elementet
Använd divi-rullningseffekter

Tona in och ut

Använd också en inkommande och utgående blekningseffekt.

  • Aktivera fade in och ut: Ja
  • Initial opacitet: 100%
  • Genomsnittlig opacitet: 100% (vid 50%)
  • Slut opacitet: 0% (till 53%)
  • Trigger motion-effekt: mitt i elementet
Konfigurera delningsavsnitt för blek animering

Mellanradens rullningseffekter

Vertikal rörelse

Därefter lägger vi till rullningseffekter till alla rader mellan den första och den sista raden i avsnittet. Använd först en vertikal rörelse:

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 vertikal rörelse: Ja
  • Startförskjutning: -4
  • Genomsnittlig offset: 0 (vid 26%)
  • Slutförskjutning: 0
  • Motion trigger-effekt: mitt i elementet
Divi-rullning aniation konfiguration

Tona in och ut

Aktivera också en in- och ut-blekningseffekt.

  • Aktivera fade in och ut: Ja
  • Initial opacitet: 0%
  • Genomsnittlig opacitet: 100% (från 27% till 50%)
  • Slutförskjutning: 0 (vid 53%)
  • Trigger motion-effekt: mitt i elementet
Divi line bleknar animering

Senaste radrulleffekter

Vertikal rörelse

Öppna sedan sektionens sista rad och lägg till följande vertikala rörelse:

  • Aktivera vertikal rörelse: Ja
  • Startförskjutning: -4
  • Genomsnittlig offset: 0 (vid 26%)
  • Slutförskjutning: 0
  • Trigger motion-effekt: mitt i elementet
Divi line-modul rullningsanimering

Tona in och ut

Med en inkommande och utgående blekningseffekt så är du klar!

  • Aktivera fade in och ut: Ja
  • Initial opacitet: 0%
  • Genomsnittlig opacitet: 100% (från 27% till 50%)
  • Slut opacitet: 100% (till 53%)
  • Trigger motion-effekt: mitt i elementet
Divi line-modulens utseende animationsinställningar

Slutresultat

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.

Slutlig demo

Avslutande tankar

I den här artikeln har vi visat dig hur du skapar en vacker serviceövergång med de rullande effekterna av Divi. Redan innan en servering försvinner börjar den andra dyka upp, vilket ger en trevlig övergång tilltalande för ögat. Detta tillvägagångssätt hjälper dig att markera varje tjänst på en individuell nivå. 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.

Den här artikeln innehåller kommentarer 0

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
0 aktier
del
tweet
Enregistrer