Sei stufo dei soliti menu? Vuoi creare un sito web diverso dagli altri? In questo articolo ti mostrerò come creare un Floating Menu (o menu fluttuante) con Elementor.
Dopo aver letto questo articolo sarai in grado di creare diversi tipi di menu per il tuo sito web.
Sei pronto?
Partiamo!
Sommario
Il menu è uno degli elementi indispensabili di un sito web, infatti secondo molti studi un sito senza un menu “mette in crisi gli utenti”.
La maggior parte dei siti web inserisce il menu nell’Header, in questo articolo ti mostrerò come creare un menu che fluttua in un determinato lato del sito.
Per fare questo abbiamo bisogno della licenza PRO di Elementor
Floating Menu
Per creare il menu vai in template>Popup e clicca su Nuovo Popup
Inserisci il nome che preferisci e clicca su Crea Template
Chiudi pure la libreria di Elementor.
Nella schermata che si apre trovi il popup vuoto
Ora non ti resta che inserire il widget menu nel popoup
Cambia il layout del menu da Orizzontale a Verticale
Ora clicca su impostazioni in basso a sinistra e nella scheda Layout che si apre devi:
- Diminuire la larghezza
- Scegliere la posizione orizzontale (destra o sinistra)
- Disattivare le opzioni Sovrapposizione e Pulsante Chiudi
Stile
Adesso che hai creato il menu puoi dargli un po’ di stile
Per fare questo vai nella tab stile del Popup (la trovi cliccando su impostazioni e poi stile)
Puoi arrotondare un po’ bordi inserendo nel campo Raggio del Bordo 25 pixel a destra e 25 sotto
Nella stessa Tab Stile puoi cambiare lo sfondo
Per cambiare invece il colore delle voci del menu devi andare nella Tab Stile del menu.
Impostazioni di visualizzazione
Adesso che il menu è pronto non devi fare altro che scegliere dove visualizzarlo, per far questo ti basta andare sul tasto pubblica
Si aprirà la scheda Condizioni di Visualizzazione
Clicca su aggiungi condizione e il menu sarà visualizzato su tutto il sito, se invece vuoi escludere qualche pagina puoi farlo tranquillamente utilizzando nuove condizioni.
Clicca sul tasto Next
Nella schermata Trigger dovrai scegliere quando far apparire il menu di solito su usa all’apertura della pagina ma puoi scegliere tranquillamente se ritardare l’apertura o altro.
Clicca su Salva e Chiudi
La creazione del menu è finita e a seconda delle condizioni di visualizzazione il menu apparirà sul tuo sito.
Icone
Puoi aggiungere alle voci del menu delle icone oppure utilizzare solo queste ultime al posto del testo.
Nell’articolo Come aggiungere le icone al menu ti ho mostrato come aggiungere le icone alle voci del menu.
Per utilizzare solo le icone non devi fare altro che cancellare il testo e inserire solo l’icona come mostrato mell’articolo.
Impostazioni Mobile
Per migliorare la visualizzazione del menu sugli smartphone devi aprire la visualizzazione mobile di Elementor e poi fare alcune modifiche.
Vediamo cosa modificare
Innanzitutto se vuoi che le voci del menu siamo visibili nella tab Layout del menu alla voce Pulsante in due stati devi scegliere Nessuno
Se ti sembra troppo grande puoi modificare la larghezza solo per i dispositivi mobili cliccando su impostazioni.
Video
Ecco il video dove ti mostro come costruire un Floating Menu
Conclusioni
In questo articolo ti ho mostrato come creare un Floating Menu con Elementor e come modificare i colori o aggiungere le icone.
Spero che questo articolo ti sia piaciuto, se hai domande puoi scriverle nei commenti.
A presto!
