Kunne du tænke dig at lave en original Divi-menu i form af et roterende hjul, når du svæver?
At oprette et drejende menuhjul, når du svæver, er en sjov måde at vise nyttige links på din Websted. Dette ville være en fantastisk måde at give flere opfordringer til handling i en header for at dirigere brugerne, hvor de skal hen. Og det ville også være en fed underkategori menu til din blog.
I denne vejledning viser vi dig, hvordan du opretter et roterende menuhjul, når du svæver i Divi. Dette kan gøres ved at bruge en kombination af indbyggede Divi-indstillinger og nogle brugerdefinerede css-uddrag.
undersøgelse
Før vi går ind i denne tutorial, lad os tage et kig på det resultat, vi ønsker at opnå.
Download DIVI nu!!!
Opret en ny side med Divi Builder
For at komme i gang skal du bruge følgende:
Fra WordPress-dashboardet, gå til Sider> Tilføj nyt for at oprette en ny side.
Giv den en titel, der giver mening for dig, og klik Brug Divi Builder
klik derefter på Begynd at bygge (Byg fra skrammer)
Derefter har du et tomt lærred til at begynde at designe i Divi.
Design af det roterende menuhjul i Divi
Opret sektion og linje 1
I den sektion, der er til stede som standard, skal du tilføje en række med følgende kolonnestruktur.
Tilføj derefter et tekstmodul til linjen med følgende indhold.
Opdater derefter tekstdesignet som følger:
- Tekstskrifttype: Del Tech
- Tekstbogstavafstand: 1px
- Overskrift 2 Tekststørrelse: 8vw
Tilføj linje 2 for at bygge hjulet
Dernæst skal vi tilføje en ny række til en kolonne under række 1.
Før vi begynder at tilføje vores tekstmoduler til vores links, skal vi designe vores linje som et hjul. Der vil være masser af optimeringer nødvendige på rækken for at lave vores hjuldesign.
Læs også: Sådan afsløres indhold på Hover Section Divider i Divi
For at komme i gang skal du åbne Row 2 Settings og opdatere følgende:
- Baggrundsfarve: #02366b
- Venstre baggrundsgradientfarve: rgba(0,0,0,0.45)
- Højre baggrundsgradientfarve: #02366b
- Gradienttype: Cirkulær
- Radial retning: Center
- Udgangsposition: 36%
- Slutposition: 0 %
- Brug tilpasset tagrendebredde: JA
- Rendebredde: 1
- Bredde: 500px
- Maks. bredde: 500px (desktop), automatisk (tablet og telefon)
- Højde: 500px (desktop), automatisk (tablet og telefon)
- Polstring (skrivebord): 0px (top og bund)
- Polstring (tablet og telefon): 20px (øverst, nederst og venstre)
- Margin (telefon): -10 % (højre)
Vi skal indstille både højden og bredden af linjen til 500 pixels, så det er en perfekt firkant. Dette vil give os mulighed for at give den en perfekt cirkulær form ved hjælp af Divis afrundede hjørner (kantradius).
- Afrundede hjørner: 50 %
Dernæst kan vi tilføje et andet niveau af cirkeldesign ved hjælp af en kasseskygge som følger:
- Box Shadow Blur Styrke: 0px
- Box Shadow Spread Styrke: 210px
- Skyggefarve: rgba(2,54,107,0.66)
Dernæst tilføjer vi et lille uddrag af CSS for at centrere indholdet af vores række lodret. Under fanen Avanceret, tilføj følgende tilpassede CSS i hovedelementet.
display:flex;align-items:center;
Tilføjelse af links
Hvert led i hjulet vil blive oprettet med et modul tekst. Vi vil oprette i alt seks moduler tekst. Fem af modulerne tekst vil indeholde links til hjulet, og den anden vil indeholde titlen på menuen.
Start med at oprette et nyt "Tekst"-modul.
Opdater derefter tekstindstillingerne som følger:
- Bodysuit: "Element 1"
- Tekstskrifttype: Del Tech
- Tekstfarve: #ffffff
- Størrelse: 16px (standard), 20px (Hover)
- Bogstavafstand: 1px
- Tekstlinjehøjde: 60px
- Bredde: 250px (desktop), automatisk (tablet og telefon)
- Højde: 60px
- Polstring (venstre): 20px
Gem indstillingerne indtil videre. Dupliker derefter tekstmodulet 4 gange for at skabe i alt 5 tekstmoduler.
Positionering Tekstlinks/moduler
Vi er nu klar til at placere vores led langs omkredsen af hjulet. For at gøre dette vil vi opdatere hvert modul tekst med transformationsmuligheder, der flytter/oversætter og roterer modulet på plads.
Opdag også: Sådan opretter du et flydende kolonnegitter på hover i divi
For at lette dette skal du implementere wireframe-visningstilstanden og mærke tekstmodulerne begyndende med link 1 øverst til link 5 nederst.
Link 1
Vi starter med at redigere Link 1. Åbn tekstmodulets indstillinger for Link 1 og opdater følgende:
- Transform Translate (Y-akse): 120 px (desktop), 0 px (tablet og telefon)
- Transformer rotation (Z-akse): 60 grader (desktop), 0 px (tablet og telefon)
- Oprindelse: 50 % (i midten til højre)
Link 2
Åbn tekstmodulets indstillinger for link 2 og opdater følgende:
- Transform
- Oversæt (Y-akse): 60px (desktop), 0px (tablet og telefon)
- Z-akse rotation: 30 grader (desktop), 0px (tablet og telefon)
- Oprindelse: 50 % (i midten til højre)
Link 3
Da tekstmodulet til link 3 er i midten, kan vi lade det sidde.
Link 4
Åbn tekstmodulets indstillinger for link 2 og opdater følgende:
- Transformer:
- Oversæt Y-akse: -60px (desktop), 0px (tablet og telefon)
- Z-akse rotation: -30 grader (desktop), 0px (tablet og telefon)
- Oprindelse: 50 % (midt til højre)
Link 5
Åbn tekstmodulets indstillinger for link 2 og opdater følgende:
- Transformer:
- Oversæt Y-akse: -120px (desktop), 0px (tablet og telefon)
- Z-akse rotation: -60 grader (desktop), 0px (tablet og telefon)
- Oprindelse: 50 % (i midten til højre)
Lad os nu se resultatet indtil videre. Læg mærke til, hvordan links/tekster i tekstmodulerne kører perfekt langs cirklens omkreds.
Tilføjet menumærke
For at tilføje menuetiketten skal vi tilføje endnu et tekstmodul oven på de fem tekstmoduler, vi allerede har. Gå videre og tilføj et nyt tekstmodul over link 1.
Opdater derefter kropsindholdet med følgende:
Menu
For at fremskynde designet skal du kopiere tekstmodulets stilarter til link 3 og indsætte disse modulstile i det nye tekstmodul.
Opdater derefter følgende:
- Tekstlinjehøjde: 300px (desktop), 20px (tablet og telefon)
- Højde: Gendan standardindstillingen (auto)
- Transform rotation (Z-akse): 180 grader (desktop), 0 grader (tablet og telefon)
- Transformationsoprindelse: 50 % (midt til højre)
Når det er gjort, er vi nødt til at give Menu Label Text-modulet en absolut position. For at gøre dette skal du tilføje følgende tilpassede CSS til hovedelementet:
position: absolute!important;
Find nu ud af resultatet. Du bør se, at menupunktet er på hovedet til højre for hjulet.
Tilføjet spinning hover effekt til line/hjul
For at tilføje den roterende svæveeffekt til rækken skal du opdatere rækkeindstillingerne som følger:
- Transformer rotation (Z-akse): 180 grader (skrivebord), 0 grader (hover), 0 grader (tablet og telefon)
Opdater derefter overgangsindstillingerne som følger:
- Overgangsvarighed: 450ms
- Speed Curve Transition: Nem ind-ud
Se nu, hvordan hjulet drejer, når det svæver over det.
Oprettelse af et to-kolonne layout til sektionen
I øjeblikket består layoutet af to en-kolonne rækker stablet oven på hinanden. Vi kan dog bruge egenskaben flex css til at justere de to linjer vandret.
For at gøre dette kan vi tilføje et lille uddrag af tilpasset CSS til sektionen. Når det er gjort, bliver vi nødt til at justere afstanden lidt for at få tingene helt rigtige.
Åbn sektionsindstillingerne og tilføj følgende brugerdefinerede css til hovedelementet:
display:flex;
Opdater linje 1 afstand
Opdater derefter størrelsen og afstanden til linje 1 som følger:
- Bredde: 40 % (skrivebord)
- Margin (Desktop): 5 % tilbage
Endelig resultat
Lad os nu se det endelige resultat.
Download DIVI nu!!!
Alternativt halvhjulsdesign
Et interessant alternativt design er at skjule den højre halvdel af hjulet uden for sektionen, så linkene skjules og derefter afsløres ved svævning.
For at gøre dette skal du gå videre og duplikere hele afsnittet, der indeholder den tegning, vi lige har oprettet.
I dubletafsnittet skal du opdatere parametrene i linje 1 som følger:
- Bredde: 70% (desktop)
Opdater derefter indstillingerne i linje 2 for at skubbe hjulet ud af sektionen som følger:
- Margin: -250px højre
Vi skal bruge -250px, fordi hjulets samlede bredde er 500px, og vi vil skjule præcis halvdelen af linjen.
Indstil derefter sektionens synlighed til skjult som følger:
- Vandret overløb: Skjult
- Lodret overløb: Skjult
Her er det endelige resultat.
Download DIVI nu!!!
Konklusion
Et dreje-link hjul er et af de stilfulde designelementer, der kan engagere besøgende med en subtil og unik svæveeffekt. Og det er ret forbløffende, hvor nemt dette design kan gøres med Divis indbyggede designindstillinger.
Vi håber, at denne vejledning vil inspirere dig til dine næste Divi-projekter. Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.
Du kan også konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...
