Come creare una ruota del menu rotante al passaggio del mouse?
Pubblicato: 2019-08-04Creare una rotellina del menu rotante al passaggio del mouse è un modo divertente per mostrare link utili sul tuo sito web. Questo sarebbe un ottimo modo per fornire più inviti all'azione in un'intestazione per indirizzare gli utenti dove devono andare. E sarebbe anche un fantastico menu di sottocategorie per il tuo blog.
In questo tutorial, ti mostrerò come creare una ruota del menu rotante al passaggio del mouse in Divi. Questo può essere fatto utilizzando una combinazione di opzioni Divi integrate e alcuni frammenti di CSS personalizzati.
Sbirciata
Scarica il layout GRATUITAMENTE
Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.
Scarica gratis
Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.
Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!
Per importare il layout nella tua pagina, estrai semplicemente il file zip e trascina il file json nel Divi Builder.
Andiamo al tutorial, vero?
Iscriviti al nostro canale Youtube
Cosa ti serve per iniziare
Per iniziare, dovrai avere quanto segue:
- Il tema Divi installato e attivo
- Una nuova pagina creata per costruire da zero sul front-end (visual builder)
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Creazione del design della ruota del menu rotante in Divi
L'idea di base
La ruota viene creata trasformando una riga in un elemento circolare assegnandole un'altezza e una larghezza di 500 px e angoli arrotondati del 50%. Ogni collegamento al menu viene creato in un modulo di testo separato e viene allineato lungo il perimetro della riga circolare ruotando ciascun modulo di testo lungo il raggio (centro) della riga. Questa configurazione è simile a come creeresti un testo curvo in Divi.
Crea la sezione e la riga 1
Crea una sezione regolare con una riga di una colonna.
Quindi aggiungi un modulo di testo alla riga con il seguente contenuto.
Quindi aggiorna il design del testo come segue:
Carattere di testo: condividi tecnologia
Spaziatura delle lettere del testo: 1px
Intestazione 2 Dimensione testo: 8vw
Aggiungi la riga 2 per costruire la ruota
Successivamente, dobbiamo aggiungere una nuova riga a una colonna sotto la riga 1.
Prima di iniziare ad aggiungere i nostri moduli di testo per i nostri collegamenti, dobbiamo progettare la nostra riga come una ruota. Ci sarà un bel po' di ottimizzazioni necessarie alla fila per realizzare il nostro design delle ruote. Per iniziare, apri le impostazioni per la riga 2 e aggiorna quanto segue:
Colore di sfondo: #02366b
Colore sfondo sfumato sinistro: rgba(0,0,0,0.45)
Colore sfondo sfumato destro: #02366b
Tipo di gradiente: radiale
Direzione radiale: Centro
Posizione di partenza: 36%
Posizione finale: 0%
Usa larghezza grondaia personalizzata: S
Larghezza grondaia: 1
Larghezza: 500 px
Larghezza massima: 500 px (desktop), automatico (tablet e telefono)
Altezza: 500 px (desktop), automatico (tablet e telefono)
Imbottitura (desktop): 0px in alto, 0px in basso
Imbottitura (tablet e telefono): 20px in alto, 20px in basso, 20px a sinistra
Margine (telefono): -10% a destra
Dobbiamo impostare sia l'altezza che la larghezza della riga su 500 px in modo che sia un quadrato perfetto. Questo ci permetterà di dargli una forma circolare perfetta usando l'opzione angoli arrotondati (raggio del bordo) in Divi.
Angoli Arrotondati: 50%
Quindi possiamo aggiungere un altro livello di design del cerchio usando un'ombra di scatola come segue:
Box Shadow: vedi screenshot
Forza sfocatura ombra scatola: 0px
Forza di diffusione dell'ombra della scatola: 210 px
Colore dell'ombra: rgba (2,54,107,0.66)
Successivamente aggiungeremo un piccolo frammento di CSS per centrare verticalmente il contenuto della nostra riga. Nella scheda Avanzate, aggiungi il seguente CSS personalizzato nell'Elemento principale.
display:flex; align-items:center;
Questo si occupa delle impostazioni della riga per ora. Torneremo per aggiungere il nostro effetto hover rotante in seguito.
Aggiungere i link
Ogni collegamento nella ruota verrà creato con un modulo di testo. Creeremo un totale di sei moduli di testo. Cinque dei moduli di testo conterranno i collegamenti per la ruota e uno dei moduli di testo conterrà il titolo del menu.
Inizia creando un nuovo modulo di testo.
Quindi aggiorna le impostazioni del testo come segue:
Contenuto del corpo: "Elemento di collegamento"
Carattere di testo: condividi tecnologia
Colore del testo del testo: #ffffff
Dimensione del testo del testo: 16 px (predefinito), 20 px (al passaggio del mouse)
Spaziatura delle lettere del testo: 1px
Altezza riga di testo: 60 px
Larghezza: 250 px (desktop), automatico (tablet e telefono)
Altezza: 60 px
Imbottitura: 20px a sinistra
Salva le impostazioni per ora. Quindi duplica il modulo di testo 4 volte per creare un totale di 5 moduli di testo.
Posizionamento dei link/moduli di testo
Ora siamo pronti per posizionare le nostre maglie lungo il perimetro della ruota. Per fare ciò, aggiorneremo ogni modulo di testo con opzioni di trasformazione che spostano/traducono e ruotano il modulo in posizione.
Per semplificare questa operazione, distribuisci la modalità di visualizzazione wireframe ed etichetta i moduli di testo iniziando da Link 1 in alto fino a Link 5 in basso.
Collegamento 1
Inizieremo con la modifica del collegamento 1. Aprire le impostazioni del modulo di testo per il collegamento 1 e aggiornare quanto segue:
Transform Translate Y Axis: 120px (desktop), 0px (tablet e telefono)
Trasforma Ruota asse Z: 60 gradi (desktop), 0 px (tablet e telefono)
Origine trasformazione: 50% 100% (centro destra)
Collegamento 2
Apri le impostazioni del modulo di testo per Link 2 e aggiorna quanto segue:
Transform Translate Asse Y: 60px (desktop), 0px (tablet e telefono)
Trasforma Ruota Asse Z: 30deg (desktop), 0px (tablet e telefono)
Origine trasformazione: 50% 100% (centro destra)
Collegamento 3
Poiché il modulo di testo per il collegamento 3 è nel mezzo, possiamo lasciarlo al suo posto.
Collegamento 4
Apri le impostazioni del modulo di testo per Link 2 e aggiorna quanto segue:
Transform Translate Y Axis: -60px (desktop), 0px (tablet e telefono)
Trasforma Ruota asse Z: -30 gradi (desktop), 0 px (tablet e telefono)
Origine trasformazione: 50% 100% (centro destra)
Collegamento 5
Apri le impostazioni del modulo di testo per Link 2 e aggiorna quanto segue:
Transform Translate Y Axis: -120px (desktop), 0px (tablet e telefono)
Trasforma Ruota asse Z: -60deg (desktop), 0px (tablet e telefono)
Origine trasformazione: 50% 100% (centro destra)
Ora diamo un'occhiata al risultato finora. Nota come i link/testo all'interno dei moduli di testo ruotino perfettamente lungo il perimetro del cerchio.
Aggiunta dell'etichetta del menu
Per aggiungere l'etichetta del menu, dovremo aggiungere un altro modulo di testo in cima ai cinque moduli di testo che abbiamo già. Vai avanti e aggiungi un nuovo modulo di testo sopra il Link 1.
Quindi aggiorna il contenuto del corpo con quanto segue:
<p>menu</p>
Assicurati che l'etichetta del menu sia racchiusa nel tag ap. Ciò assicurerà che l'altezza della linea sia riconosciuta nelle impostazioni del testo.
Quindi, per accelerare il design, copia gli stili dei moduli del modulo di testo per Link 3 e incolla quegli stili del modulo nel nuovo modulo di testo.
Quindi aggiorna quanto segue:
Altezza linea: 300 px (desktop), 20 px (tablet e telefono)
Altezza: ripristina l'impostazione predefinita (auto)
L'altezza della riga deve essere 300 px in modo che sia uguale all'altezza della colonna di contenuto che è anche 300 px (5 moduli di testo ciascuno con un'altezza di 60 px equivalgono a 300 px). Ciò assicurerà che il testo rimanga centrato verticalmente.
Quindi dobbiamo ruotare il modulo di testo dell'etichetta del menu di 180 gradi in modo che venga visualizzato correttamente sul lato opposto della ruota. Ciò consentirà al visitatore di vedere l'etichetta del menu prima dello stato al passaggio del mouse che fa girare i collegamenti in vista.
Trasforma Ruota asse Z: 180 gradi (desktop), 0 gradi (tablet e telefono)
Origine trasformazione: 50% 100% (centro destra)
Una volta fatto, dobbiamo dare al modulo di testo dell'etichetta del menu una posizione assoluta. Per fare ciò, aggiungi il seguente CSS personalizzato all'elemento principale:
position: absolute !important;
Ora controlla il risultato. Dovresti vedere che la voce di menu è capovolta a destra della ruota.
Aggiunta dell'effetto hover rotante alla riga/ruota
Per aggiungere l'effetto hover rotante alla riga, aggiorna le impostazioni della riga come segue:
Trasforma Ruota asse Z: 180deg (desktop), 0deg (hover, 0deg (tablet e telefono)
Quindi aggiorna le impostazioni di transizione come segue:
Durata della transizione: 450 ms
Curva della velocità di transizione: Facilità di entrata in uscita
Ora controlla come gira la ruota al passaggio del mouse.
Creare un layout a due colonne per la sezione
In questo momento il layout è costituito da due righe di una colonna impilate l'una sull'altra. Tuttavia, possiamo usare la proprietà flex css per allineare le due righe orizzontalmente. Per fare ciò, possiamo aggiungere un piccolo frammento di CSS personalizzato alla sezione. Una volta fatto, dovremo regolare un po' la spaziatura per far sembrare le cose giuste.
Apri le impostazioni della sezione e aggiungi il seguente CSS personalizzato all'elemento principale:
display:flex;
Aggiorna spaziatura riga 1
Quindi, aggiorna le dimensioni e la spaziatura per la riga 1 come segue:
Larghezza: 40% (desktop), 100% (tablet e telefono)
Margine (desktop): 5% a sinistra
Margine (tablet): 5% sinistro, 5% destro
Margine (telefono): 5% a destra
Tocchi finali
Sul display del tablet e del telefono sarà necessario aggiungere un margine superiore al modulo Link 1 Text.
Margine (tablet): 30px in alto
E puoi sempre aggiungere un divisore di sezione alla sezione per completare il design.
Risultato finale
Ora diamo un'occhiata al risultato finale.
Design alternativo a mezza ruota
Un bel design alternativo consiste nel nascondere la metà destra della ruota all'esterno della sezione in modo che i collegamenti siano nascosti e quindi rivelati al passaggio del mouse. Per fare ciò, vai avanti e duplica l'intera sezione contenente il disegno che abbiamo appena realizzato. Nella sezione dei duplicati, aggiorna le impostazioni della riga 1 come segue:
Larghezza: 70% (da tavolo)
Quindi aggiornare le impostazioni per la riga 2 per spingere la ruota all'esterno della sezione come segue:
Margine: -250 px a destra
Dobbiamo usare -250 px perché la larghezza totale della ruota è 500 px e vogliamo nascondere esattamente metà della riga.
Quindi imposta la visibilità della sezione su nascosta come segue:
Ecco il disegno definitivo.
Pensieri finali
Una ruota di collegamento rotante è uno di quegli eleganti elementi di design che possono coinvolgere i visitatori con un sottile e unico effetto hover. Ed è piuttosto sorprendente quanto di questo design puoi fare solo con le impostazioni di design integrate di Divi. Spero che questo aggiunga qualcosa in più alla tua cintura degli strumenti di progettazione per il tuo prossimo progetto.
Non vedo l'ora di sentirti nei commenti.
Saluti!