Come modificare il menu mobile in Webflow

Un menu di navigazione semplice e intuitivo è uno degli elementi di design più essenziali del tuo sito web. Agisce come una mappa, guidando i tuoi visitatori oltre la homepage. Con il numero crescente di persone che utilizzano Internet sui propri dispositivi mobili, il tuo sito Web dovrebbe avere anche un menu di navigazione ottimizzato per i dispositivi mobili.

Come modificare il menu mobile in Webflow

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

Come aggiungere una barra di navigazione

Il menu dell'hamburger è un elemento di design fondamentale quando si lavora con uno spazio orizzontale limitato. Elimina la necessità di una barra di navigazione fissa ingombrante che occupa spazio prezioso.

Su Webflow, questo menu e le sue funzionalità sono costruite all'interno dell'elemento NavBar. L'aggiunta di questo elemento al tuo design richiede quattro semplici passaggi:

  1. Tocca l'icona "+" nella parte superiore del pannello di sinistra per aprire il pannello "Aggiungi".
    Come modificare il menu mobile in Webflow
  2. Scorri verso il basso fino alla sezione "Componenti".
    Come modificare il menu mobile in Webflow
  3. Fare clic e tenere premuto l'elemento "NavBar".
    Come modificare il menu mobile in Webflow
  4. Trascina l'elemento sull'intestazione della pagina.
    Come modificare il menu mobile in Webflow

Come modificare il menu mobile

Dopo aver aggiunto una barra di navigazione al tuo sito web, ci sono diversi modi per aggiungere stile e personalità a questo menu.

Come aggiungere più collegamenti al menu

L'elemento della barra di navigazione contiene il pulsante del menu e il menu di navigazione, con quest'ultimo contenente i collegamenti di navigazione. Quando lo aggiungi al tuo design, ci saranno diversi segnaposto di link che puoi eliminare o modificare con i link del tuo sito web.

Segui questi passaggi per aggiungere altri link di navigazione:

  1. Fare clic su qualsiasi elemento all'interno della NavBar.
    Come modificare il menu mobile in Webflow
  2. Vai al pannello "Impostazioni elementi" sulla destra.
    Come modificare il menu mobile in Webflow
  3. Premi l'icona a forma di ingranaggio per aprire le "Impostazioni".
    Come modificare il menu mobile in Webflow
  4. Scorri fino alla sezione "Impostazioni NavBar".
    Come modificare il menu mobile in Webflow
  5. Tocca il pulsante "Aggiungi collegamento".
    Come modificare il menu mobile in Webflow

Ora che disponi di un numero sufficiente di collegamenti per tutte le pagine del tuo sito Web pertinente, è il momento di eseguire il collegamento vero e proprio.

  1. Seleziona un collegamento di navigazione.
  2. Vai al pannello "Impostazioni elementi".
    Come modificare il menu mobile in Webflow
  3. Individua la sezione "Impostazioni collegamento".
    Come modificare il menu mobile in Webflow
  4. Inserisci l'URL della pagina web designata nel campo "URL".
    Come modificare il menu mobile in Webflow

Come modificare l'animazione del menu

Su 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 queste animazioni di rivelazione:

  • A discesa: per impostazione predefinita, il menu del dispositivo mobile scende dalla barra di navigazione una volta che il visitatore tocca il pulsante del menu. Occuperà tutta la larghezza della finestra del browser.
  • Sopra a destra: se selezioni questa animazione di rivelazione, il tuo menu mobile apparirà dal lato destro dello schermo. Questo menu occuperà l'intera altezza della finestra del browser.
  • Sopra a sinistra: questo tipo di menu è identico a Sopra a destra, tranne per il fatto che il menu di navigazione si sposterà dal lato sinistro dello schermo.

Per impostare l'animazione di rivelazione desiderata, procedi come segue:

  1. Seleziona qualsiasi elemento all'interno della NavBar.
    Come modificare il menu mobile in Webflow
  2. Vai al pannello "Impostazioni elementi" sul lato destro dello schermo.
    Come modificare il menu mobile in Webflow
  3. Tocca l'icona a forma di ingranaggio per avviare "Impostazioni".
    Come modificare il menu mobile in Webflow
  4. Passare alla sezione "Impostazioni NavBar".
    Come modificare il menu mobile in Webflow
  5. Fare clic sull'opzione "Tipo".
    Come modificare il menu mobile in Webflow
  6. Seleziona lo stile preferito dal menu a tendina.
    Come modificare il menu mobile in Webflow

Nella sezione "Impostazioni NavBar", puoi anche controllare quanto segue:

  • Easing open: il tipo di curva utilizzato per animare la transizione aperta.
  • Easing close: il tipo di curva utilizzato per animare la transizione di chiusura.
  • Durata: quanto tempo impiega il menu a comparire.

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

Come modificare lo stile del menu

Webflow ha semplificato lo stile di qualsiasi parte della barra di navigazione, consentendoti di adattare perfettamente il menu mobile al design del tuo sito web.

Per applicare uno stile al pulsante del menu, procedi come segue:

  1. Selezionare il pulsante del menu.
    Come modificare il menu mobile in Webflow
  2. Vai al pannello "Stile" sulla destra (l'icona del pennello).
    Come modificare il menu mobile in Webflow

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

Per cambiare il colore di sfondo, procedi come segue:

  1. Vai alla sezione "Sfondi".
    Come modificare il menu mobile in Webflow
  2. Tocca l'icona della goccia di colore per aprire il "Selettore colore".
    Come modificare il menu mobile in Webflow
  3. Seleziona il colore desiderato.
    Come modificare il menu mobile in Webflow

Se desideri modificare le dimensioni dell'icona dell'hamburger, procedi nel seguente modo:

  1. Vai alla sezione "Tipografia".
    Come modificare il menu mobile in Webflow
  2. Aumenta o diminuisci la dimensione dell'icona nel campo "Aa".
    Come modificare il menu mobile in Webflow

Puoi anche cambiare il colore dell'icona nel campo in alto, contrassegnato dalla lettera A e da una goccia di colore.

Sebbene esistano molti modi per personalizzare il pulsante del menu, non è possibile sostituirlo con un elemento di testo o un'immagine personalizzata.

Navigazione mobile semplificata

Quando si progetta un menu mobile, si desidera ottenere il massimo da uno spazio piuttosto limitato. Quindi, cerca di non sovraccaricare il menu con le opzioni per evitare di confondere i tuoi visitatori. Inoltre, assicurati che le scelte del menu siano brevi, chiare e facilmente leggibili.

Successivamente, puoi giocare con lo stile e l'animazione del menu per mantenere i tuoi visitatori interessati in ogni fase del processo.

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

Sign up and earn $1000 a day ⋙

Leave a Comment

Cosè una VPN? Vantaggi e svantaggi della rete privata virtuale VPN

Cosè una VPN? Vantaggi e svantaggi della rete privata virtuale VPN

Cos'è una VPN, quali sono i suoi vantaggi e svantaggi? Discutiamo con WebTech360 la definizione di VPN e come applicare questo modello e sistema al lavoro.

La maggior parte delle persone non utilizza queste funzionalità nascoste di Sicurezza di Windows.

La maggior parte delle persone non utilizza queste funzionalità nascoste di Sicurezza di Windows.

Windows Security non si limita a proteggere dai virus di base. Protegge dal phishing, blocca i ransomware e impedisce l'esecuzione di app dannose. Tuttavia, queste funzionalità non sono facili da individuare: sono nascoste dietro livelli di menu.

La codifica non è così difficile come pensi

La codifica non è così difficile come pensi

Una volta che avrai imparato e provato personalmente, scoprirai che la crittografia è incredibilmente facile da usare e incredibilmente pratica nella vita di tutti i giorni.

Recupera i dati cancellati con Recuva Portable in Windows 7

Recupera i dati cancellati con Recuva Portable in Windows 7

Nel seguente articolo, illustreremo le operazioni di base per recuperare i dati cancellati in Windows 7 con lo strumento di supporto Recuva Portable. Con Recuva Portable, puoi archiviarli su qualsiasi chiavetta USB e utilizzarli quando necessario. Lo strumento è compatto, semplice e facile da usare, con alcune delle seguenti funzionalità:

Come eliminare i file duplicati per risparmiare memoria sul computer utilizzando CCleaner

Come eliminare i file duplicati per risparmiare memoria sul computer utilizzando CCleaner

CCleaner esegue la scansione dei file duplicati in pochi minuti, lasciandoti poi decidere quali eliminare in sicurezza.

Perché cambiare il percorso di download predefinito in Windows 11?

Perché cambiare il percorso di download predefinito in Windows 11?

Spostare la cartella Download dall'unità C a un'altra unità su Windows 11 ti aiuterà a ridurre la capacità dell'unità C e a far funzionare il tuo computer in modo più fluido.

Come interrompere gli aggiornamenti di Windows sul PC

Come interrompere gli aggiornamenti di Windows sul PC

Si tratta di un modo per rafforzare e ottimizzare il sistema in modo che gli aggiornamenti vengano eseguiti secondo i tuoi tempi, non secondo quelli di Microsoft.

Come visualizzare le estensioni dei file, visualizzare le estensioni dei file su Windows

Come visualizzare le estensioni dei file, visualizzare le estensioni dei file su Windows

Esplora file di Windows offre numerose opzioni per modificare la visualizzazione dei file. Quello che potresti non sapere è che un'opzione importante è disabilitata per impostazione predefinita, sebbene sia fondamentale per la sicurezza del tuo sistema.

5 strumenti gratuiti per trovare spyware e adware sul tuo PC

5 strumenti gratuiti per trovare spyware e adware sul tuo PC

Con gli strumenti giusti, puoi eseguire la scansione del tuo sistema e rimuovere spyware, adware e altri programmi dannosi che potrebbero annidarsi nel tuo sistema.

14 app e software Windows di cui hai bisogno sul tuo nuovo computer

14 app e software Windows di cui hai bisogno sul tuo nuovo computer

Di seguito è riportato un elenco di software consigliati per l'installazione di un nuovo computer, in modo da poter scegliere le applicazioni più necessarie e migliori sul tuo computer!

Come clonare le impostazioni di Windows per portare il tuo flusso di lavoro ovunque

Come clonare le impostazioni di Windows per portare il tuo flusso di lavoro ovunque

Avere un intero sistema operativo su una chiavetta USB può essere molto utile, soprattutto se non si dispone di un portatile. Ma non pensare che questa funzionalità sia limitata alle distribuzioni Linux: è il momento di provare a clonare l'installazione di Windows.

Disattiva questi 7 servizi di Windows per prolungare la durata della batteria!

Disattiva questi 7 servizi di Windows per prolungare la durata della batteria!

Disattivando alcuni di questi servizi puoi risparmiare una notevole quantità di batteria senza compromettere il tuo utilizzo quotidiano.

A cosa serve la scorciatoia Ctrl + Z su Windows? Probabilmente più di quanto pensi.

A cosa serve la scorciatoia Ctrl + Z su Windows? Probabilmente più di quanto pensi.

Ctrl + Z è una combinazione di tasti estremamente comune su Windows. Ctrl + Z consente sostanzialmente di annullare le azioni in tutte le aree di Windows.

Non cliccare su nessun link abbreviato finché non sei sicuro che sia sicuro!

Non cliccare su nessun link abbreviato finché non sei sicuro che sia sicuro!

Gli URL abbreviati sono utili per ripulire i link lunghi, ma nascondono anche la destinazione reale. Se si vogliono evitare malware o phishing, cliccare su quel link alla cieca non è una scelta saggia.

Windows 11 22H2: aggiornamento Moment 1 con molte funzionalità degne di nota

Windows 11 22H2: aggiornamento Moment 1 con molte funzionalità degne di nota

Dopo una lunga attesa, è stato ufficialmente rilasciato il primo importante aggiornamento di Windows 11.