Come creare un menu di icone circolari che si espande al clic in Divi
Pubblicato: 2019-08-21Un menu a icone circolari è una soluzione elegante per aggiungere un menu semplice al tuo sito Divi. Questo stile di menu è intuitivo e funziona molto bene come menu fisso per i tuoi dispositivi mobili. Oggi mostreremo come creare un menu di icone circolari in Divi in un modo che evidenzi davvero le potenti capacità di progettazione di Divi Builder. E forniremo un semplice frammento JavaScript per aprire e chiudere il menu al clic.
Iniziamo
Sbirciata
Ecco una rapida occhiata al menu di icone circolari che creeremo.
Scarica GRATUITAMENTE il layout del menu dell'icona del cerchio
Per mettere le mani sul design 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?
Cosa ti serve per iniziare
Per iniziare, dovrai fare quanto segue:
- Se non lo hai ancora fatto, installa e attiva il tema Divi installato (o il plug-in Divi Builder se non utilizzi il tema Divi).
- Crea una nuova pagina in WordPress e abilita Divi Builder per modificare la pagina sul front-end (visual builder).
Per questo tutorial, utilizzeremo le icone integrate di Divi dal modulo blurb, quindi non sono necessarie risorse esterne.
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Parte 1
Una volta che Divi Builder è abilitato a modificare la pagina sul front-end, aggiungi una riga di una colonna alla sezione normale predefinita.
Quindi apri le impostazioni della riga e aggiungi il seguente riempimento:
Imbottitura: 300px in alto
Questo è semplicemente per fornire un po' di spazio per far apparire le voci di menu circolari al clic.
Creare le icone dei menu con i moduli Blurb
Blurb #1
Dopo che l'imbottitura delle righe è a posto, aggiungi un modulo blurb alla colonna. Questo sarà il primo dei 5 blurb totali che aggiungeremo per comporre il nostro menu di icone circolari. Ci riferiremo a questo come blurb #1.
Quindi aggiorna il contenuto del blurb eliminando il titolo e il corpo del testo. Quindi aggiungi un'icona al blurb come segue.
Usa icona: Sì
Icona: vedi screenshot
Successivamente, aggiorneremo le impostazioni di progettazione come segue:
Colore icona: #29a1f2
Icona del cerchio: S
Colore del cerchio: #222222
Mostra bordo cerchio: S
Colore bordo cerchio: #29a1f2
Usa la dimensione del carattere dell'icona: S
Dimensione carattere icona: 25px
Dimensione del testo del corpo: 20px
Margine: 0px
Oltre allo stile dell'icona circolare, abbiamo anche aggiunto una dimensione del testo del corpo. Non c'è il corpo del testo, ma questo tornerà utile in seguito ogni volta che utilizzeremo l'unità di lunghezza em (che è relativa alla dimensione del testo del corpo principale) per distanziare le nostre voci di menu/definizioni utilizzando il trasduttore di trasformazione. Più su questo più tardi.
Successivamente, elimina l'animazione immagine/icona predefinita.
Animazione immagine/icona: nessuna animazione
Quindi imposta l'indice Z per questo modulo su 1 in modo che si trovi sopra gli altri che alla fine si posizioneranno dietro di esso.
Indice Z: 1
Infine, elimina il margine inferiore predefinito sotto l'icona aggiungendo il seguente CSS personalizzato all'immagine Blurb.
margin-bottom: 0px;
Blurb #2
Per creare il secondo blurb, duplica semplicemente il blurb #1.
Quindi apri le impostazioni per il nuovo blurb (definizione n. 2) e cambia l'icona e imposta l'indice Z sul valore predefinito (0).
Successivamente, riduciamo l'icona utilizzando la scala di trasformazione come segue:
Scala di trasformazione: 70%
Creare Blurb #3, #4 e #5
I prossimi tre blurb possono essere creati duplicando il blurb n. 2 e aggiornando l'icona per ciascuno.
Impilare i blurb nella stessa posizione assoluta
Lo stato predefinito del nostro menu avrà tutti i blurb in una posizione assoluta con i quattro blurb delle voci di menu impilati dietro il blurb dell'icona del menu principale dell'hamburger. Per ottenere i nostri blurb nella stessa posizione assoluta, usa la funzione di selezione multipla (tieni premuto ctrl/cmd e fai clic su ciascuno) per selezionare tutti e cinque i moduli di blurb. Quindi apri le impostazioni per uno dei blurb selezionati per aggiornare le impostazioni degli elementi per tutti e 5 contemporaneamente.
Quindi aggiungi il seguente CSS personalizzato all'elemento principale:
position: absolute !important; bottom: 20px; left: 20px;
Questo posiziona i blurb nella parte inferiore sinistra della riga.
Posizionamento delle icone del menu utilizzando Transform Translate
Una volta che tutti i blurb sono posizionati per lo stato predefinito, possiamo iniziare a posizionare le voci di menu per lo stato clic (dove andranno a finire dopo aver fatto clic sul pulsante del menu principale). Per fare ciò, possiamo usare la proprietà transform translate all'interno del Divi builder. Non è disponibile lo stato del clic nel generatore Divi (come il passaggio del mouse) poiché questo è qualcosa gestito da JavaScript. Quindi posizioneremo le nostre voci di menu dove vogliamo che siano su clicca ora. Quindi useremo Javascript per attivare e disattivare quella posizione quando si fa clic sul pulsante del menu principale.
Vogliamo mantenere il blurb #1 in posizione perché è il pulsante del menu principale. Tuttavia, vogliamo spostare il blurb #2, #3, #4 e #5. E poiché i nostri blurb ora sono impilati nel visual builder, distribuiamo la modalità wireframe per aggiornare le posizioni per ogni blurb.
Difficoltà di posizione #2
Apri le impostazioni per blurb #2 e aggiorna quanto segue:
Trasforma Trasla asse Y: -10em
Ecco la nuova posizione del blurb #2.
Difficoltà di posizione #3
Apri le impostazioni per blurb #3 e aggiorna quanto segue:
Trasforma Trasla asse Y: -8.6em
Trasforma Trasla asse X: 5em
Ecco la nuova posizione del blurb #3.
Indicazione di posizione #4
Apri le impostazioni per blurb #4 e aggiorna quanto segue:
Trasforma Trasla asse Y: -5em
Trasforma Trasla asse X: 8.6em
Ecco la nuova posizione del blurb #4.
Difficoltà di posizione #5
Apri le impostazioni per blurb #5 e aggiorna quanto segue:
Trasforma Trasla asse Y: 0px
Trasforma Trasla asse X: 10em
Ecco la nuova posizione del blurb #5.
Aggiunta di classi CSS personalizzate ai Blurbs
Affinché il nostro JavaScript funzioni correttamente, dobbiamo aggiungere alcune classi CSS che fungeranno da selettori per stili e funzionalità aggiuntivi.
Aggiungi la classe CSS a Blurb #1
In modalità di visualizzazione wireframe, apri le impostazioni per blurb #1 e aggiungi la seguente classe CSS:
Classe CSS: transform_target
Aggiungi classi CSS a Blurbs #2, #3, #4 e #5
Gli altri quattro blurb condivideranno tutti le stesse classi CSS, quindi possiamo usare la funzione di selezione multipla per selezionare Blurb #2, #3, #4 e #5 e aggiornare la classe CSS per tutti e quattro come segue:
Classe CSS: has-transform toggle-transform-animazione
Nota che ci sono due classi CSS separate da uno spazio.
Aggiunta del CSS esterno e JavaScript con un modulo di codice
Una volta che le nostre classi CSS sono state aggiunte ai blurb, siamo pronti per aggiungere il nostro codice alla pagina utilizzando un modulo di codice. Per fare ciò, aggiungi un modulo di codice sotto il blurb #5.
Quindi incolla il seguente codice nel modulo di codice:
<style>
.has-transform, .transform_target .et-pb-icon {
transition: all 400ms ease-in-out;
}
.toggle-transform-animation {
transform: none !important;
}
.transform_target {
cursor: pointer;
}
.toggle-active-target.et_pb_blurb .et-pb-icon {
background-color: transparent;
}
</style>Questo è il CSS esterno utilizzato in combinazione con il codice jQuery.
<script>
(function($) {
$(document).ready(function(){
$('.transform_target').click(function(){
$(this).toggleClass('toggle-active-target');
$('.has-transform').toggleClass('toggle-transform-animation');
});
});
})( jQuery );
</script>E questa è la necessità di JavaScript per estendere le voci del menu dell'icona circolare quando si fa clic sul pulsante del menu.
Assicurati di mantenere il tag style avvolto attorno al CSS e il tag script avvolto attorno a JavaScript/jQuery.
Controlla il risultato finale della funzionalità sulla pagina live.
Aggiunta di URL per voci di menu
Poiché si tratta di un menu, le quattro voci di menu avranno bisogno di collegamenti/URL. Per aggiungere gli URL necessari per ogni voce di menu, apri le impostazioni del modulo blurb per ciascuna delle 4 voci di menu e aggiungi un URL di collegamento al modulo.
Rendere permanente il pulsante Menu (o fisso)
Poiché questo menu è piccolo e intuitivo per i dispositivi mobili, potresti voler rendere il menu fisso in modo che rimanga fisso nella parte inferiore sinistra del browser.
Per fare ciò, seleziona tutti e cinque i blurb utilizzando la funzione di selezione multipla e quindi aggiorna il CSS personalizzato nell'elemento principale sostituendo il valore di posizione "assoluto" con "fisso".
position: fixed !important; bottom: 20px; left: 20px;
Ora il menu rimarrà fisso in basso a sinistra della finestra del browser.
Per assicurarti che il menu si trovi sopra l'altro contenuto della pagina, aggiorna l'indice z per la riga come segue:
Indice Z: 11
Quindi estrarre l'imbottitura della riga:
Imbottitura: 0px in alto, 0px in basso
Progetto definitivo
Ecco il design finale dell'icona circolare fissa con un layout predefinito.
Ed eccolo sul cellulare.
Come regolare facilmente le dimensioni e la spaziatura del menu
Come accennato in precedenza, il menu è stato progettato utilizzando l'unità di lunghezza em per il posizionamento della voce di menu sull'asse x e y (usando transform translate). L'unità di lunghezza em è relativa alla dimensione del testo del corpo principale. Pertanto, poiché ciascuno dei nostri moduli di contrassegno ha la stessa dimensione del testo del corpo di 20 px, possiamo utilizzare la selezione multipla per modificare il testo del corpo per tutti i contrassegni contemporaneamente.
Ciò aumenterà o diminuirà la spaziatura tra le voci di menu secondo necessità.
E puoi fare lo stesso anche per la dimensione del carattere dell'icona. Usa semplicemente la selezione multipla per regolare la dimensione del carattere dell'icona per tutte le voci di menu contemporaneamente.
Pensieri finali
Chi sapeva che aggiungere un menu di icone circolari fisse a una pagina sarebbe stato così semplice con Divi. È il tipo di menu perfetto anche per dispositivi mobili! Certo, sono necessari alcuni frammenti di codice personalizzati, ma il fatto che tu possa progettare e posizionare lo stato del clic delle voci di menu utilizzando il visual builder è una cosa piuttosto interessante. Non dimenticare di esplorare diversi colori, dimensioni e design al passaggio del mouse che possono facilmente abbinare il menu al tuo sito web.
Non vedo l'ora di sentirti nei commenti.
Saluti!