Dëshironi të krijoni një menu origjinale Divi në formën e një rrote rrotulluese në lëvizje?

Krijimi i një rrote menyje rrotulluese në hover është një mënyrë argëtuese për të shfaqur lidhje të dobishme në tuaj Site Web. Kjo do të ishte një mënyrë e shkëlqyer për të ofruar thirrje të shumta për veprim në një kokë për t'i drejtuar përdoruesit ku duhet të shkojnë. Dhe do të ishte gjithashtu një menu e lezetshme nënkategorie për blogun tuaj.

Në këtë tutorial, ne do t'ju tregojmë se si të krijoni një rrotë menyje rrotulluese kur rri pezull në Divi. Kjo mund të bëhet duke përdorur një kombinim të opsioneve të integruara Divi dhe disa copa të personalizuara css.

studim

Përpara se të hyjmë në këtë tutorial, le të hedhim një vështrim në rezultatin që duam të arrijmë.

Shkarkoni DIVI Tani!!!

Krijo një faqe të re me Divi Builder

Për të filluar, do t'ju duhet sa më poshtë:

Nga pulti i WordPress, shkoni te Faqet> Shto të Reja për të krijuar një faqe të re.

menu origjinale Divi në formën e një rrote rrotulluese në hover

Jepini një titull që ka kuptim për ju dhe klikoni Përdorni Divi Builder

Pastaj kliko Filloni të ndërtoni (Ndërtoni nga Gërvishtja)

Pas kësaj, ju do të keni një kanavacë të zbrazët për të filluar projektimin në Divi.

Dizajni i rrotës së menusë rrotulluese në Divi

Krijoni seksionin dhe rreshtin 1

Në seksionin e pranishëm si parazgjedhje, shtoni një rresht me strukturën e kolonës vijuese.

Pastaj shtoni një modul teksti në rreshtin me përmbajtjen e mëposhtme.

Më pas, përditësoni dizajnin e tekstit si më poshtë:

  • Fonti i tekstit: Share Tech
  • Hapësira e shkronjave të tekstit: 1 px
  • Titulli 2 Madhësia e tekstit: 8vw

Shtoni rreshtin 2 për të ndërtuar rrotën

Më pas, duhet të shtojmë një rresht të ri në një kolonë poshtë rreshtit 1.

Përpara se të fillojmë të shtojmë modulet tona Teksti për lidhjet tona, duhet ta dizajnojmë linjën tonë si një rrotë. Do të ketë shumë optimizime të nevojshme në rresht për të bërë dizajnin tonë të rrotave.

Lexo gjithashtu: Si të zbuloni përmbajtjen në ndarësin e seksionit Hover në Divi 

Për të filluar, hapni Cilësimet e rreshtit 2 dhe përditësoni sa vijon:

  • Ngjyra e sfondit: #02366b
  • Ngjyra e gradientit të sfondit të majtë: rgba (0,0,0,0.45)
  • Ngjyra e gradientit të sfondit të djathtë: #02366b
  • Lloji i gradientit: Rrethor
  • Drejtimi radial: Qendër
  • Pozicioni fillestar: 36%
  • Pozicioni përfundimtar: 0%
  • Përdorni gjerësinë e ulluqit të personalizuar: PO
  • Gjerësia e kanalit: 1
  • Gjerësia: 500 px
  • Gjerësia maksimale: 500 px (Desktop), automatike (Tablet dhe telefon)
  • Lartësia: 500 px (Desktop), automatike (Tableti dhe telefoni)
  • Mbushje (Desktop): 0 px (lart dhe poshtë)
  • Mbushja (tableti dhe telefoni): 20 px (lart, poshtë dhe majtas)
  • Marzhi (Telefon): -10% (djathtas)

Ne duhet të vendosim si lartësinë ashtu edhe gjerësinë e rreshtit në 500 piksele në mënyrë që të jetë një katror i përsosur. Kjo do të na lejojë t'i japim një formë rrethore perfekte duke përdorur opsionin e këndeve të rrumbullakosura të Divi (rrezja e kufirit).

  • Këndet e rrumbullakosura: 50%

Më pas, ne mund të shtojmë një nivel tjetër të dizajnit të rrethit duke përdorur një hije kutie si më poshtë:

  • Forca e turbullimit të hijes së kutisë: 0 px
  • Forca e përhapjes së hijes së kutisë: 210 px
  • Ngjyra e hijes: rgba (2,54,107,0.66)

Më pas, do të shtojmë një fragment të vogël të CSS për të përqendruar vertikalisht përmbajtjen e rreshtit tonë. Nën skedën Avancuar, shtoni CSS-në e mëposhtme të personalizuar në elementin kryesor.

display:flex;align-items:center;

Shtimi i lidhjeve

Çdo lidhje në timon do të krijohet me një modul Tekst. Ne do të krijojmë gjithsej gjashtë module Tekst. Pesë nga modulet Tekst do të përmbajë lidhjet për timonin dhe tjetra do të përmbajë titullin e menysë.

Filloni duke krijuar një modul të ri "Text".

Më pas, përditësoni cilësimet e tekstit si më poshtë:

  • Trupi: “Elementi 1”
  • Fonti i tekstit: Share Tech
  • Ngjyra e tekstit: #ffffff
  • Madhësia: 16 px (e parazgjedhur), 20 px (Hover)
  • Hapësira e shkronjave: 1 px
  • Lartësia e rreshtit të tekstit: 60 px
  • Gjerësia: 250 px (Desktop), automatike (Tablet dhe telefon)
  • Lartësia: 60 px
  • Mbushje (majtas): 20 px

Ruani cilësimet për momentin. Më pas dublikojeni modulin e tekstit 4 herë për të krijuar gjithsej 5 module teksti.

Pozicionimi i lidhjeve/moduleve të tekstit

Tani jemi gati të vendosim lidhjet tona përgjatë perimetrit të timonit. Për ta bërë këtë, ne do të përditësojmë çdo modul Tekst me opsione transformimi që lëvizin/përkthejnë dhe rrotullojnë modulin në vend.

Zbuloni gjithashtu: Si të krijoni një rrjet kolone fluide në hover në divi

Për ta lehtësuar këtë, vendosni modalitetin e shfaqjes së kornizës së telit dhe etiketoni modulet e tekstit duke filluar me lidhjen 1 në krye deri në lidhjen 5 në fund.

Lidhja 1

Do të fillojmë duke redaktuar Lidhjen 1. Hapni cilësimet e modulit të tekstit për Lidhjen 1 dhe përditësoni sa vijon:

  • Transformo Translate (boshti Y): 120 px (Desktop), 0 px (Tablet dhe telefon)
  • Rrotullimi i transformimit (boshti Z): 60 gradë (Desktop), 0 px (Tableti dhe telefoni)
  • Origjina: 50% (në qendër djathtas)

Lidhja 2

Hapni cilësimet e modulit të tekstit për lidhjen 2 dhe përditësoni sa vijon:

  • Transformoj
    • Përkthe (boshti Y): 60 pikselë (Desktop), 0 px (Tableti dhe telefon)
    • Rrotullimi i boshtit Z: 30 gradë (Desktop), 0 px (Tableti dhe telefoni)
    • Origjina: 50% (në qendër djathtas)

Lidhja 3

Meqenëse moduli Tekst për lidhjen 3 është në mes, mund ta lëmë në vend.

Lidhja 4

Hapni cilësimet e modulit të tekstit për lidhjen 2 dhe përditësoni sa vijon:

  • Transformimi:
    • Përkthe boshtin Y: -60 px (Desktop), 0px (Tablet dhe telefon)
    • Rrotullimi i boshtit Z: -30 gradë (Desktop), 0 px (Tableti dhe telefoni)
    • Origjina: 50% (në qendër djathtas)

Lidhja 5

Hapni cilësimet e modulit të tekstit për lidhjen 2 dhe përditësoni sa vijon:

  • Transformimi:
    • Përkthe boshtin Y: -120 px (Desktop), 0px (Tablet dhe telefon)
    • Rrotullimi i boshtit Z: -60 gradë (Desktop), 0 px (Tableti dhe telefoni)
    • Origjina: 50% (në qendër djathtas)

Tani le të shohim rezultatin deri tani. Vini re se si lidhjet/tekstet në modulet e tekstit shkojnë në mënyrë të përsosur përgjatë perimetrit të rrethit.

Etiketa e menusë e shtuar

Për të shtuar etiketën e menysë, do të duhet të shtojmë një modul tjetër Teksti në krye të pesë moduleve të tekstit që kemi tashmë. Shkoni përpara dhe shtoni një modul të ri Teksti mbi lidhjen 1.

Më pas, përditësoni përmbajtjen e trupit me sa vijon:

Menu

Më pas, për të shpejtuar dizajnin, kopjoni stilet e modulit Tekst për lidhjen 3 dhe ngjitini këto stile të modulit në modulin e ri Tekst.

Më pas, përditësoni sa vijon:

  • Lartësia e linjës së tekstit: 300 px (Desktop), 20 px (Tableti dhe telefoni)
  • Lartësia: rivendosni cilësimin e paracaktuar (auto)
  • Rrotullimi i transformimit (boshti Z): 180 gradë (Desktop), 0 gradë (Tableti dhe telefoni)
  • Origjina e transformimit: 50% (në qendër djathtas)

Pasi të kemi përfunduar, duhet t'i japim modulit të tekstit të etiketës së menysë një pozicion absolut. Për ta bërë këtë, shtoni CSS-në e mëposhtme të personalizuar në elementin kryesor:

position: absolute!important;

Tani zbuloni rezultatin. Ju duhet të shihni se artikulli i menusë është me kokë poshtë në të djathtë të timonit.

U shtua efekti rrotullues rrotullues në linjë/rrotë

Për të shtuar efektin rrotullues të rripit në rresht, përditësoni cilësimet e rreshtit si më poshtë:

  • Rrotullimi i transformimit (boshti Z): 180 gradë (Desktop), 0 gradë (Hover), 0 gradë (Tableti dhe telefoni)

Më pas, përditësoni cilësimet e tranzicionit si më poshtë:

  • Kohëzgjatja e tranzicionit: 450 ms
  • Tranzicioni i kurbës së shpejtësisë: Lehtësia në dalje

Tani shikoni se si rrotullohet rrota kur rri pezull mbi të.

Krijimi i një plan urbanistik me dy kolona për seksionin

Aktualisht, faqosja përbëhet nga dy rreshta me një kolonë të vendosura njëra mbi tjetrën. Megjithatë, ne mund të përdorim veçorinë flex css për të lidhur dy rreshtat horizontalisht. 

Për ta bërë këtë, ne mund të shtojmë një pjesë të vogël të CSS të personalizuar në seksion. Pasi të jetë bërë kjo, do të na duhet të rregullojmë pak hapësirën për t'i bërë gjërat siç duhet.

Hapni cilësimet e seksionit dhe shtoni css-në e mëposhtme të personalizuar në elementin kryesor:

display:flex;

Përditëso ndarjen e linjës 1

Më pas, përditësoni madhësinë dhe hapësirën e rreshtit 1 si më poshtë:

  • Gjerësia: 40% (Desktop)
  • Marzhi (Desktop): 5% e mbetur

Rezultati përfundimtar

Tani le të shohim rezultatin përfundimtar.

Shkarkoni DIVI Tani!!!

Dizajn alternativ me gjysmë rrota

Një dizajn alternativ interesant është fshehja e gjysmës së djathtë të timonit jashtë seksionit në mënyrë që lidhjet të fshihen dhe më pas të zbulohen kur rri pezull. 

Për ta bërë këtë, vazhdoni dhe kopjoni të gjithë seksionin që përmban vizatimin që sapo krijuam. 

Në seksionin e kopjuar, përditësoni parametrat në rreshtin 1 si më poshtë:

  • Gjerësia: 70% (desktop)

Më pas, përditësoni cilësimet në rreshtin 2 për të shtyrë timonin jashtë seksionit si më poshtë:

  • Margjina: -250 px djathtas

Duhet të përdorim -250 px sepse gjerësia totale e rrotës është 500 px dhe duam të fshehim saktësisht gjysmën e vijës.

Më pas vendosni dukshmërinë e seksionit të fshehur si më poshtë:

  • Vërshimi horizontal: I fshehur
  • Vërshimi vertikal: I fshehur

Këtu është rezultati përfundimtar.

menu origjinale Divi në formën e një rrote rrotulluese në hover

Shkarkoni DIVI Tani!!!

Përfundim

Një rrotë me lidhje kthese është një nga ato elemente të dizajnit elegant që mund të ndikojë vizitorët me një efekt delikate dhe unik hover. Dhe është shumë e mahnitshme se sa lehtë mund të bëhet ky dizajn me cilësimet e dizajnit të integruar të Divi. 

Shpresojmë që ky tutorial t'ju frymëzojë për projektet tuaja të ardhshme Divi. Nëse keni ndonjë shqetësim apo sugjerim, na gjeni në pjesa e komenteve për ta diskutuar atë.

Ju gjithashtu mund të konsultoheni burimet tona, nëse keni nevojë për më shumë elemente për të realizuar projektet tuaja të krijimit të faqeve në Internet, duke u konsultuar me udhëzuesin tonë për Krijimi i blogut të WordPress ose atë më Divi: tema më e mirë e WordPress të të gjitha kohërave.

Por në ndërkohë, ndajeni këtë artikull në rrjetet tuaja të ndryshme sociale.

...