Vill skapa flikar med svävningseffekt från rader med Divi ?
Flikar är definitivt användbara för att göra viktig information tillgänglig i ett kortfattat område av dig webbplats. Detta minskar behovet för användaren att bläddra igenom innehåll av en lång sida. Flikmodulen för Divi är lätt att använda och perfekt för att surfa innehåll enkelt med ett klick.
Men i den här handledningen kommer vi att visa dig hur du konverterar rader Divi flikar och visas när du håller muspekaren.
Vi visar dig också hur du skapar horisontella och vertikala flikar. Detta kommer att låsa upp kraften hos Divi för att skapa kompletta layouter med flera moduler för varje område av innehåll flik.
Inga plugins behövs!
Låt oss börja.
undersökningen
Här är en översikt över flikarna som vi kommer att skapa tillsammans i den här handledningen.
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.
Skapa horisontella svävningsflikar med "Divi-rader"
Lägg till en rad med två kolumner i standardavsnittet.
Linjebakgrund, rutafyllning och skugga
Innan vi lägger till våra moduler, låt oss anpassa radinställningarna lite först. Öppna Linjeinställningar och uppdatera följande:
- Vänster gradientfärg: #284f91
- Höger gradientfärg: #4646c4
- Utfyllnad: 50px (överst och neder), 50px (vänster och höger)
- Box Shadow: se skärmdump
- Boxskuggfärg: rgba(70,70,196,0.66)
Lägg till innehåll på raden
Vi kommer nu att lägga till platshållarinnehåll i vår rad. I kolumn 1 lägger du till en bild som du väljer med en bildmodul. Här använde vi en bild från layoutpaketet « Design Conference Layout Pack« .
Lägg till en modul i den högra kolumnen Uppmaning till handling och uppdatera följande:
- Button Link URL: # (bara för att visa knappen för tillfället)
- Använd bakgrundsfärg: NEJ
- Textjustering: vänster
- Titel Teckensnitt : Lato
- Titeltextstorlek: 60px (dator), 50px (telefon)
Skapande av fliken
För att skapa den faktiska fliken som användare kommer att hålla muspekaren över för att avslöja innehållet i den raden, måste vi skapa en textmodul och placera den längst upp till höger med lite anpassad CSS.
Fortsätt och lägg till en ny textmodul under bilden i kolumn 1 och uppdatera följande:
- Kropp: "Tab 1"
- Bakgrund: #284f91 (detta ska matcha linjens vänstra gradientfärg)
- Textjustering: centrerad
- Textfärg: #ffffff
- Bredd: 100px
- Höjd: 50px
- Marginal: -100px (överst), -50px (vänster)
- Utfyllnad: 14px (överst)
Lägg slutligen till följande anpassade css till huvudelementet för att ge det en absolut position överst på raden.
position: absolute !important;
top: 0;
Sektionshöjd och avstånd
För nu, öppna avsnittsinställningarna och uppdatera följande:
- Min höjd: 500px (dator), 900px (surfplatta), 750px (telefon)
- Marginal: 100 px (överst och neder)
- Utfyllnad: 0px (topp och botten)
Skapandet av den andra raden
För att skapa den andra raden, duplicera raden du skapade tidigare. Flytta textmodulen till kolumn 1 och bilden till kolumn 2. Uppdatera sedan bilden med en ny. Detta hjälper dig att få en uppfattning om hur olika innehåll ser ut på varje flik.
Öppna sedan modulinställningarna Text som används för att skapa fliken i kolumn 1 och flytta fliken till höger så att där denna rad överlappar raden ovanför kan du se fliken direkt till höger om fliken på första raden.
- Marginal: 50px (vänster)
Lade till svävningseffekt
Öppna radinställningar och lägg till följande filter:
- Opacitet: 70 % (standard), 100 % (hovra)
Lägg sedan till en övergångsvaraktighet och en hastighetskurva för opacitetsfiltereffekten.
- Övergångstid: 500 ms
- Övergångshastighetskurva: linjär
Skapande av den tredje fliken
Vi kan nu lägga till vår sista flik. För att göra detta, duplicera den andra raden du just skapade. Flytta sedan textmodulen till kolumn 1 och bilden till kolumn 2. Och uppdatera bildmodulen med en ny bild.
Uppdatera linjeinställningarna med en ny bakgrundsgradient.
- Vänster bakgrundsgradientfärg: #333333
- Höger bakgrundsgradientfärg: #4646c4
Öppna sedan inställningen Textmodul som används för att skapa fliken i kolumn 1 och uppdatera färgen och marginalen.
- Bakgrund: #333333
- Marginal: 150px (vänster)
Så här ska din sida se ut innan vi placerar våra linjer så att de överlappar varandra.
Överlappande linjer med absolut positionering
För att överlappa våra linjer måste vi använda absolut positionering. Uppdatera först höjden på alla tre raderna till 100 %.
- Höjd: 100%
Lägg sedan till följande anpassade CSS till huvudelementet på alla tre raderna:
position: absolute !important;
left: 0;
right: 0;
margin: auto;
Så här ser våra flikar ut för tillfället.
Ändra radordning vid hovring med Z-index
I detta ögonblick kanske du har märkt att den tredje raden/fliken är i förgrunden. Så vi måste ordna om raderna med Z Index så att den första fliken visas först tills du håller muspekaren över en annan flik.
Läs också: Hur man skapar anpassade bildöverlägg i Divi
För att göra detta, öppna inställningarna för den första raden och uppdatera z-indexet enligt följande:
Z-index: 10
Placera sedan Z-indexet för de andra två raderna på svävaren.
Z-index: 11 (hovra)
Det är klart ! Låt oss se slutresultatet.
Slutresultat
Ladda ner DIVI nu!!!
Skapa vertikala flikar
Om du vill lägga till vertikala flikar till rader, så här ska du göra.
Fortsätt och duplicera avsnittet som innehåller svävflikarna vi just skapade så att du har en ny design att arbeta med.
Öppna sedan avsnittsinställningarna och uppdatera följande:
- Vaddering: 10% (vänster och höger)
Uppdatera följande inställningar för alla tre raderna i dubblettavsnittet med följande:
- Bredd: 70 % (dator), 70 % (surfplatta), 80 % (telefon)
- Max bredd: 980px
Uppdatera sedan gradientriktningen till 90 grader för alla tre linjerna.
- Lutningsriktning: 90 grader
Nu är det dags att placera våra textmodulflikar till vänster om våra rader för att få de vertikala flikarna vi vill ha.
Se även: Hur man skapar en snurrhjulsmeny på Hover i Divi
Öppna inställningen för textmodulflik på första raden och uppdatera följande:
- Marginal (skrivbord): -50px (överst), -150px (vänster)
Öppna sedan fliken Sektion 2nd Line Text-modulinställningar och uppdatera följande:
- Marginal (dator): 0px (överst), -150px (vänster)
Och för den sista fliken i den tredje raden, uppdatera följande:
- Marginal (dator): 50px topp, -150px kvar
Slutresultat
Låt oss nu se det slutliga resultatet.
Ladda ner DIVI nu!!!
Slutsats
Med lite kreativitet och kraften i Divi kan du skapa några ganska coola anpassade flikar med hjälp av Divi-linjer. Det finns vissa begränsningar för vad du kan visa.
Till exempel, med denna konfiguration måste alla rader ha samma höjd som sektionen. Men för att inte behöva använda ett plugin är detta en bra lösning.
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.
.
