Vill du presentera dina funktioner eller produkter i form av en flik Divi med svävningseffekt?
Letar du efter nya kreativa sätt att visa upp funktioner och/eller produkter på dina webbsidor?
Om så är fallet, fortsätt att läsa, för i den här artikeln kommer vi att visa dig hur du visar funktioner i flikar vid hovring med endast de inbyggda alternativen för Divi. Möjligheterna du har med detta tillvägagångssätt är oändliga och de kommer säkert att låta dig förstå Divi på en djupare nivå.
Tabb-hovereffekten kommer bara att inträffa på skrivbordet. På mindre skärmstorlekar kommer de att visas på sina normala former.
Låt oss gå!
undersökningen
Innan vi dyker in i den här handledningen, låt oss ta en titt på resultatet vi vill uppnå.
Låt oss börja skapa processen med Divi
Lägg till en ny sektion
Lutningbakgrund
Lägg till en ny sida eller öppna en befintlig sida och lägg till ett nytt avsnitt. Öppna avsnittsinställningarna och lägg till en gradientbakgrund till avsnittet.
- Vänster färg: #f2f2f2
- Höger färg: #ffffff
- Lutningsriktning: 87 grader
- Vänsterposition: 20%
- Höger position: 80%
avstånd
Ändra sedan följande avståndsinställningar:
- Utfyllnad (topp och botten): 0px
Lägg till en ny rad
Strukturen av kolonnen
Fortsätt genom att lägga till en ny rad i sektionen med följande kolumnstruktur:
Bakgrundsfärg
Utan att lägga till några moduler ännu, öppna radinställningarna och ändra bakgrundsfärgen.
- Bakgrundsfärg: #ffffff
Dimensionering och justering
På fliken Designa, dra ned alternativet Storlek och ändra följande inställningar:
- Använd anpassad rännvidd: YESS
- Rännans bredd: 1
- Bredd: 400px
- Radjustering: Vänster
Hover Sizing
Ändra alternativ Bredd i inställningarna för svävstorlek. Detta gör att linjen kan expandera när den svävar.
- Bredd (Hover): 2 pixlar
avstånd
Gå sedan till avståndsinställningarna i alternativet Förband
- Utfyllnad (topp och botten): 0px
Kant (skrivbord)
Lägg till "20px" i det övre högra hörnet av raden och lägg även till en vänsterkant på raden.
- Rundade hörn (skrivbord): 20px (övre högra hörnet)
- Vänster kantbredd: 20px
- Vänster kantfärg: #6d44ff
Gräns vid svävning
Ta bort det övre högra rundade hörnet av "20px" när du håller muspekaren genom att lägga till "0px" istället.
Box Shadow (skrivbord)
Lägg slutligen till en subtil skugga.
- Box Shadow Blur Styrka: 80px
- Box Shadow Spridningsstyrka: -10px
- Skuggfärg: rgba(0,0,0,0.11)
Hover Shadow
Och ändra skuggfärgen till en helt genomskinlig färg när du svävar.
- Box Shadow: rgba(255,255,255,0)
Lägg till Blurb-modul i raden
Lägg till innehåll
Nu när vi är klara med att ändra alla radinställningar kan vi gå vidare och lägga till en Blurb-modul i kolumnen. Använd gärna valfri annan modul du väljer.
När du har lagt till modulen, lägg till några innehåll som du väljer.
Välj ikonen
Välj sedan en ikon som du väljer.
Ikoninställningar
Och ändra utseendet på ikonen i ikoninställningar. Gå till fliken Designa
- Ikonfärg: #5323ff
- Bild/ikonplacering: Överst
- Bild/ikonbredd: 50px
Inställningar för texttitel (skrivbord)
Ändra sedan titelinställningarna.
- Title Font: Poppins
- Textjustering: centrerad
- Titel Text Färg: #5323ff
- Titel Textstorlek: 25px
- Bokstavsavstånd: -1px
- Linjehöjd: 1 em
Håll muspekaren för texttitelinställningar
Och ändra höjden på titelraden när du håller muspekaren.
- Titelradshöjd: 1,5 em
Inställningar för brödtext (skrivbord)
Gå sedan till brödtextinställningarna och gör några ändringar. Detta inkluderar att ändra textstorleken till '0px'. Detta kommer att hjälpa oss att få brödtexten att endast visas när du håller muspekaren.
- Body Font: Poppins
- Kroppstypsnittsvikt: lätt
- Textjustering: centrerad
- Brödtextfärg: #000000
- Brödtextstorlek: 0px (dator), 15px (surfplatta och telefon)
- Linjehöjd: 2,2 em
Inställningar för brödtext vid muspekaren
För att säkerställa att brödtexten visas när du svävar, ändra storleken på pekaren.
- Brödtextstorlek: 15px
Avstånd (Skrivbord)
För att ge modulen lite utrymme, ändrar vi följande avståndsparametrar:
- Utfyllnad (topp och botten): 80px
Hover Avstånd
Vi kommer att ändra inställningarna för hovringsavstånd.
- Utfyllnad (topp och botten): 80px
- Stoppning (vänster och höger): 20vw
Klona rad 3 gånger
När du är klar med att redigera den första raden och dess Blurb-modul kan du gå vidare och klona raden så många gånger du vill.
Redigera linje och blurb-modul #2
Ändra linjekantsfärg
Låt oss börja med att ändra färgen på linjens vänstra kant.
- Vänster kantfärg: #00ffcc
Redigera blurb-innehåll och ikon
Öppna sedan Blurb-modulens inställningar och ändra ikonen.
Ändra färg för blurb-modulikon
Med ikonfärg.
- Ikonfärg: #00eda6
Ändra titelfärg
Och färgen på titeltexten.
- Titel Text Färg: #00eda6
Redigera linje och Burb #3-modul
Linjens kantfärg
Låt oss ändra kantfärgen på den vänstra raden.
- Vänster kantfärg: #afebff
Redigera blurb-innehåll och ikon
Låt oss också ändra ikonen och innehåll av presentationstexten.
Ändra färg för blurb-modulikon
Ändra även ikonens färg.
- Ikonfärg: #68d9ff
Ändra titeltextfärg
Och färgen på titeltexten också.
- Titel Text Färg: #68d9ff
Redigera linje och blurb-modul #4
Ändra linjekantsfärg
I nästa och sista modul, ändra även färgen på radens vänstra kant.
- Vänster kantfärg: #dd87cf
Redigera blurb-innehåll och ikon
Öppna Blurb-modulen i raden och ändra ikonen och innehåll av modulen.
Ändra färg för blurb-modulikon
Med ikonfärg.
- Ikonfärg: #dd6aca
Ändra titeltextfärg
Och färgen på titeltexten också.
- Titel Text Färg: #dd6aca
undersökningen
Nu när vi har gått igenom handledningen, låt oss ta en sista titt på resultatet.
Ladda ner DIVI nu!!!
Slutsats
I den här artikeln visade vi dig hur du använder Divis inbyggda alternativ endast för att skapa flikar tillgängliga när du svävar.
Detta tillvägagångssätt hjälper dig att dela innehåll om funktioner eller produkter interaktivt.
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.
.
