Elementor: come creare un floating menu

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!

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

Schermata - Elementor: come creare un floating menu

Ora non ti resta che inserire il widget menu nel popoup

Cambia il layout del menu da Orizzontale a Verticale

menu verticale - Elementor: come creare un floating menu

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
Menu - Elementor: come creare un floating menu

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

Menu bordi arrotondati - Elementor: come creare un floating menu

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.

Condizioni di Visualizzazione - Elementor: come creare un floating menu

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.

Trigger - Elementor: come creare un floating menu

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!

Ho un favore da chiederti, se questo articolo ti è piaciuto, condividilo.

Potrebbe anche piacerti

Elementor la guida completa

Ultimi articoli

Categorie
Passa a Elementor Pro
Per il tuo hosting
Per creare la tua Privacy Policy
Copyright 2020 © Wp Semplice - Privacy Policy

Gli articoli ti sono stati utili?

Iscriviti alla newsletter per restare sempre aggiornato! 

Grazie ti contatteremo a breve