Vill du veta hur man avslöjar innehåll när du håller muspekaren över sektionsavskiljaren in Divi ?
Sektionsavdelare fortsätter att vara ett designelement Divi populär. Det finns många stilar av avdelare att välja mellan med 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 av avsnittet.
Genom att använda hovringsalternativet för separatorhö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 viss uppmaning eller knapp som du vill att folk ska klicka på. besökare klick.
undersökningen
Ladda ner DIVI nu!!!
Skapa en ny sida med Divi Builder
Från WordPress-instrumentpanelen, gå till Sidor> Lägg till nytt för att skapa en ny sida.
Ge den en titel som är vettig för dig och klicka Använd Divi Builder
klicka sedan på Börja bygga (Bygg från grunden)
Efter det har du en tom duk för att börja designa i Divi.
Designa Section Divider Hover Effect i Divi
Skapa avsnitt och rad
Skapa en vanlig sektion med en rad med två kolumner.
Innan du lägger till en modul, öppna avsnittsinställningarna och uppdatera följande:
Bakgrundsgradient (vänster): #73ba57
Bakgrundsgradient (höger): #2a4c23
Bredd: 80 %
Max bredd: 1px
Sektionsinriktning: Center
Lägg till avsnittsrubrik
För att lägga till avsnittstiteln, skapa en textmodul och infoga följande text:
<h2>The Juice</h2>
Uppdatera sedan designen enligt följande:
Typsnitt: Lato
Textstorlek: 80px
Bokstavsavstånd: -5px
Marginal: -50px (överst), -40px (botten)
Z-index: -1
Den anpassade marginalen och z-indexet gör att texten stannar bakom bilden som vi lägger 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 transparent bakgrund. Vi använder en bild från layoutpaketet Juice Shop 240 pixlar gånger 300 pixlar.
Justeringen av justeringen av bilden i mitten.
Lägg till en "Call To Action"-modul i kolumn 2
Lägg till en Call To Action-modul i kolumn 2.
Lägg till en URL för knapplänk för att säkerställa att knappen visas.
CTA-bakgrunds- och titeltextstil
Uppdatera sedan följande designinställningar:
Bakgrund: #ffffff
Text Färg: mörk
Titel Teckensnitt : Lato
Titel Teckensnittsvikt: Tung
Typsnittsstil: TT
Titel Textstorlek: 18px
Anpassa CTA-knappen
Uppdatera knappdesignen enligt följande:
- Använd anpassade stilar för knapp: JA
- Knappens textfärg: #ffffff
- Knappens bakgrundsfärg: #73ba57
- Kantbredd: 0px
Anpassa CTA-modulens kant
Lägg sedan till en ram för att rama in modulen enligt följande:
Kantbredd: 10px
Kantfärg: rgba(115,186,87,0.15)
Lade till hovringseffekten i splittern för att avslöja modulen "Call To Action".
Nu är det dags att lägga till svävningseffekten i sektionsavdelaren för att avslöja modulen "Call To Action". För att göra detta måste vi först skapa våra sektionsavdelare.
Läs också: Divi: Så avslöjar du innehåll när du håller muspekaren över flikar
Lägga till den övre separatorn
Öppna sektionsparametrarna och den övre separatorn med följande parametrar.
Top Divider Style: se skärmdump
Toppavdelare Färg: #73ba57
Avdelarhöjd: 70% (standard), 0% (hovra)
Top Divider Flip: horisontell
Observera att höjden på avskiljaren börjar med en standardhöjd på 70 % och ändras sedan till en höjd på 0 % vid hovring.
Lade till bottenavdelare
Lägg sedan till en nedre separator som liknar avsnittet med följande parametrar.
- Bottom Divider Style: se skärmdump
- Bottenavdelare Färg: #73ba57
- Avdelarhöjd: 70% (standard), 0% (hovra)
- Divider Flip: horisontell
- Arrangemang: På toppen av avsnittets innehåll
Denna nedre avdelare börjar också med en höjd på 70% som sjunker till 0% vid hovring. Men eftersom splitterarrangemanget är inställt ovanför innehållet, döljer sektionsdelaren den nedre delen av "Call To Action"-modulen i kolumn 1. När du håller muspekaren, avslöjas resten av modulen.
Kolla in resultatet hittills.
Ladda ner DIVI nu!!!
Tillagd boxskuggsvävningseffekt för unik övergång och design
För en unik övergång och design vid hover kan vi lägga till en box shadow hover effekt som kommer att ske samtidigt med splitter hover effekten. För att göra detta, lägg till följande boxskugga till avsnittet.
- Box Shadow: se skärmdump
- Horisontell position: 0px
- Vertikal position: 0px
- Box Shadow Spread Strength: 0px (standard), 150px (hover)
- Skuggfärg: #73ba57
Sakta ner övergången
För ett sista steg, låt oss bromsa övergången.
Övergångslängd: 700ms
Slutresultat
Nu när vi har gått igenom alla steg, låt oss se slutresultatet.
Ladda ner DIVI nu!!!
Slutsats
Vi hoppas att den här artikeln gav dig lite inspiration till att skapa unika sektionsavdelare för att avslöja innehåll.
Faktum är att justering av svävaren kan vara ett bra designelement i sig. Dessutom bör provdesignerna hjälpa dig att starta din egen utforskning och design.
Vi hoppas att denna handledning kommer att inspirera dig för dina nästa Divi-projekt. Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.
Du kan också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
