När du designar din tjänstesida vill du se till att din besökare lägg märke till alla olika tjänster du tillhandahåller. I många fall kommer det bara att vara en specifik tjänst de letar efter, men om du tillhandahåller ett strömlinjeformat sätt i din tjänstestruktur är det mer troligt att din besökare ta itu med dem alla.
I den här handledningen visar vi dig hur du blir kreativ med rullningseffekterna av Divi och skapa en sömlös tjänsteövergång. Du kommer också att kunna 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.
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
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
avstånd
Lägg sedan till en anpassad övre och undre marginal.
- Övre marginal: 200px
- Nedre marginal: 200px
Lägg till en textmodul i 1-kolumnen
Lägg till H2-innehåll
Det är dags att lägga till moduler, börja med en textmodul i kolumn 1. Ange innehåll H2 efter eget val.
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
avstånd
Lägg sedan till en lägre marginal på surfplattan och telefonen.
- Nedre marginal: 50 pixlar (endast surfplatta och telefon)
Lägg till en textmodul i 2-kolumnen
Lägg till innehåll
Låt oss gå vidare till den andra kolumnen. Där är den första modulen vi behöver en textmodul med en viss innehåll beskrivning.
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
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
Linje
Ändra sedan modulens linjefärg.
- Linjefärg: # 000000
dimensionering
Gör sedan några ändringar i dimensioneringsparametrarna.
- Divider vikt: 3px
- Bredd: 28%
avstånd
Vi lägger också till en toppmarginal.
- Övre marginal: 10px
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
överflöden
Göm också överflödet.
- Horisontellt överflöde: dold
- Vertikalt överflöde: dold
Lägg till en ny rad
Kolumnstruktur
Fortsätt att lägga till en första rad med följande kolumnstruktur:
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
avstånd
Ta sedan bort all standard övre och nedre stoppning.
- Övre stoppning: 0px
- Botten stoppning: 0px
Inställningar för kolumn 1
Bakgrundsfärg
Öppna sedan inställningarna för kolumn 1 och ändra bakgrundsfärgen.
- Bakgrundsfärg: # f7f7f7
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%
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)
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.
- Visa separator: Ja
Linje
Ändra sedan modulens linjefärg.
- Linjefärg: # 000000
dimensionering
Ändra även storlek på parametrarna.
- Divider vikt: 3px
- Bredd: 50%
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 innehåll H3.
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.
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
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.
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
- Knappsnitt: kvartalsvis
- Knappsnittets vikt: fetstil
avstånd
Lägg också till anpassad stoppning.
- Övre stoppning: 50px
- Botten stoppning: 50px
- Vänster padding: 100px
- Höger stoppning: 100px
Placera
Och placera om knappen i enlighet därmed:
- Position: Absolut
- Plats: längst ner till vänster
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.
Ändra allt innehåll
Se till att redigera allt innehåll i dubbla rader.
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
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
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:
- Aktivera vertikal rörelse: Ja
- Startförskjutning: -4
- Genomsnittlig offset: 0 (vid 26%)
- Slutförskjutning: 0
- Motion trigger-effekt: mitt i elementet
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
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
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
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.
Avslutande tankar
I den här artikeln visade vi hur du skapar en vacker serveringsövergång med rullningseffekterna Divi. Redan innan den ena serven försvinner börjar den andra dyka upp, vilket ger en trevlig övergång som är lätt för ögat. Detta tillvägagångssätt hjälper dig att lyfta fram varje tjänst på individuell nivå. Du kunde också ladda ner JSON-filen gratis! Om du har några frågor eller förslag, lämna gärna en kommentar i kommentarsfältet nedan.
