Vuoi migliorare la navigabilità del tuo sito aggiungendo un icona accanto alle singole voci del menu?
In questo articolo ti mostro come aggiungere le icone al menu di Elementor.
Come sviluppatore di siti web mi trovo spesso ad aiutare clienti che mi chiedono di risolvere i problemi più disparati.
All’inizio mi chiedevano di creare pagine per vendere lanciare i loro prodotti o servizi,
Per anni cercavo in rete come aiutarli e principalmente trovavo articoli di autori con competenze ma che non riuscivano alla fine a farmi capire come risolvere il problema.
Ho dunque creato questo blog per aiutare sviluppatori come me dando un valore pratico e non teorico per risolvere facilmente i problemi.
Sei pronto?
Partiamo!
L’uso di icone accanto alle voci del menu migliora la navigabilità di un sito.
Questo perchè le icone aiutano l’utente ad orientarsi nel sito, infatti un elemento grafico ha una comprensione più immediata rispetto ad una parola.
In questo articolo vediamo come inserire in modo molto semplice le icone nel menu senza l’uso di plugin.
Prima di inserire le icone facciamo un breve recap sulla creazione del menu.
Elementor ha un widget che ti consente di inserire il menu nelle pagine.
Utilizzando questo widget possiamo scegliere il layout del menu (orizzontale o verticale) e l’allineamento del menu all’interno della colonna.
Oltre a scegliere alcuni elementi grafici come l’indicatore e l’animazione, possiamo scegliere anche le impostazioni responsive del menu.
Questo Widget, però, non ci permette di intervenire direttamente sulle voci del menu perchè richiama nella pagina un menu precedentemente creato in WordPress.
Per questo motivo per inserire le icone andremo ad operare nel menu di WordPress
Sommario
Inseriamo le icone
Per prima cosa andiamo nella barra menu di WordPress, clicchiamo su Aspetto e poi su Menu
Nella schermata che si apre possiamo creare tutti menu che ci servono cliccando semplicemente sul link “crea un nuovo menu” oppure aprire un menu creato in precedenza.
Se vogliamo aggiungere nuove pagine al menu possiamo sceglierle tra quelle nella colonna sinistra e poi cliccare sul tasto aggiungi al menu
Ora che il nostro menu è pronto clicchiamo sulle singole voci che abbiamo inserito nel menu, si apriranno le impostazioni per quella voce
Adesso vai su Font Awesome e scegli l’icona che vuoi inserire per quella voce del menu.
Clicca sull’icona che hai scelto e nella pagina che si apre clicca sulla stringa html come mostrato nell’immagine qui sotto
Cliccando sulla stringa il codice viene copiato e adesso non devi far altro che incollarlo nel campo “etichetta di navigazione” della voce del menu.
Ricorda di incollarlo prima del nome della pagine come nell’immagine qui sotto.
Ti consiglio di inserire questa entità html &-n-b-s-p; (Elimina i trattini per inserirlo) tra il codice html e l’etichetta di navigazione.
Questa entità ti crea uno spazio tra l’cona e l’etichetta di navigazione.
Ecco il risultato
Non ti resta che ripetere questa operazione per ogni voce del menu e avrai inserito le icone per tutte le voci.
Colori Icona
Per quanto riguarda i colori delle icone queste utilizzeranno gli stessi colori del menu.
Per impostare il colore non devi fare altro che andare nella tab Stile del Widget menu di Elementor e scegliere il “Colore Testo”.
Metodo alternativo
Esiste anche un metodo alternativo che per prevede l’utilizzo di un plugin.
A me non piace utilizzare troppi plugin quando creo un sito e se posso evitare di usarli sono contento.
Se però vuoi usare un plugin per inserire le icone nel menu puoi usare il plugin Menu Icons
Questo plugin inserisce la voce “Icon” nella voce del menu e cliccando sulla voce “select” puoi selezionare l’icone che desideri.
Bene siamo arrivati alla fine, spero che questo articolo ti sia utile per migliorare le tue landing page.
Se hai dubbi ci vediamo nei commenti.
A presto!
