Come modificare il menu mobile in Webflow

Un menu di navigazione semplice e intuitivo è uno degli elementi di design più importanti del tuo sito. Funziona come una mappa, allontanando i visitatori dalla pagina principale. Con il numero crescente di persone che utilizzano Internet sui propri dispositivi mobili, il tuo sito Web dovrebbe anche disporre di un menu di navigazione ottimizzato per i dispositivi mobili.

Fortunatamente, Webflow ha semplificato l’aggiunta di una barra dei menu pieghevole per hamburger che semplificherà il tuo sito mobile. Continua a leggere per scoprire come modificare questo menu mobile in Webflow.

Come aggiungere una barra di navigazione

Il menu dell’hamburger è un elemento di design vitale quando si ha a che fare con uno spazio orizzontale limitato. Ciò elimina la necessità di una barra di navigazione fissa ingombrante che occupa spazio prezioso.

In Webflow, questo menu e le sue funzioni sono integrate nell’elemento NavBar. Per aggiungere questo elemento al tuo design, devi seguire quattro semplici passaggi:

• Tocca l’icona “+” nella parte superiore del pannello di sinistra per aprire il pannello “Aggiungi”.

• Scorri verso il basso fino alla sezione “Componenti”.

• Tenere premuto l’elemento NavBar.

• Trascina l’elemento nell’intestazione della pagina.

Come modificare il menu mobile

Dopo aver aggiunto una barra di navigazione al tuo sito web, puoi dare uno stile e personalizzare questo menu in diversi modi.

Come aggiungere più collegamenti al menu

L’elemento della barra di navigazione contiene un pulsante di menu e un menu di navigazione, quest’ultimo contenente i collegamenti di navigazione. Quando lo aggiungi al tuo design, ci saranno alcuni segnaposto di link che puoi rimuovere o modificare con link al tuo sito web.

Segui questi passaggi per aggiungere altri link di navigazione:

• Fare clic su qualsiasi elemento all’interno della NavBar.

• Vai al pannello Impostazioni elemento a destra.

• Fare clic sull’icona a forma di ingranaggio per aprire “Impostazioni”.

• Scorri fino alla sezione Impostazioni NavBar.

• Fare clic sul pulsante “Aggiungi collegamento”.

Ora che hai abbastanza collegamenti per tutte le pagine pertinenti del sito Web, è il momento di eseguire il collegamento effettivo.

• Seleziona un collegamento di navigazione.
• Vai al pannello Impostazioni elemento.

• Trova la sezione Impostazioni collegamento.

• Immettere l’URL della pagina Web specificato nel campo “URL”.

Come modificare l’animazione del menu

In Webflow, puoi anche modificare la modalità di visualizzazione del menu mobile quando i visitatori fanno clic sul pulsante del menu. Puoi scegliere tra tre tipi di animazioni di rivelazione:

• Menu a discesa – Per impostazione predefinita, il menu mobile esce dalla barra di navigazione quando il visitatore fa clic sul pulsante del menu. Occupa l’intera larghezza della finestra del browser.
• Destra: se selezioni questa animazione di espansione, il menu del dispositivo mobile verrà visualizzato sul lato destro dello schermo. Questo menu occuperà l’intera altezza della finestra del browser.
• Sopra a sinistra: questo tipo di menu è identico al menu sopra a destra, tranne per il fatto che il menu di navigazione si sposta dal lato sinistro dello schermo.

Per impostare l’animazione di espansione desiderata, procedere come segue:

• Seleziona qualsiasi elemento all’interno della NavBar.

• Vai al pannello Impostazioni elemento sul lato destro dello schermo.

• Tocca l’icona a forma di ingranaggio per avviare le Impostazioni.

• Vai alla sezione “Impostazioni NavBar”.

• Fare clic sull’opzione “Tipo”.

• Seleziona il tuo stile preferito dal menu a tendina.

Nella sezione Impostazioni NavBar, puoi anche gestire quanto segue:

• Facilità di apertura: il tipo di curva utilizzato per animare la transizione aperta.
• Chiusura facilitata: il tipo di curva utilizzato per animare la transizione di chiusura.
• Durata: quanto tempo ci vuole per la visualizzazione del menu.

Si noti che la durata della transizione è misurata in millisecondi.

Come cambiare lo stile del menu

Webflow ha semplificato lo stile di qualsiasi parte della barra di navigazione, semplificando l’integrazione di un menu mobile nel design del tuo sito web.

Per definire lo stile del pulsante del menu, procedi come segue:

• Seleziona il pulsante del menu.

• Vai al pannello Stile a destra (icona del pennello).

Il pannello Stile ti consente di modificare ogni aspetto del pulsante del menu. Molto spesso, i designer cambiano il colore e le dimensioni dello sfondo del pulsante.

Per cambiare il colore di sfondo, procedi come segue:

• Vai alla sezione “Sfondi”.

• Tocca l’icona a forma di goccia di colore per aprire il Selettore colore.

• Scegli il colore che desideri.

Se desideri modificare la dimensione dell’icona dell’hamburger, procedi nel seguente modo:

• Vai alla sezione Tipografia.

• Aumenta o diminuisci la dimensione dell’icona nel campo Aa.

Puoi anche cambiare il colore dell’icona nella casella in alto, contrassegnata da una A e una macchia di colore.

Sebbene ci siano molti modi per personalizzare il pulsante del menu, non puoi sostituirlo con un elemento di testo o un’immagine personalizzata.

Navigazione mobile semplificata

Quando si progetta un menu mobile, si desidera sfruttare al meglio uno spazio abbastanza limitato. Quindi, cerca di non sovraccaricare il menu con le opzioni per non confondere i visitatori. Inoltre, assicurati che le voci di menu siano brevi, nitide e facili da leggere.

Dopodiché, puoi giocare con lo stile e l’animazione del menu per coinvolgere i tuoi visitatori in ogni fase del processo.

Hai provato ad aggiungere un menu mobile al tuo sito? Quante opzioni hai incluso? Fateci sapere nei commenti qui sotto.