Vill du skapa en original Divi-meny i form av ett roterande hjul när du svävar?
Att skapa ett snurrande menyhjul när du svävar är ett roligt sätt att visa upp användbara länkar på din webbplats. Detta skulle vara ett bra sätt att tillhandahålla flera uppmaningar i en rubrik för att dirigera användarna dit de behöver gå. Och det skulle också vara en cool underkategorimeny för din blogg.
I den här handledningen kommer vi att visa dig hur du skapar ett roterande menyhjul när du svävar i Divi. Detta kan göras med en kombination av inbyggda Divi-alternativ och några anpassade css-utdrag.
undersökningen
Innan vi går in i den här handledningen, låt oss ta en titt på resultatet vi vill uppnå.
Ladda ner DIVI nu!!!
Skapa en ny sida med Divi Builder
För att komma igång behöver du följande:
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.
Design av det roterande menyhjulet i Divi
Skapa avsnitt och rad 1
I avsnittet som finns som standard, lägg till en rad med följande kolumnstruktur.
Lägg sedan till en textmodul på raden med följande innehåll.
Uppdatera sedan textdesignen enligt följande:
- Textfont: Share Tech
- Text Brevavstånd: 1px
- Rubrik 2 Textstorlek: 8vw
Lägg till rad 2 för att bygga hjulet
Därefter måste vi lägga till en ny rad i en kolumn under rad 1.
Innan vi börjar lägga till våra textmoduler för våra länkar måste vi designa vår linje som ett hjul. Det kommer att finnas massor av optimeringar som behövs på raden för att göra vår hjuldesign.
Läs också: Hur man avslöjar innehåll på Hover Section Divider i Divi
För att komma igång öppnar du Inställningar för rad 2 och uppdaterar följande:
- Bakgrundsfärg: #02366b
- Vänster bakgrundsgradientfärg: rgba(0,0,0,0.45)
- Höger bakgrundsgradientfärg: #02366b
- Gradienttyp: Cirkulär
- Radiell riktning: Centrum
- Startposition: 36%
- Slutposition: 0 %
- Använd anpassad rännbredd: JA
- Rännans bredd: 1
- Bredd: 500px
- Max bredd: 500px (dator), automatisk (surfplatta och telefon)
- Höjd: 500px (dator), automatisk (surfplatta och telefon)
- Utfyllnad (Skrivbord): 0px (överst och nedre)
- Utfyllnad (surfplatta och telefon): 20px (överst, botten och vänster)
- Marginal (telefon): -10 % (höger)
Vi måste ställa in både höjden och bredden på linjen till 500 pixlar så att det blir en perfekt kvadrat. Detta kommer att tillåta oss att ge den en perfekt cirkulär form med Divis avrundade hörn (kantradie).
- Rundade hörn: 50 %
Sedan kan vi lägga till en annan nivå av cirkeldesign med hjälp av en boxskugga enligt följande:
- Box Shadow Blur Styrka: 0px
- Box Shadow Spridning Styrka: 210px
- Skuggfärg: rgba(2,54,107,0.66)
Därefter lägger vi till ett litet utdrag av CSS för att vertikalt centrera innehållet i vår rad. Under fliken Advanced Open water, lägg till följande anpassade CSS i huvudelementet.
display:flex;align-items:center;
Lägga till länkar
Varje länk i hjulet kommer att skapas med en modul text. Vi kommer att skapa totalt sex moduler text. Fem av modulerna text kommer att innehålla länkarna till hjulet och den andra kommer att innehålla titeln på menyn.
Börja med att skapa en ny "Text"-modul.
Uppdatera sedan textinställningarna enligt följande:
- Body: "Element 1"
- Textfont: Share Tech
- Textfärg: #ffffff
- Storlek: 16px (standard), 20px (hovra)
- Bokstavsavstånd: 1px
- Textradshöjd: 60px
- Bredd: 250px (skrivbord), automatisk (surfplatta och telefon)
- Höjd: 60px
- Utfyllnad (vänster): 20px
Spara inställningarna tills vidare. Duplicera sedan textmodulen 4 gånger för att skapa totalt 5 textmoduler.
Positionering av textlänkar/moduler
Vi är nu redo att placera våra länkar längs hjulets omkrets. För att göra detta kommer vi att uppdatera varje modul text med transformeringsalternativ som flyttar/översätter och roterar modulen på plats.
Upptäck också: Hur man skapar ett vätskekolumnrutnät på hover i divi
För att underlätta detta, distribuera trådramsvisningsläget och märk textmodulerna som börjar med länk 1 överst till länk 5 längst ned.
Länk 1
Vi börjar med att redigera länk 1. Öppna textmodulens inställningar för länk 1 och uppdatera följande:
- Transform Translate (Y-axel): 120 px (dator), 0 px (surfplatta och telefon)
- Transform Rotera (Z-axel): 60 grader (Skrivbord), 0 px (Surfplatta och telefon)
- Ursprung: 50 % (mitten höger)
Länk 2
Öppna textmodulinställningarna för länk 2 och uppdatera följande:
- Förvandla
- Översätt (Y-axel): 60px (dator), 0px (surfplatta och telefon)
- Z-axelrotation: 30 grader (dator), 0 px (surfplatta och telefon)
- Ursprung: 50 % (mitten höger)
Länk 3
Eftersom Textmodulen för länk 3 är i mitten kan vi lämna den på plats.
Länk 4
Öppna textmodulinställningarna för länk 2 och uppdatera följande:
- Omvandla:
- Översätt Y-axel: -60px (dator), 0px (surfplatta och telefon)
- Z-axelrotation: -30 grader (skrivbord), 0 px (surfplatta och telefon)
- Ursprung: 50 % (mitten höger)
Länk 5
Öppna textmodulinställningarna för länk 2 och uppdatera följande:
- Omvandla:
- Översätt Y-axel: -120px (dator), 0px (surfplatta och telefon)
- Z-axelrotation: -60 grader (skrivbord), 0 px (surfplatta och telefon)
- Ursprung: 50 % (mitten höger)
Låt oss nu se resultatet så här långt. Lägg märke till hur länkarna/texterna i textmodulerna löper perfekt längs cirkelns omkrets.
Lade till menyetikett
För att lägga till menyetiketten måste vi lägga till ytterligare en textmodul ovanpå de fem textmoduler vi redan har. Fortsätt och lägg till en ny textmodul ovanför länk 1.
Uppdatera sedan kroppsinnehållet med följande:
Menu
Sedan, för att påskynda designen, kopiera textmodulstilarna för länk 3 och klistra in dessa modulstilar i den nya textmodulen.
Uppdatera sedan följande:
- Textradshöjd: 300px (dator), 20px (surfplatta och telefon)
- Höjd: återställ standardinställning (auto)
- Transformrotation (Z-axel): 180 grader (Skrivbord), 0 grader (Surfplatta och telefon)
- Transform Ursprung: 50 % (mitten höger)
När vi är klara måste vi ge Meny Label Text-modulen en absolut position. För att göra detta, lägg till följande anpassade CSS till huvudelementet:
position: absolute!important;
Ta nu reda på resultatet. Du bör se menyalternativet är upp och ner till höger om hjulet.
Lade till snurrande svävningseffekt till lina/hjul
För att lägga till den roterande svävningseffekten till raden, uppdatera radinställningarna enligt följande:
- Transformrotation (Z-axel): 180 grader (Skrivbord), 0 grader (Hover), 0 grader (Surfplatta och telefon)
Uppdatera sedan övergångsinställningarna enligt följande:
- Övergångslängd: 450ms
- Speed Curve Transition: Enkel-in-ut
Se nu hur hjulet snurrar när det hålls över det.
Skapa en layout med två kolumner för avsnittet
För närvarande består layouten av två rader med en kolumn staplade ovanpå varandra. Däremot kan vi använda egenskapen flex css för att justera de två linjerna horisontellt.
För att göra detta kan vi lägga till ett litet utdrag av anpassad CSS till avsnittet. När det är gjort måste vi justera avståndet lite för att det ska bli rätt.
Öppna avsnittsinställningarna och lägg till följande anpassade css till huvudelementet:
display:flex;
Uppdatera rad 1 avstånd
Uppdatera sedan storleken och avståndet på rad 1 enligt följande:
- Bredd: 40 % (skrivbord)
- Marginal (Skrivbord): 5 % kvar
Slutresultat
Låt oss nu se det slutliga resultatet.
Ladda ner DIVI nu!!!
Alternativ halvhjulsdesign
En trevlig alternativ design är att dölja den högra halvan av hjulet på utsidan av sektionen så att länkarna döljs och sedan avslöjas vid hovring.
För att göra detta, gå vidare och duplicera hela avsnittet som innehåller ritningen vi just skapade.
I dubblettavsnittet uppdaterar du parametrarna i rad 1 enligt följande:
- Bredd: 70% (dator)
Uppdatera sedan inställningarna i rad 2 för att trycka ut hjulet ur avsnittet enligt följande:
- Marginal: -250px höger
Vi måste använda -250px eftersom hjulets totala bredd är 500px och vi vill dölja exakt hälften av linjen.
Ställ sedan in sektionens synlighet till dold enligt följande:
- Horisontellt överflöde: Dold
- Vertikalt överflöde: Dold
Här är det slutliga resultatet.
Ladda ner DIVI nu!!!
Slutsats
Ett vridlänkshjul är ett av de snygga designelementen som kan engagera besökare med en subtil och unik svävningseffekt. Och det är ganska fantastiskt hur lätt den här designen kan göras med Divis inbyggda designinställningar.
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.
.
