Gå till innehållet

Hur man skapar avsnitt Divider Scroll Effects i 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]

Att skapa rullningseffekter med sektionsavdelaren är en rolig och enkel teknik som kan ge liv åt din webbplats med Divi WordPress-temat. En sektionsdelare fortsätter att vara ett mångsidigt designelement, användbart för att lägga till en touch av kreativitet till dina sidinnehållsövergångar. 

Men med de rullande effekterna av Divi blir sektionsdelarna ännu mer intressanta! Tricket är att isolera en sektion tillägnad stilen för val av avdelare. Sedan kan du lägga till alla typer av rullningsgenererade rörelser i avsnittet för att skapa vackra rullningseffekter som bakgrund för sidinnehållet.

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.

Lägg till divisektion

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
Konfigurera avståndet mellan delar

Lägg till en textmodul

Lägg till en ny textmodul i raden i en kolumn.

Divi textmodul

Innehållet i textmodulen

Inne i kroppsinnehållet, lägg till följande H2-titel:

<h2>Section Avec Séparateurs</h2>

Avsnitt med avdelare

Textmoduldesign

Uppdatera följande under designinställningarna:

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]

  • Textstilsort: Roboto
  • Justering av texten: centrum
  • Punkt 2 Textfärg: # bae0d8
  • Rubrik 2 Textstorlek: 80 px (skrivbord), 50 px (surfplatta), 30 px (telefon)
Konfiguration av Divi-teckensnitt

Lägg till ett andra innehållsavsnitt

Lägg till ett nytt vanligt avsnitt under föregående avsnitt.

divider sektionsdelar rullningseffekter

Lägg till en rad

Lägg till en rad i en ny kolumn i det nya avsnittet.

Lägg till divisektion 1

Lägg till en textmodul

Lägg sedan till en ny textmodul till raden.

Lägg till divi-textmodul

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
Anpassa textstil divi-modul

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
Divi-avståndssektionskonfiguration

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.

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]

Lägg till vanlig sektionsdel

Avsnittets sammanhang

Och ta bort sektionens standardbakgrundsfärg men uppdatera följande:

  • Bakgrundsfärg: rgba (0,0,0,0)
Personlig bakgrundsavdelning

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
Divi sektion kantkonfiguration

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
Nedre divi-väljare
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
Låg avdelningsdel divi
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å .

Horisontell rullningsdel

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)
Horisontell föroreningstabell divi

Under fliken Skala upp och ner effekt , uppdatera följande på byrå .

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]

  • Startskala: 200% (vid 0% av fönstret)
  • Genomsnittlig skala: 150% (vid 45% -65% av visningsområdet)
  • Slutskala: 150% (vid 100% av visningsområdet)
Layoutkonfiguration

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.

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
1 aktier
del1
tweet
Enregistrer