Come creare un menu WordPress reattivo per i dispositivi mobili

Più della metà del traffico di un sito web proviene da dispositivi mobili. Se il vostro menu di navigazione non funziona bene su smartphone e tablet, una buona parte del vostro pubblico potrebbe avere difficoltà a orientarsi nel vostro sito.

Con anni di esperienza nella costruzione di siti WordPress, comprendiamo l’importanza di rendere il vostro sito responsive per i dispositivi mobili. Noi di WPBeginner abbiamo sempre dato priorità a questo aspetto, assicurandoci che i nostri siti siano facili da navigare su qualsiasi dispositivo.

Abbiamo infatti progettato un menu responsive per i dispositivi mobili che si adatta perfettamente alle schermate più piccole senza creare ingombro, migliorando l’esperienza utente su smartphone e tablet.

In questa guida vi mostreremo come creare facilmente un menu WordPress responsive pronto per i dispositivi mobili.

Perché creare un menu WordPress reattivo per i dispositivi mobili?

Un menu di navigazione ben progettato aiuta i visitatori a orientarsi nel vostro sito web. Tuttavia, il fatto che il vostro menu sia perfetto su computer desktop non significa automaticamente che lo sarà anche su schermi mobili e tablet.

Gli utenti mobili rappresentano circa il 58% di tutto il traffico internet. Se il vostro menu non ha un bell’aspetto o non funziona correttamente sui dispositivi mobili, rischiate di perdere metà del vostro pubblico a causa della scarsa esperienza dell’utente.

In questo modo sarà difficile raggiungere obiettivi chiave come la crescita della lista di e-mail, le vendite e la crescita dell’azienda.

Detto questo, vediamo come creare un menu responsive pronto per i dispositivi mobili, che risulti perfetto su smartphone e tablet. Utilizzate i link rapidi qui sotto per passare direttamente al metodo che desiderate utilizzare.

Metodo 1: Creare un menu del pannello di scorrimento pronto per i dispositivi mobili

Un pannello di scorrimento reattivo è un menu di navigazione che scorre sullo schermo quando un visitatore tocca o fa clic su una levetta.

In questo modo, il menu è sempre a portata di mano ma non occupa spazio sullo schermo.

Questo aspetto è particolarmente importante poiché gli smartphone e i tablet hanno schermi molto più piccoli rispetto ai computer desktop.

Se il menu è costantemente espanso, un utente mobile potrebbe attivare i suoi link per sbaglio utilizzando il touchscreen del suo dispositivo. Per questo motivo i pannelli a scorrimento sono una buona scelta per un menu reattivo ai dispositivi mobili.

Il modo più semplice per aggiungere un pannello di scorrimento pronto per i dispositivi mobili è utilizzare Responsive Menu.

Per prima cosa, è necessario installare e attivare il plugin Responsive Menu. Per maggiori dettagli, consultate il nostro tutorial su come installare un plugin di WordPress.

Dopo l’attivazione, è possibile utilizzare il plugin per personalizzare qualsiasi menu di WordPress creato in precedenza. Se dovete creare un nuovo menu, consultate la nostra guida per principianti su come aggiungere un menu di navigazione in WordPress.

D’altra parte, se il vostro tema WordPress ha già un menu mobile incorporato, dovrete conoscere la classe CSS del menu per poterlo nascondere.

Se si salta questo passaggio, gli utenti mobili vedranno due menu sovrapposti sul vostro sito web. Per istruzioni passo passo, consultate la nostra guida su come nascondere un menu mobile in WordPress.

Fatto questo, andate alla pagina Menu responsive ” Menu nella barra laterale dell’amministrazione di WordPress e fate clic sul pulsante “Crea nuovo menu”.

A questo punto si vedranno alcuni temi diversi per i dispositivi mobili che possono essere utilizzati per il menu.

Nelle nostre immagini utilizziamo il “Tema predefinito”, ma potete utilizzare qualsiasi tema desideriate. Dopo aver deciso, cliccate su “Avanti”.

È ora possibile digitare un nome per il menu. Questo è solo un riferimento, quindi si può usare qualsiasi cosa si voglia.

A questo punto, cliccate su “Link WordPress Menu” e scegliete il menu che volete utilizzare.

Come già detto, se il vostro tema ha già un menu mobile incorporato, dovrete aggiungere la sua classe CSS al campo “Nascondi menu del tema”.

Se si esegue l’aggiornamento al plugin Premium, si ottengono alcune impostazioni aggiuntive. Ad esempio, gli utenti Pro possono nascondere il menu su determinate pagine o dispositivi.

Quando si è soddisfatti della configurazione del menu, fare clic su “Crea menu”.

Ora vedrete l’anteprima del vostro sito web WordPress sulla destra della schermata e alcune impostazioni sulla sinistra.

Per vedere come appare il vostro sito su mobile, fate clic sull’icona del cellulare o del tablet in basso a sinistra dello schermo.

Per personalizzare l’aspetto e il comportamento del menu sui dispositivi mobili, selezionare “Menu mobile”.

Quindi, fare clic su “Contenitore”.

Qui troverete molte impostazioni diverse.

Quando si apportano modifiche, l’anteprima dal vivo spesso si aggiorna automaticamente. Per questo motivo, è bene espandere il menu in modo da poter monitorare l’aspetto del menu mobile. A tale scopo, è sufficiente fare clic sul pulsante di attivazione del menu.

Per impostazione predefinita, il plugin aggiunge un titolo e un testo “Aggiungi altro contenuto…”.

È possibile sostituirlo con un messaggio proprio o addirittura rimuovere completamente il testo. Per modificare il titolo, fare clic per espandere la sezione “Titolo”.

È ora possibile digitare il proprio messaggio nel campo “Testo del titolo”.

È anche possibile aggiungere un link al titolo o aggiungere icone e immagini.

Per personalizzare l’aspetto del titolo, fare clic sulla scheda “Stili”.

Qui è possibile modificare il colore dello sfondo, il colore del testo, la dimensione dei caratteri e altro ancora.

Se non si desidera visualizzare il testo del titolo, fare clic per disattivare la levetta accanto a “Titolo”.

Se il titolo non è essenziale, rimuovendolo si crea più spazio per i link e gli altri contenuti del menu di navigazione mobile.

Per sostituire il testo “Aggiungi altro contenuto qui….” con il proprio messaggio, fare clic per espandere l’area “Contenuto aggiuntivo”.

È ora possibile digitare il proprio testo, cambiare il colore del testo, modificare l’allineamento del testo e altro ancora utilizzando le impostazioni nel menu di sinistra.

Per eliminare completamente il testo, è sufficiente fare clic per disattivare la levetta.

Anche in questo caso, si può creare più spazio per il resto del contenuto del menu. Ciò è particolarmente utile su smartphone e tablet, che in genere hanno schermi più piccoli.

Per impostazione predefinita, Responsive Menu mostra tutte le voci di menu in un unico elenco. Tuttavia, si può preferire mostrare questi collegamenti in più colonne.

Questa soluzione può funzionare bene se le etichette del menu sono più corte, in quanto consente di mostrare più voci in uno spazio ridotto senza che il menu risulti disordinato.

Per provare diversi layout di colonna, fare clic per espandere la sezione “Menu”.

A questo punto è possibile aprire il menu a tendina “Colonne del contenitore del menu” e scegliere il numero di colonne che si desidera utilizzare.

A questo punto, è possibile che venga visualizzato il testo “Aggiornamento richiesto”. Se viene visualizzato questo messaggio, fare clic per aggiornare l’anteprima live con le nuove impostazioni della colonna.

Per impostazione predefinita, il plugin aggiunge anche una barra di ricerca al menu di WordPress. Questa può aiutare i visitatori a trovare contenuti interessanti, ma occupa anche spazio prezioso sullo schermo.

Se preferite, potete rimuovere la barra di ricerca per gli utenti mobili disattivando la levetta accanto a “Cerca”.

Ci sono molte altre impostazioni che si possono configurare, per cui si consiglia di dedicare un po’ di tempo alla consultazione delle altre opzioni. Tuttavia, questo è sufficiente per creare un menu ben progettato e adatto ai dispositivi mobili.

Quando si è soddisfatti della configurazione del menu di navigazione, fare clic su “Aggiorna”.

Ora è sufficiente visitare il vostro blog WordPress utilizzando un dispositivo mobile per vedere il nuovo menu in azione. È anche possibile visualizzare la versione mobile del sito WordPress dal desktop.

Metodo 2: Creare un menu responsive a schermo intero pronto per i dispositivi mobili

Un’altra opzione è quella di aggiungere un menu responsive a schermo intero. Si tratta di un menu che si adatta automaticamente alle diverse dimensioni dello schermo, in modo che il menu di navigazione abbia sempre un bell’aspetto indipendentemente dal dispositivo utilizzato dal visitatore.

Poiché il menu occupa tutto lo spazio disponibile, è più facile navigare su smartphone e tablet, indipendentemente dalle dimensioni dello schermo.

Il modo più semplice per creare un menu a schermo intero è utilizzare FullScreen Menu. Questo plugin consente di creare un menu a schermo intero solo per i dispositivi mobili, oppure di mostrare lo stesso menu su smartphone, tablet e computer desktop, in modo che tutti i visitatori abbiano la stessa esperienza.

La prima cosa da fare è installare e attivare il plugin FullScreen Menu. Per maggiori dettagli, potete consultare la nostra guida passo-passo su come installare un plugin di WordPress.

Dopo l’attivazione, visitate la pagina Opzioni menu a schermo intero dal menu di WordPress e selezionate la seguente casella: ‘Attiva il menu a schermo intero animato’.

Si consiglia inoltre di selezionare la casella “Mostra il menu solo per gli utenti amministratori”. In questo modo si possono vedere le modifiche mentre si configura il menu, ma i visitatori non vedranno il menu mobile finché non lo si rende attivo.

Per impostazione predefinita, il plugin mostra il menu a schermo intero su tutti i dispositivi. Se si desidera mostrare il menu a schermo intero solo su smartphone e tablet, selezionare la casella accanto a “Solo mobile”.

Successivamente, è possibile perfezionare l’aspetto del menu facendo clic sulla scheda “Design / Aspetto”.

Qui si possono scegliere i colori, i caratteri e le impostazioni di animazione per il menu a schermo intero.

Quando si apportano queste modifiche, è sufficiente tenere presente che “Menu di sfondo iniziale” è l’icona di attivazione del menu. Mentre “Menu di sfondo aperto” è il colore del menu mobile espanso a schermo intero.

Dopo aver scelto i colori del menu, scorrere fino alla sezione “Aspetto del menu”. Qui è possibile modificare il colore, la famiglia e la dimensione dei caratteri del menu.

Tenete presente che il caricamento di font aggiuntivi potrebbe influire sulle prestazioni e sulla velocità del vostro sito WordPress. Questa non è sempre una buona scelta per i dispositivi mobili, che in genere hanno una potenza di elaborazione inferiore rispetto ai computer desktop. Alcuni visitatori possono anche avere una connessione Internet mobile scadente, il che renderà il vostro sito ancora più lento.

A questo punto, scorrere fino a “Impostazioni di animazione”.

Per iniziare, è possibile scegliere come il menu si espanderà quando un visitatore fa clic sull’icona a levetta. Basta aprire il menu a tendina ‘Tipo di animazione’ e scegliere un’opzione dall’elenco, ad esempio Dall’alto in basso o Da sinistra a destra.

Quando si è soddisfatti del layout del menu, fare clic sulla scheda “Contenuto del menu” per add-on.

Qui, aprire il menu a tendina ‘Seleziona menu’ e scegliere il menu che si desidera visualizzare a schermo intero.

Se non avete ancora creato un menu di navigazione, consultate la nostra guida su come aggiungere menu di navigazione in WordPress.

Se si desidera mostrare contenuti aggiuntivi nel menu, è possibile aggiungerli nella casella “HTML libero / Shortcodes”. Questo funge da mini-editor della pagina e consente di digitare il testo, modificare la formattazione, aggiungere punti elenco, elenchi numerati e altro ancora.

C’è anche una casella di controllo che aggiungerà un link alla pagina dell’informativa sulla privacy.

Successivamente, potreste aggiungere le icone dei social media al vostro menu di WordPress. Queste icone appariranno in una riga in fondo al menu a schermo intero.

Per aggiungere queste icone, è sufficiente fare clic per espandere la casella “Icona sociale 1”.

È ora possibile digitare un titolo per l’icona, ad esempio “Facebook”.

Successivamente, fare clic sulla freccia accanto a “Icona sociale” e scegliere l’icona che si desidera mostrare ai visitatori mobili.

Infine, digitate l’indirizzo che volete utilizzare nel campo “URL sociale”.

Per aggiungere altre icone, è sufficiente fare clic sul pulsante “Aggiungi un’altra icona”.

Infine, è possibile aggiungere una barra di ricerca di WordPress per aiutare i visitatori a trovare ciò che stanno cercando. Per farlo, basta selezionare la casella accanto a “Aggiungi barra di ricerca”.

Per impostazione predefinita, il plugin mostra il messaggio “Cerca qualcosa…”. Tuttavia, è possibile sostituirlo con un messaggio personalizzato digitando nel campo “Segnaposto per la ricerca”.

Ad esempio, se gestite un negozio WooCommerce, potreste voler utilizzare un testo come “Inizia lo shopping” o “Cerca prodotti”.

Quando si è soddisfatti della configurazione del menu, fare clic sul pulsante “Salva”.

Ora è sufficiente visitare il vostro sito web con un dispositivo mobile per vedere il menu a schermo intero in azione.

È inoltre possibile visualizzare un’anteprima della versione mobile del sito web utilizzando il personalizzatore di temi di WordPress.

Bonus: Come aggiungere un menu mobile-reattivo alle landing page

Se state creando una landing page o una pagina di vendita, vorrete che il design sia altrettanto bello sui dispositivi mobili che su quelli desktop.

Per questo consigliamo di creare la pagina con SeedProd. È il miglior costruttore di pagine di WordPress e viene fornito con più di 300 modelli progettati professionalmente.

Dopo aver creato un design con SeedProd, è possibile aggiungere un menu mobile alla pagina utilizzando il blocco Nav Menu già pronto di SeedProd. Questo blocco consente di creare menu separati per i dispositivi con menu e per i desktop.

In questo modo, è possibile utilizzare un layout diverso e persino mostrare link diversi a seconda del dispositivo dell’utente.

Per saperne di più, consultate la nostra guida su come add-on i menu di navigazione personalizzati in WordPress.

Dopo aver aggiunto il blocco Nav al progetto, è sufficiente fare clic sulla scheda “Avanzate”.

Qui, fare clic per espandere la sezione “Visibilità del dispositivo”.

Successivamente, fare clic sulla levetta “Nascondi sul desktop” per attivarla. Ora questo menu apparirà solo sui dispositivi mobili.

È ora possibile aggiungere collegamenti e modificare il layout del menu utilizzando le impostazioni del menu di sinistra.

Speriamo che questo articolo vi abbia aiutato a capire come creare un menu WordPress responsive pronto per i dispositivi mobili. Potreste anche consultare la nostra guida per principianti su come add-on un ridimensionatore di font in WordPress e i nostri consigli da esperti su come creare un sito WordPress mobile-friendly.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.