Gå till innehållet

Hur man använder överflyttningseffekter för att avslöja innehållet 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]

Sektionsavdelare är fortfarande ett populärt designelement på Divi. Det finns många separatorstilar där ute, inklusive några användbara alternativ som gör det enkelt att lägga till unika övergångar och bakgrunder till din sida.

I denna handledning använder vi sektionsavdelare lite annorlunda. Med Divi kan du justera höjden och arrangemanget för varje avdelare. Detta gör att vi kan placera separatorerna ovanför vissa områden eller vissa delar av avsnittet. Med hjälp av svävaralternativet för delningshöjden kan vi lägga till unika svävareffekter som avslöjar delvis dolt innehåll. Det fungerar bra för att uppmärksamma en uppmaning till handling eller en viss knapp som du vill att besökare ska klicka på.

Låt oss börja.

Provresultat

Animationsinnehåll avslöjade diviVad du behöver för att komma igång

För att komma igång behöver du följande:

  1. Divi-tema installerat och aktivt
  2. En ny sida skapad för att bygga från grunden på framsidan (visuell konstruktör)
  3. Några dummybilder att använda i designen. Jag ska använda några bilder med transparent bakgrund från Juice Shop Layout Pack .

Efter det är du redo att börja!

Implementering av sektionens avdelare höjd svävar effekt design i Divi

Skapa avsnitt och rad

Låt oss börja med att skapa ett vanligt avsnitt med en rad med två kolumner.

Välj en divi-layoutInnan du lägger till en modul öppnar du sektionsinställningarna och uppdaterar följande:

Vänster bakgrundsgradient: #73ba57
Höger bakgrundsgradient: #2a4c23
Bredd: 80%
Maximal bredd: 1080px
Avsnitt Alignment: Center

Men du kan också välja det färgschema du vill ha enligt din bild. mitt färgschema är: # fff200 - # e09900 i gradient.

Lägg till en försämrad divi-bakgrund

Lägg till sektionstitel

För att lägga till sektionstiteln, skapa en textmodul och uppdatera kroppsinnehållet med följande h2-rubrik:

Juicen

Uppdatera sedan ritningen enligt följande:

Rubrik 2 Teckensnitt: Lato
Rubrik 2 Textstorlek: 80px
Rubrik 2 Brevavstånd: -5px
Marginal: -50px längst upp, -40px längst ner
Z-Index: -1

Den anpassade marginalen och z-indexet gör att texten kan sitta bakom bilden som vi kommer att lägga till i nästa steg.

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]

Lägg till bild

Lägg till en bildmodul under textmodulen med titeln i kolumn 1. Ladda sedan upp en bild med en transparent bakgrund. Jag använder en bild från Juice Shop Layout Pack som är 240 pixlar x 300 pixlar.

Divi fruktjuiceJustera bildens inriktning mot mitten.

Divi centrumjustering

Lägga till en uppmaning i kolumn 2

I 2-kolumnen lägger du till ett samtal till åtgärdsmodulen.

Uppmaning till åtgärd i kolumn 2

Lägg till en URL-knapp för en länk för att se till att knappen visas.

Lägg till en länk till divi action-samtal

CTA bakgrund och titel stil

Uppdatera sedan följande designparametrar:

Bakgrundsfärg: #ffffff
Textfärg:
titel Teckensnitt: Lato
Titel Vikt Policy: Tung
Titel Typsnitt: TT
titel Textstorlek: 18px

Anpassa divi call to action

Stylera CTA-knappen

Uppdatera knappdesignen enligt följande:

Knapptextfärg: #ffffff
Knappens bakgrundsfärg: # e09900
Knappgränsbredd: 0 px

Anpassa iamge divi bakgrund

Styling CTA-gränsen

Lägg sedan till en ram för att rama modulen enligt följande:

Breddens bredd: 10px
Gränsfärg: rgba (224,145,0,0.25)

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]

Anpassad gränsdel

Lagt till skillnad höjd svävar effekt för att avslöja uppmaning till handling

Nu är det dags att lägga till sektionsavdelningens höjdförflyttningseffekt för att avslöja uppmaningen. För att göra detta måste vi först skapa våra sektionsdelare.

Lägga till den övre separatorn

Öppna sektionsparametrarna och den övre separatorn med följande parametrar.

Toppdelarstil: se skärmdump Toppdelningsfärg: # 73ba57 Toppdelarhöjd: 70% (standard), 0% (svävar)
Vänd uppdelare: horisontell

Observera att separatorns höjd börjar med en standardhöjd på 70% och flyttas sedan till en höjd av 0% vid rullning.

Tillsats av den nedre delaren

Lägg sedan till en nedre separator som liknar avsnittet med följande parametrar.

Toppdelarstil: se skärmdump Toppdelningsfärg: # 73ba57 Toppdelarhöjd: 70% (standard), 0% (svävar)
Vänd uppdelare: horisontell
Divider Disposition: Överst på innehållsavsnittet

Denna bakgrundsseparator börjar också med en höjd på 70% som ändras till 0% på svävaren. Eftersom separatorlayoutalternativet är inställt högst upp i innehållet, döljer sektionsavgränsaren den nedre delen av uppmaningen till handling i kolumn 1. Därefter, på svävaren, resten av l uppmaning till handling avslöjas.

Kolla in resultatet hittills.

Anpassa divi-gränser

Lade till en box-skugg-svävareffekt för en unik övergång och design

För en unik svävande övergång och design kan vi lägga till en box-skugg-svävareffekt som kommer att äga rum samtidigt med delningshöjden. För att göra detta, lägg till skuggan av följande ruta i avsnittet.

Box Shadow: se skärmdump
Box Shadow Horisontell Position: 0px
Box Shadow Vertikal Position: 0px
Box Shadow Spread Force: 0px (standard), 150px (hover)
Boxskuggfärg: #73ba57

Divi border animation

Sakta ner övergången

För ett sista steg, låt oss bromsa övergången.

Övergångsperiod: 700ms

Konfigurera divi-övergångarSlutresultat

Här är det slutliga resultatet på skrivbordet.

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]

Divi slutresultat

Baserat på vad vi har gjort ovan kommer du att kunna anpassa skärmen på mobil och surfplatta.

Avslutande tankar

Hoppas att denna handledning gav dig lite inspiration för att skapa unika sektionsavdelare höjd svävar effekter för att avslöja innehåll. Att justera höjden på den svävande avdelaren kan faktiskt vara ett anmärkningsvärt designelement. Och designproverna ska hjälpa dig att starta din egen utforskning och dina egna mönster.

Hoppas att höra från dig i kommentarerna.

Till din hälsa!

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
6 aktier
del6
tweet
Enregistrer