Att skapa rullningseffekter med hjälp av sektionsavdelaren är en enkel och rolig teknik som kan ge dig liv webbplats använda Wordpress tema Divi. En sektionsavdelare fortsätter att vara ett mångsidigt designelement, användbart för att lägga till en touch av kreativitet till dina övergångar av innehåll av sidan.
Men med Divis rullningseffekter blir sektionsavdelare ännu mer intressanta! Tricket är att isolera en sektion dedikerad till den valda avdelaren stil. Sedan kan du lägga till alla typer av rullningsgenererade rörelser till avsnittet för att skapa vackra rullningseffekter som bakgrund för innehåll sida.
Låt oss börja!
Möjligt resultat
Här är en översikt över de mönster som vi kommer att kunna uppnå efter att ha slutfört denna handledning.
Hur man skapar animerade delningsavdelare för rullningssektion med Divi
Skapande av de två innehållssektionerna
Lägg till en rad
För att starta, skapa en rad med en kolumn i standardsektionen.
Sektionsmarginal (för test)
För teständamål, lägg till en toppmarginal i avsnittet så att vi kan få plats att rulla. Öppna sektionsinställningarna och lägg till följande:
- Övre marginal: 80vh
Lägg till en textmodul
Lägg till en ny textmodul i raden i en kolumn.
Innehållet i textmodulen
Insidan av innehåll av kroppen, lägg till följande H2-rubrik:
<h2>Section Avec Séparateurs</h2>
Textmoduldesign
Uppdatera följande under designinställningarna:
- Textstilsort: Roboto
- Justering av texten: centrum
- Punkt 2 Textfärg: # bae0d8
- Rubrik 2 Textstorlek: 80 px (skrivbord), 50 px (surfplatta), 30 px (telefon)
Lägg till ett andra innehållsavsnitt
Lägg till ett nytt vanligt avsnitt under föregående avsnitt.
Lägg till en rad
Lägg till en rad i en ny kolumn i det nya avsnittet.
Lägg till en textmodul
Lägg sedan till en ny textmodul till raden.
Textmoduldesign
Vi kan behålla standard vadderingsinnehåll inuti kroppen för nu. Låt oss gå vidare till designfliken och uppdatera följande:
- Textstilsort: Roboto
- Texttextfärg: #dddddd
- Textstorlek: 16px
- Textradhöjd: 1,5 em
- Textinriktning: vänster
- Maximal bredd: 400 px
- Justering av modulen: centrum
Avsnitt inställningar
Se till att ta bort sektionens standardbakgrundsfärg, men ge den en helt transparent bakgrund. Sedan kan vi ta bort den översta stoppningen och lägga till en nedre marginal för rullningsteständamål.
För att göra detta öppnar du avsnittinställningarna och uppdaterar följande:
- Bakgrundsfärg: rgba (0,0,0,0)
- Nedre marginal: 80vh
- Padding: 0px
Skapande av den animerade sektionsseparatorn
När två innehållssektioner är klar är vi redo att lägga till avsnittet för våra animerade sektionsdelare.
Lägg till en ny sektion
Gå vidare och skapa ett nytt vanligt avsnitt i mitten av de två innehållssektionerna.
Avsnittets sammanhang
Och ta bort sektionens standardbakgrundsfärg men uppdatera följande:
- Bakgrundsfärg: rgba (0,0,0,0)
Avdelningsdelar design
Oroa dig inte, vi skapar vår bakgrundsfärg med sektionsdelarna. För att göra detta, klicka på designfliken och lägg till en övre och nedre delare i avsnittet enligt följande:
Superior divider design
- Top Divider Style: se skärmdump
- Färg på övre delare: # 524fbf
- Övre delarens höjd: 20vw
- Horisontell upprepning av den övre delaren: 0,6x
- Vänd på den övre delaren: horisontell
Nedre delningsdesign
- Nedre delningsstil: se skärmdump
- Nedre separatorfärg: # 524fbf
- Nedre delarens höjd: 20vw
- Horisontell upprepning av nedre delare: 0,5x
- Nedre delningsdelning: horisontellt och vertikalt
Sektionens höjd och stoppning
Eftersom detta avsnitt endast är avsett för avdelningsdesign kan vi bli av med höjden och stoppningen så att endast avdelningsstilen visas och inget onödigt utrymme kommer mellan de två innehållssektionerna. Uppdatera följande:
- Höjd: 0px
- Polstring: 0px hög, 0px låg
Avsnitt Separator Scroll Effects
Ge sedan avsnittet följande rullningseffekter:
Under fliken Horisontell rörelse .
- Aktivera horisontell rörelse: JA
Vi kan behålla standardinställningarna för den här med tanke på byrå .
Uppdatera sedan de horisontella rörelseparametrarna på Tablette :
- Start offset: 3 (vid 0% av fönstret)
- Genomsnittlig förskjutning: 0 (vid 50% av visningsområdet)
- Slutförskjutning: -3 (vid 100% av visningsområdet)
Under fliken Skala upp och ner effekt , uppdatera följande på byrå .
- Startskala: 200% (vid 0% av fönstret)
- Genomsnittlig skala: 150% (vid 45% -65% av visningsområdet)
- Slutskala: 150% (vid 100% av visningsområdet)
Uppdatera sedan uppskalnings- och nedeffekten på Tablette enligt följande:
- Startskala: 400% (vid 0% av fönstret)
- Genomsnittlig skala: 300% (vid 45% -65% av visningsområdet)
- Slutskala: 400% (vid 100% av visningsområdet)
Den främsta anledningen till att vi behöver justera rörelseeffekterna på surfplattan (och telefonen) beror på de horisontella rörelsevärdena som använder pixel längdenheter (dvs. 3 = 300 pixlar), som är absolut och justera inte till webbläsarens bredd.
Låt oss nu se det slutliga resultatet av vår animerade sektionsdelare.
Avslutande tankar
Att animera sektionsdelare på rullningen är ett roligt och effektivt sätt att få en webbsida att leva. Hoppas det här ger dig lite inspiration för att utlösa ännu mer kreativa mönster själv.
