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 den här handledningen kommer vi att använda sektionsavdelare lite annorlunda. Divi låter dig justera höjden och layouten för varje avdelare. Detta gör att vi kan placera separatorer ovanför vissa områden eller innehåll i avsnittet. Genom att använda svävningsalternativet för avdelarhöjd kan vi lägga till unika svävningseffekter som avslöjar en innehåll delvis dold. Detta fungerar utmärkt för att uppmärksamma en uppmaning eller en viss knapp som du vill att folk ska klicka på. besökare klick.
Låt oss börja.
Provresultat
Vad du behöver för att komma igång
För att komma igång behöver du följande:
- Le Divi-tema installerad och aktiv
- En ny sida skapad för att bygga från grunden på framsidan (visuell konstruktör)
- 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.
Innan 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 sektionstitel
För att lägga till avsnittstiteln, skapa en textmodul och uppdatera innehåll av kroppen med följande h2-huvud:
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.
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.
Justera bildens inriktning mot mitten.
Lägga till en uppmaning i kolumn 2
I 2-kolumnen lägger du till ett samtal till åtgärdsmodulen.
Lägg till en URL-knapp för en länk för att se till att knappen visas.
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
Stylera CTA-knappen
Uppdatera knappdesignen enligt följande:
Knapptextfärg: #ffffff
Knappens bakgrundsfärg: # e09900
Knappgränsbredd: 0 px
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)
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 Layout: Överst i avsnittet Innehåll
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.
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
Sakta ner övergången
För ett sista steg, låt oss bromsa övergången.
Övergångsperiod: 700ms
Slutresultat
Här är det slutliga resultatet på skrivbordet.
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!
