Vil du lage en original Divi-meny i form av et roterende hjul når du svever?

Å lage et snurrende menyhjul mens du svever er en morsom måte å vise frem nyttige linker på nettstedet Web. Dette ville være en fin måte å gi flere oppfordringer til handling i en overskrift for å dirigere brukerne dit de trenger å gå. Og det ville også vært en kul underkategorimeny for bloggen din.

I denne opplæringen vil vi vise deg hvordan du lager et roterende menyhjul når du svever i Divi. Dette kan gjøres ved å bruke en kombinasjon av innebygde Divi-alternativer og noen tilpassede css-snutter.

undersøkelsen

Før vi går inn i denne opplæringen, la oss ta en titt på resultatet vi ønsker å oppnå.

Last ned DIVI nå!!!

Opprett en ny side med Divi Builder

For å komme i gang trenger du følgende:

Fra WordPress-dashbordet, gå til Sider> Legg til nye for å opprette en ny side.

original Divi-meny i form av et roterende hjul ved sveving

Gi den en tittel som gir mening for deg og klikk Bruk Divi Builder

deretter klikker du Begynn å bygge (Bygg fra bunnen av)

Etter det vil du ha et blankt lerret for å begynne å designe i Divi.

Design av det roterende menyhjulet i Divi

Lag seksjon og linje 1

I delen som er tilstede som standard, legg til en rad med følgende kolonnestruktur.

Legg deretter til en tekstmodul på linjen med følgende innhold.

Deretter oppdaterer du tekstdesignet som følger:

  • Tekstfont: Del Tech
  • Tekst Bokstavavstand: 1px
  • Overskrift 2 Tekststørrelse: 8vw

Legg til linje 2 for å bygge hjulet

Deretter må vi legge til en ny rad i en kolonne under rad 1.

Før vi begynner å legge til tekstmodulene våre for lenkene våre, må vi designe linjen vår som et hjul. Det vil være mange optimaliseringer som trengs på raden for å lage hjuldesignet vårt.

Les også: Hvordan avsløre innhold på Hover Section Divider i Divi 

For å komme i gang, åpne rad 2-innstillinger og oppdater følgende:

  • Bakgrunnsfarge: #02366b
  • Venstre bakgrunnsgradientfarge: rgba(0,0,0,0.45)
  • Høyre bakgrunnsgradientfarge: #02366b
  • Gradienttype: Sirkulær
  • Radiell retning: Sentrum
  • Utgangsposisjon: 36 %
  • Sluttposisjon: 0 %
  • Bruk egendefinert takrennebredde: JA
  • Rennebredde: 1
  • Bredde: 500px
  • Maks bredde: 500 piksler (stasjonær datamaskin), automatisk (nettbrett og telefon)
  • Høyde: 500px (stasjonær datamaskin), automatisk (nettbrett og telefon)
  • Polstring (skrivebord): 0px (øverst og bunn)
  • Polstring (nettbrett og telefon): 20px (øverst, bunn og venstre)
  • Margin (telefon): -10 % (høyre)

Vi må sette både høyden og bredden på linjen til 500 piksler slik at det blir en perfekt firkant. Dette vil tillate oss å gi den en perfekt sirkulær form ved å bruke Divis avrundede hjørner (kantradius).

  • Avrundede hjørner: 50 %

Deretter kan vi legge til et annet nivå av sirkeldesign ved å bruke en boksskygge som følger:

  • Box Shadow Blur Styrke: 0px
  • Box Shadow Spread Styrke: 210px
  • Skyggefarge: rgba(2,54,107,0.66)

Deretter legger vi til et lite utdrag av CSS for å sentrere innholdet i raden vertikalt. Under fanen Avansert, legg til følgende egendefinerte CSS i hovedelementet.

display:flex;align-items:center;

Legger til lenker

Hver lenke i hjulet vil bli opprettet med en modul tekst. Vi skal lage totalt seks moduler tekst. Fem av modulene tekst vil inneholde koblingene til hjulet og den andre vil inneholde tittelen på menyen.

Start med å lage en ny "Tekst"-modul.

Deretter oppdaterer du tekstinnstillingene som følger:

  • Bodysuit: «Element 1»
  • Tekstfont: Del Tech
  • Tekstfarge: #ffffff
  • Størrelse: 16px (standard), 20px (Hover)
  • Bokstavavstand: 1px
  • Tekstlinjehøyde: 60px
  • Bredde: 250px (stasjonær datamaskin), automatisk (nettbrett og telefon)
  • Høyde: 60px
  • Polstring (venstre): 20px

Lagre innstillingene for nå. Dupliser deretter tekstmodulen 4 ganger for å lage totalt 5 tekstmoduler.

Plassering Tekstlenker/moduler

Vi er nå klare til å plassere lenkene våre langs omkretsen av hjulet. For å gjøre dette vil vi oppdatere hver modul tekst med transformeringsalternativer som flytter/oversetter og roterer modulen på plass.

Oppdag også: Hvordan lage et flytende kolonnenett på hover i divi

For å lette dette, distribuer wireframe-visningsmodus og merk tekstmodulene som starter med lenke 1 øverst til lenke 5 nederst.

Link 1

Vi starter med å redigere Link 1. Åpne tekstmodulinnstillingene for Link 1 og oppdater følgende:

  • Transform Translate (Y-akse): 120 px (stasjonær datamaskin), 0 px (nettbrett og telefon)
  • Transform Roter (Z-akse): 60 grader (stasjonær), 0 px (nettbrett og telefon)
  • Opprinnelse: 50 % (midt til høyre)

Link 2

Åpne tekstmodulinnstillingene for lenke 2 og oppdater følgende:

  • Transform
    • Oversett (Y-akse): 60 piksler (stasjonær datamaskin), 0 piksler (nettbrett og telefon)
    • Z-akse rotasjon: 30 grader (skrivebord), 0 px (nettbrett og telefon)
    • Opprinnelse: 50 % (midt til høyre)

Link 3

Siden Tekstmodulen for lenke 3 er i midten, kan vi la den stå på plass.

Link 4

Åpne tekstmodulinnstillingene for lenke 2 og oppdater følgende:

  • Forvandle:
    • Oversett Y-aksen: -60px (stasjonær datamaskin), 0px (nettbrett og telefon)
    • Z-akse rotasjon: -30 grader (skrivebord), 0px (nettbrett og telefon)
    • Opprinnelse: 50 % (midt til høyre)

Link 5

Åpne tekstmodulinnstillingene for lenke 2 og oppdater følgende:

  • Forvandle:
    • Oversett Y-aksen: -120px (stasjonær datamaskin), 0px (nettbrett og telefon)
    • Z-akse rotasjon: -60 grader (skrivebord), 0px (nettbrett og telefon)
    • Opprinnelse: 50 % (midt til høyre)

La oss nå se resultatet så langt. Legg merke til hvordan lenkene/tekstene i tekstmodulene løper perfekt langs omkretsen av sirkelen.

Lagt til menyetikett

For å legge til menyetiketten, må vi legge til en annen tekstmodul på toppen av de fem tekstmodulene vi allerede har. Gå videre og legg til en ny tekstmodul over lenke 1.

Deretter oppdaterer du kroppsinnholdet med følgende:

Menu

Deretter, for å få fart på utformingen, kopierer du tekstmodulstilene for lenke 3 og limer inn disse modulstilene i den nye tekstmodulen.

Deretter oppdaterer du følgende:

  • Tekstlinjehøyde: 300 piksler (stasjonær datamaskin), 20 piksler (nettbrett og telefon)
  • Høyde: gjenopprett standardinnstilling (auto)
  • Transformrotasjon (Z-akse): 180 grader (stasjonær PC), 0 grader (nettbrett og telefon)
  • Transformeringsopprinnelse: 50 % (midt til høyre)

Når det er gjort, må vi gi menyetiketttekstmodulen en absolutt posisjon. For å gjøre dette, legg til følgende tilpassede CSS til hovedelementet:

position: absolute!important;

Finn ut resultatet nå. Du skal se at menyelementet er opp ned til høyre for hjulet.

Lagt til spinnende sveveeffekt til line/hjul

For å legge til den roterende sveveeffekten til raden, oppdater radinnstillingene som følger:

  • Transform rotasjon (Z-aksen): 180 grader (skrivebord), 0 grader (sveve), 0 grader (nettbrett og telefon)

Deretter oppdaterer du overgangsinnstillingene som følger:

  • Overgangsvarighet: 450ms
  • Speed ​​​​Curve Transition: Enkel inn-ut

Se nå hvordan hjulet snurrer når det holdes over det.

Opprette en to-kolonne layout for delen

Foreløpig består oppsettet av to rader med én kolonne stablet oppå hverandre. Imidlertid kan vi bruke flex css-egenskapen til å justere de to linjene horisontalt. 

For å gjøre dette kan vi legge til et lite utdrag av tilpasset CSS i delen. Når det er gjort, må vi justere avstanden litt for å få ting riktig.

Åpne seksjonsinnstillingene og legg til følgende egendefinerte css til hovedelementet:

display:flex;

Oppdater linje 1 avstand

Deretter oppdaterer du størrelsen og avstanden til linje 1 som følger:

  • Bredde: 40 % (skrivebord)
  • Margin (skrivebord): 5 % igjen

Endelig resultat

La oss se det endelige resultatet.

Last ned DIVI nå!!!

Alternativ halvhjulsdesign

Et interessant alternativ design er å skjule den høyre halvdelen av hjulet utenfor seksjonen slik at lenkene blir skjult og deretter avslørt ved sveving. 

For å gjøre dette, fortsett og dupliser hele delen som inneholder tegningen vi nettopp opprettet. 

I duplikatdelen oppdaterer du parameterne i linje 1 som følger:

  • Bredde: 70 % (skrivebord)

Deretter oppdaterer du innstillingene i linje 2 for å skyve hjulet ut av seksjonen som følger:

  • Marg: -250 px høyre

Vi må bruke -250px fordi den totale bredden på hjulet er 500px og vi ønsker å skjule nøyaktig halvparten av linjen.

Sett deretter synligheten til delen til skjult som følger:

  • Horisontalt overløp: Skjult
  • Vertikal overløp: Skjult

Her er det endelige resultatet.

original Divi-meny i form av et roterende hjul ved sveving

Last ned DIVI nå!!!

konklusjonen

Et svinghjul er et av de stilige designelementene som kan engasjere Besøkende med en subtil og unik sveveeffekt. Og det er ganske utrolig hvor enkelt dette designet kan gjøres med Divis innebygde designinnstillinger. 

Vi håper denne veiledningen vil inspirere deg til dine neste Divi-prosjekter. Hvis du har noen bekymringer eller forslag, finn oss inn kommentarfeltet å diskutere det.

Du kan også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.

Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.

...