Doriți să creați un meniu Divi original sub forma unei roți rotative la hover?
Crearea unei rotițe de meniu rotative la hover este o modalitate distractivă de a prezenta link-uri utile pe dvs site-ul 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 cool de subcategorie pt blogul tău.
În acest tutorial, vă vom arăta cum să creați o rotiță de meniu rotativă la hover în Divi. Acest lucru se poate face folosind o combinație de opțiuni Divi încorporate și câteva fragmente CSS personalizate.
studiu
Înainte de a intra în acest tutorial, să aruncăm o privire asupra rezultatului pe care vrem să-l obținem.
Descărcați DIVI acum!!!
Creați o pagină nouă cu Divi Builder
Pentru a începe, veți avea nevoie de următoarele:
Din tabloul de bord WordPress, accesați Pagini> Adăugare nouă pentru a crea o pagină nouă.
Dați-i un titlu care să aibă sens pentru dvs. și faceți clic Utilizați Divi Builder
Apoi faceți clic pe Începeți să construiți (Construiește de la zero)
După aceea, veți avea o pânză goală pentru a începe proiectarea în Divi.
Designul roții de meniu rotative în Divi
Creați secțiunea și linia 1
În secțiunea prezentă implicit, adăugați un rând cu următoarea structură de coloană.
Apoi adăugați un modul text la linia cu următorul conținut.
Apoi, actualizați designul textului după cum urmează:
- Font text: Share Tech
- Spațiere dintre litere de text: 1px
- Titlul 2 Dimensiunea textului: 8vw
Adăugați linia 2 pentru a construi roata
Apoi, trebuie să adăugăm un nou rând la o coloană de sub rândul 1.
Înainte de a începe să adăugăm modulele noastre de text pentru link-urile noastre, trebuie să ne proiectăm linia ca o roată. Vor fi o mulțime de optimizări necesare la rând pentru a face designul roților noastre.
Citiți și: Cum să dezvăluiți conținut pe divizorul de secțiune Hover în Divi
Pentru a începe, deschideți setările Rândului 2 și actualizați următoarele:
- Culoare de fundal: #02366b
- Culoare gradient de fundal stânga: rgba(0,0,0,0.45)
- Culoare gradient de fundal dreapta: #02366b
- Tip gradient: circular
- Direcția radială: Centru
- Poziția de pornire: 36%
- Poziția finală: 0%
- Utilizați lățimea jgheab personalizată: DA
- Lățimea jgheabului: 1
- Latime: 500px
- Lățime maximă: 500 px (desktop), automat (tabletă și telefon)
- Înălțime: 500 px (desktop), automat (tabletă și telefon)
- Umplutură (desktop): 0px (sus și jos)
- Umplutură (tabletă și telefon): 20 px (sus, jos și stânga)
- Marja (Telefon): -10% (Dreapta)
Trebuie să setăm atât înălțimea, cât și lățimea liniei la 500 de pixeli, astfel încât să fie un pătrat perfect. Acest lucru ne va permite să-i dăm o formă circulară perfectă folosind opțiunea Divi pentru colțuri rotunjite (raza chenarului).
- Colțuri rotunjite: 50%
Apoi putem adăuga un alt nivel de design de cerc folosind o umbră de casetă, după cum urmează:
- Intensitatea estomparii umbrei casetei: 0px
- Intensitatea răspândirii umbrei casetei: 210px
- Culoare umbră: rgba(2,54,107,0.66)
Apoi, vom adăuga un mic fragment CSS pentru a centra vertical conținutul rândului nostru. Sub fila Avansat, adăugați următorul CSS personalizat în elementul principal.
display:flex;align-items:center;
Adăugarea de linkuri
Fiecare legătură din roată va fi creată cu un modul Text. Vom crea un total de șase module Text. Cinci dintre module Text va conține link-urile pentru roată, iar celălalt va conține titlul meniului.
Începeți prin a crea un nou modul „Text”.
Apoi, actualizați setările de text după cum urmează:
- Body: „Element 1”
- Font text: Share Tech
- Culoare text: #ffffff
- Dimensiune: 16px (implicit), 20px (Hover)
- Spațiere între litere: 1px
- Înălțimea liniei textului: 60 px
- Lățime: 250 px (desktop), automat (tabletă și telefon)
- Înălțime: 60px
- Umplutură (stânga): 20px
Salvați setările pentru moment. Apoi duplicați modulul de text de 4 ori pentru a crea un total de 5 module de text.
Poziţionare Legături/module 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ă/translată și rotesc modulul în poziție.
Descoperiți și: Cum se creează o rețea de coloană fluidă la hover în divi
Pentru a facilita acest lucru, implementați modul de afișare wireframe și etichetați modulele Text începând cu legătura 1 în partea de sus până la legătura 5 în partea de jos.
Legătura 1
Vom începe prin a edita Link 1. Deschideți setările modulului Text pentru Link 1 și actualizați următoarele:
- Transform Translate (axa Y): 120 px (desktop), 0 px (tabletă și telefon)
- Transform Rotire (axa Z): 60 de grade (desktop), 0 px (tabletă și telefon)
- Origine: 50% (centru dreapta)
Legătura 2
Deschideți setările modulului de text pentru linkul 2 și actualizați următoarele:
- Transforma
- Traducere (axa Y): 60px (desktop), 0px (tabletă și telefon)
- Rotația axei Z: 30 de grade (desktop), 0px (tabletă și telefon)
- Origine: 50% (centru dreapta)
Legătura 3
Deoarece modulul Text pentru linkul 3 se află în mijloc, îl putem lăsa pe loc.
Legătura 4
Deschideți setările modulului de text pentru linkul 2 și actualizați următoarele:
- Transformare:
- Traduceți axa Y: -60px (desktop), 0px (tabletă și telefon)
- Rotația axei Z: -30deg (desktop), 0px (tabletă și telefon)
- Origine: 50% (centru dreapta)
Legătura 5
Deschideți setările modulului de text pentru linkul 2 și actualizați următoarele:
- Transformare:
- Traduceți axa Y: -120px (desktop), 0px (tabletă și telefon)
- Rotația axei Z: -60deg (desktop), 0px (tabletă și telefon)
- Origine: 50% (centru dreapta)
Acum să vedem rezultatul de până acum. Observați cum legăturile/textele din modulele de text se desfășoară perfect de-a lungul perimetrului cercului.
S-a adăugat eticheta de meniu
Pentru a adăuga eticheta meniului, va trebui să adăugăm un alt modul Text peste cele cinci module Text pe care le avem deja. Continuați și adăugați un nou modul Text deasupra linkului 1.
Apoi, actualizați conținutul corpului cu următoarele:
Menu
Apoi, pentru a accelera proiectarea, copiați stilurile modulului Text pentru linkul 3 și inserați aceste stiluri de modul în noul modul Text.
Apoi, actualizați următoarele:
- Înălțimea liniei textului: 300px (desktop), 20px (tabletă și telefon)
- Înălțime: restabiliți setarea implicită (automat)
- Rotație de transformare (axa Z): 180 de grade (desktop), 0 grade (tabletă și telefon)
- Originea transformării: 50% (centru dreapta)
Odată terminat, trebuie să dăm modulului Menu Label Text o poziție absolută. Pentru a face acest lucru, adăugați următorul CSS personalizat la elementul principal:
position: absolute!important;
Acum afla rezultatul. Ar trebui să vedeți că elementul de meniu este cu susul în jos în partea dreaptă a roții.
S-a adăugat efectul de rotație la linie/roată
Pentru a adăuga efectul de hover rotativ la rând, actualizați setările rândului după cum urmează:
- Rotație de transformare (axa Z): 180 de grade (desktop), 0 grade (hover), 0 grade (tabletă și telefon)
Apoi, actualizați setările de tranziție după cum urmează:
- Durata tranziției: 450 ms
- Tranziția curbei de viteză: ușurință de intrare-ieșire
Acum uitați-vă cum se învârte roata când treceți peste ea.
Crearea unui aspect cu două coloane pentru secțiune
În prezent, aspectul este format din două rânduri cu o coloană stivuite unul peste altul. Cu toate acestea, putem folosi proprietatea flex css pentru a alinia cele două linii pe orizontală.
Pentru a face acest lucru, putem adăuga un mic fragment de CSS personalizat la secțiune. Odată ce s-a terminat, va trebui să ajustăm puțin distanța pentru a face lucrurile corect.
Deschideți setările secțiunii și adăugați următorul CSS personalizat la elementul principal:
display:flex;
Actualizați linia 1 spațiere
Apoi, actualizați dimensiunea și spațierea liniei 1 după cum urmează:
- Lățime: 40% (desktop)
- Marja (desktop): 5% rămas
Rezultat final
Acum să vedem rezultatul final.
Descărcați DIVI acum!!!
Design alternativ pe jumătate de roată
Un design alternativ frumos este să ascundeți jumătatea dreaptă a roții în exteriorul secțiunii, astfel încât legăturile să fie ascunse și apoi dezvăluite la hover.
Pentru a face acest lucru, continuați și duplicați întreaga secțiune care conține desenul pe care tocmai l-am creat.
În secțiunea duplicat, actualizați parametrii din linia 1 după cum urmează:
- Lățime: 70% (desktop)
Apoi, actualizați parametrii din linia 2 pentru a împinge roata din secțiune, după cum urmează:
- Marja: -250px dreapta
Trebuie să folosim -250px deoarece lățimea totală a roții este de 500px și vrem să ascundem exact jumătate din linie.
Apoi setați vizibilitatea secțiunii la ascuns, după cum urmează:
- Overflow orizontal: Ascuns
- Overflow vertical: Ascuns
Iată rezultatul final.
Descărcați DIVI acum!!!
Concluzie
O roată rotativă este unul dintre acele elemente de design elegant care se pot angaja vizitatori cu un efect de hover subtil și unic. Și este destul de uimitor cât de ușor poate fi realizat acest design cu setările de design încorporate ale Divi.
Sperăm că acest tutorial vă va inspira pentru următoarele proiecte Divi. Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.
De asemenea, puteți consulta resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
