Cum să creați o roată de meniu rotativă pe Hover

Crearea unei rotițe de meniu rotative pe hover este o modalitate distractivă de a prezenta linkuri utile pe site-ul dvs. web. Aceasta ar fi o modalitate excelentă de a oferi mai multe apeluri la acțiune într-un antet pentru a direcționa utilizatorii unde trebuie să meargă. Și ar fi, de asemenea, un meniu interesant pentru subcategorii pentru blogul dvs.

În acest tutorial, vă voi arăta cum să creați o roată de meniu rotativă pe hover în Divi. Acest lucru se poate face folosind o combinație de opțiuni Divi încorporate și câteva fragmente de css personalizate.

Trage cu ochiul

Descărcați aspectul GRATUIT

Pentru a pune mâna pe desenele din acest tutorial, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Pentru a importa aspectul în pagina dvs., pur și simplu extrageți fișierul zip și trageți fișierul json în Divi Builder.

Să trecem la tutorial, nu-i așa?

Abonați-vă la canalul nostru Youtube

Ce trebuie să începeți

Pentru a începe, va trebui să aveți următoarele:

1. Tema Divi instalată și activă
2. O nouă pagină creată pentru a construi de la zero pe partea frontală (constructor vizual)

După aceea, veți avea o pânză goală pentru a începe să proiectați în Divi.

Crearea designului rotirii meniului rotativ în Divi

Ideea de bază

Roata este creată prin transformarea unui rând într-un element circular, oferindu-i o înălțime și o lățime de 500 px și colțuri rotunjite de 50%. Fiecare legătură de meniu este creată într-un modul de text separat și sunt aliniate de-a lungul perimetrului rândului circular prin rotirea fiecărui modul de text pe raza (centrul) rândului. Această configurație este similară cu modul în care ați crea text curbat în Divi.

Creați secțiunea și rândul 1

Creați o secțiune obișnuită cu un rând cu o coloană.

Apoi adăugați un modul text la rândul cu următorul conținut.

Apoi actualizați designul textului după cum urmează:

Font text: Share Tech
Spațiere scrisoare text: 1 px
Rubrica 2 Dimensiune text: 8vw

Adăugați rândul 2 pentru a construi roata

Apoi, trebuie să adăugăm un nou rând cu o coloană sub Rândul 1.

Înainte de a începe să adăugăm modulele noastre text pentru linkurile noastre, trebuie să ne proiectăm rândul ca o roată. Vor exista o mulțime de optimizări necesare pentru rând pentru a face designul roții noastre. Pentru a începe, deschideți setările pentru rândul 2 și actualizați următoarele:

Culoare fundal: # 02366b
Culoarea din stânga a gradientului de fundal: rgba (0,0,0,0.45)
Culoarea dreaptă a gradientului de fundal: # 02366b
Tipul gradientului: radial
Direcție radială: centru
Poziția inițială: 36%
Poziție finală: 0%

Utilizați lățimea personalizată a jgheabului: DA
Lățimea jgheabului: 1
Lățime: 500 px
Lățime maximă: 500 px (desktop), automată (tabletă și telefon)
Înălțime: 500 px (desktop), automat (tabletă și telefon)
Umplutură (desktop): 0 px în partea de sus, 0 px în partea de jos
Căptușeală (tabletă și telefon): 20 px sus, 20 px jos, 20 px stânga
Marja (telefon): -10% corect

Trebuie să setăm atât înălțimea, cât și lățimea rândului la 500 px, astfel încât să fie un pătrat perfect. Acest lucru ne va permite să îi oferim o formă circulară perfectă utilizând opțiunea colțuri rotunjite (raza chenarului) din Divi.

Colțuri rotunjite: 50%

Apoi putem adăuga un alt nivel de proiectare a cercului folosind o umbră de casetă după cum urmează:

Box Shadow: vezi captura de ecran
Puterea neclarității umbrei cutiei: 0 px
Puterea răspândirii umbrei cutiei: 210 px
Culoare umbră: rgba (2,54,107,0,66)

În continuare vom adăuga un mic fragment de CSS pentru a face conținutul rândului nostru centrat vertical. Sub fila avansată, adăugați următorul CSS personalizat în Elementul principal.

display:flex;
align-items:center;

Asta se ocupă de setările de rând pentru moment. Ne vom întoarce mai târziu pentru a adăuga efectul nostru de rotire.

Adăugarea linkurilor

Fiecare legătură din roată va fi creată cu un modul text. Vom crea în total șase module de text. Cinci dintre modulele de text vor conține linkurile pentru roată și unul dintre modulele de text va conține titlul meniului.

Începeți prin crearea unui nou modul de text.

Apoi actualizați setările de text după cum urmează:

Conținutul corpului: „Element de legătură”

Font text: Share Tech
Culoarea textului textului: #ffffff
Dimensiunea textului textului: 16 px (implicit), 20 px (trecere cu mouse-ul)
Spațiere scrisoare text: 1 px
Înălțimea liniei de text: 60 px
Lățime: 250 px (desktop), automat (tabletă și telefon)
Înălțime: 60 px
Căptușeală: 20 px stânga

Salvați setările pentru moment. Apoi copiați modulul text de 4 ori pentru a crea un total de 5 module text.

Poziționarea linkurilor / modulelor de text

Acum suntem gata să ne poziționăm legăturile de-a lungul perimetrului roții. Pentru a face acest lucru, vom actualiza fiecare modul text cu opțiuni de transformare care mută / traduc și rotesc modulul în loc.

Pentru a face acest lucru mai ușor, implementați modul de vizualizare wireframe și etichetați modulele text începând cu Link 1 în partea de sus până la Link 5 în partea de jos.

Legătura 1

Vom începe cu editarea Link 1. Deschideți setările modulului text pentru Link 1 și actualizați următoarele:

Transformă axa Y tradusă: 120 px (desktop), 0 px (tabletă și telefon)
Transform Rotate Axa Z: 60 de grade (desktop), 0 px (tabletă și telefon)
Transformarea originii: 50% 100% (centru dreapta)

Legătura 2

Deschideți setările modulului text pentru Link 2 și actualizați următoarele:

Transformă axa Y: 60 px (desktop), 0 px (tabletă și telefon)
Transform Rotate Axa Z: 30 de grade (desktop), 0 px (tabletă și telefon)
Transformarea originii: 50% 100% (centru dreapta)

Legătura 3

Deoarece modulul text pentru link-ul 3 este la mijloc, îl putem lăsa la locul său.

Legătura 4

Deschideți setările modulului text pentru Link 2 și actualizați următoarele:

Transformă axa Y: -60 px (desktop), 0 px (tabletă și telefon)
Transform Rotate Axa Z: -30deg (desktop), 0 px (tabletă și telefon)
Transformarea originii: 50% 100% (centru dreapta)

Legătura 5

Deschideți setările modulului text pentru Link 2 și actualizați următoarele:

Transformă axa Y: -120px (desktop), 0px (tabletă și telefon)
Transform Rotate Axa Z: -60deg (desktop), 0 px (tabletă și telefon)
Transformarea originii: 50% 100% (centru dreapta)

Acum, să verificăm rezultatul de până acum. Observați cum legăturile / textul din modulele de text se rotesc perfect de-a lungul perimetrului cercului.

Adăugarea etichetei meniului

Pentru a adăuga eticheta meniului, va trebui să adăugăm un alt modul de text în partea de sus a celor cinci module de text pe care le avem deja. Continuați și adăugați un nou modul de text deasupra Link-ului 1.

Apoi actualizați conținutul corpului cu următoarele:

<p>menu</p>

Asigurați-vă că eticheta meniului este înfășurată în eticheta ap. Acest lucru vă va asigura că înălțimea liniei este recunoscută în setările de text.

Apoi, pentru a accelera proiectarea, copiați stilurile modulelor modulului de text pentru Link 3 și lipiți acele stiluri de module în noul modul de text.

Apoi actualizați următoarele:

Înălțimea liniei: 300 px (desktop), 20 px (tabletă și telefon)
Înălțime: restabiliți setarea implicită (automat)

Înălțimea liniei trebuie să fie de 300 px, astfel încât să fie egală cu înălțimea coloanei de conținut, care este, de asemenea, 300 px (5 module de text fiecare cu o înălțime de 60 px este egal cu 300 px). Acest lucru vă va asigura că textul rămâne centrat vertical.

Apoi, trebuie să rotim modulul de text al etichetei meniului cu 180 de grade, astfel încât acesta să se afișeze corect pe partea opusă a roții. Acest lucru va permite vizitatorului să vadă eticheta meniului înainte de starea de deplasare care învârte linkurile în vizualizare.

Transform Rotate Axa Z: 180deg (desktop), 0deg (tabletă și telefon)
Transformarea originii: 50% 100% (centru dreapta)

Odată terminat, trebuie să acordăm modulului text al etichetei meniului o poziție absolută. Pentru a face acest lucru, adăugați următorul CSS personalizat la elementul principal:

position: absolute !important;

Acum verificați rezultatul. Ar trebui să vedeți că elementul de meniu este cu susul în jos, în dreapta roții.

Adăugarea efectului de rotire la rând / roată

Pentru a adăuga efectul de rotire la rând, actualizați setările rândului după cum urmează:

Transformare Rotire axa Z: 180deg (desktop), 0deg (deplasare, 0deg (tabletă și telefon)

Apoi actualizați setările de tranziție după cum urmează:

Durata tranziției: 450 ms
Curba vitezei de tranziție: ușurință-în-ieșire

Acum verificați cum se învârte roata.

Realizarea unui aspect cu două coloane pentru secțiune

În prezent, aspectul este format din două rânduri cu o coloană stivuite una peste alta. Cu toate acestea, putem folosi proprietatea flex css pentru a alinia cele două rânduri pe orizontală. Pentru a face acest lucru, putem adăuga un mic fragment de CSS personalizat în secțiune. După ce ați terminat, va trebui să ajustăm puțin distanța pentru a face lucrurile să arate corect.

Deschideți setările secțiunii și adăugați următorul css personalizat la elementul principal:

display:flex;

Actualizați spațiul rândului 1

Apoi, actualizați dimensiunea și spațiul pentru rândul 1 după cum urmează:

Lățime: 40% (desktop), 100% (tabletă și telefon)
Marja (desktop): 5% rămas
Marja (tableta): 5% la stânga, 5% la dreapta
Marja (telefon): 5% corect

Atingeri finale

Pe afișajul tabletei și al telefonului va trebui să adăugați o marjă superioară la modulul Text 1 Link 1.

Marjă (tabletă): partea superioară de 30 px

Și puteți adăuga oricând un separator de secțiune la secțiune pentru a face designul complet.

Rezultat final

Acum să verificăm rezultatul final.

Design alternativ pe jumătate de roată

Un design alternativ interesant este să ascundeți jumătatea dreaptă a roții în afara secțiunii, astfel încât legăturile să fie ascunse și apoi să fie dezvăluite în cursa de deplasare. Pentru a face acest lucru, continuați și copiați întreaga secțiune care conține designul pe care tocmai l-am făcut. În secțiunea duplicat, actualizați setările rândului 1 după cum urmează:

Lățime: 70% (desktop)

Apoi actualizați setările pentru rândul 2 pentru a împinge roata în afara secțiunii după cum urmează:

Marja: -250px dreapta

Trebuie să folosim -250 px pentru că lățimea totală a roții este de 500 px și vrem să ascundem exact jumătate din rând.

Apoi setați vizibilitatea secțiunii la ascuns după cum urmează:

Iată designul final.

Gânduri finale

O roată de legătură rotativă este unul dintre acele elemente de design elegante care pot atrage vizitatorii cu un efect subtil și unic de plutire. Și este destul de uimitor cât de mult din acest design puteți face doar cu setările de design încorporate ale Divi. Sper că acest lucru adaugă ceva suplimentar în cureaua de instrumente de proiectare pentru următorul dvs. proiect.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!