Come creare un menu WordPress responsive pronto per dispositivi mobili

Più della metà di tutto il traffico web proviene da dispositivi mobili. Se il tuo menu di navigazione non funziona bene su smartphone e tablet, una grossa fetta del tuo pubblico potrebbe avere difficoltà a orientarsi sul tuo sito.

Con anni di esperienza nella creazione di siti WordPress, comprendiamo l'importanza di rendere il tuo sito reattivo sui dispositivi mobili. Su WPBeginner, abbiamo sempre dato priorità a questo, assicurandoci che i nostri siti siano facili da navigare su qualsiasi dispositivo.

Infatti, abbiamo progettato un menu reattivo per dispositivi mobili che si adatta perfettamente agli schermi più piccoli senza risultare disordinato, migliorando l'esperienza utente su smartphone e tablet.

In questa guida, ti mostreremo come creare facilmente un menu WordPress reattivo pronto per i dispositivi mobili.

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

Un menu di navigazione ben progettato aiuterà i visitatori a orientarsi sul tuo sito web. Tuttavia, solo perché il tuo menu ha un bell'aspetto sui computer desktop, non significa automaticamente che avrà un bell'aspetto anche sugli schermi mobili e sui tablet.

Gli utenti mobili costituiscono circa il 58% di tutto il traffico Internet. Detto questo, se il tuo menu non ha un bell'aspetto o non funziona correttamente sui dispositivi mobili, rischi di perdere metà del tuo pubblico a causa di una scarsa esperienza utente.

Ciò renderà difficile raggiungere obiettivi chiave come la crescita della tua lista email, l'ottenimento di vendite e la crescita della tua attività.

Detto questo, vediamo come puoi creare un menu responsive pronto per dispositivi mobili che sarà fantastico su smartphone e tablet. Usa semplicemente i collegamenti rapidi qui sotto per passare direttamente al metodo che desideri utilizzare.

• Metodo 1: Crea un menu a pannello scorrevole responsive pronto per dispositivi mobili
• Metodo 2: Crea un menu a schermo intero responsive pronto per dispositivi mobili
• Bonus: Come aggiungere un menu responsive per dispositivi mobili alle landing page

Metodo 1: Crea un menu a pannello scorrevole responsive pronto per dispositivi mobili

Un pannello scorrevole responsive è un menu di navigazione che scorre sullo schermo quando un visitatore tocca o fa clic su un interruttore.

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

Questo è 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 accidentalmente i suoi collegamenti utilizzando il touchscreen del dispositivo. Questo rende i pannelli scorrevoli una buona scelta per un menu responsive per dispositivi mobili.

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

Innanzitutto, devi installare e attivare il plugin Responsive Menu. Per maggiori dettagli, consulta il nostro tutorial su come installare un plugin WordPress.

Dopo l'attivazione, puoi utilizzare il plugin per personalizzare qualsiasi menu WordPress che hai creato in precedenza. Se hai bisogno di creare un nuovo menu, consulta la nostra guida per principianti su come aggiungere un menu di navigazione in WordPress.

D'altra parte, se il tuo tema WordPress ha già un menu mobile integrato, dovrai conoscere la classe CSS di quel menu per poterlo nascondere.

Se salti questo passaggio, gli utenti mobili vedranno due menu sovrapposti sul tuo sito web. Per istruzioni dettagliate, consulta la nostra guida su come nascondere un menu mobile in WordPress.

Fatto ciò, vai alla pagina Menu Responsive » Menu nella barra laterale di amministrazione di WordPress e fai clic sul pulsante ‘Crea nuovo menu’.

Ora vedrai alcuni temi responsive per dispositivi mobili diversi che puoi utilizzare per il tuo menu.

Stiamo utilizzando il ‘Tema predefinito’ nelle nostre immagini, ma puoi usare qualsiasi tema desideri. Dopo aver preso la tua decisione, fai clic su ‘Avanti’.

Ora puoi digitare un nome per il menu. Questo è solo per riferimento, quindi puoi usare quello che vuoi.

Fatto ciò, fai clic su ‘Collega menu WordPress’ e scegli il menu che desideri utilizzare.

Come già accennato, se il tuo tema ha già un menu mobile integrato, dovrai aggiungere la sua classe CSS al campo ‘Nascondi menu tema’.

Se esegui l'aggiornamento al plugin premium, otterrai alcune impostazioni aggiuntive. Ad esempio, gli utenti Pro possono nascondere il menu su pagine o dispositivi specifici.

Quando sei soddisfatto di come è configurato il menu, fai clic su ‘Crea menu’.

Ora vedrai un'anteprima del tuo sito web WordPress sulla destra dello schermo e alcune impostazioni sulla sinistra.

Per vedere come appare il tuo sito su dispositivi mobili, fai clic sull'icona del telefono o del tablet in basso a sinistra dello schermo.

Per personalizzare l'aspetto e il comportamento del menu sui dispositivi mobili, seleziona ‘Menu mobile’.

Quindi, fai clic su ‘Contenitore’.

Qui troverai molte impostazioni diverse.

Man mano che apporti modifiche, l'anteprima live si aggiornerà spesso automaticamente. Tenendo presente ciò, è una buona idea espandere il menu in modo da poter monitorare come apparirà il tuo menu mobile. Per farlo, fai semplicemente clic sul pulsante di attivazione del menu.

Per impostazione predefinita, il plugin aggiunge un titolo e del testo ‘Aggiungi altri contenuti…’

Puoi sostituire questo con il tuo messaggio o persino rimuovere completamente il testo. Per modificare il titolo, fai clic per espandere la sezione ‘Titolo’.

Ora puoi digitare il tuo messaggio nel campo 'Testo del titolo'.

Puoi anche aggiungere un link al titolo o aggiungere icone font e immagini.

Per personalizzare l'aspetto del titolo, fai clic sulla scheda 'Stili'.

Qui, puoi cambiare il colore di sfondo, il colore del testo, la dimensione del carattere e altro ancora.

Se non vuoi mostrare alcun testo del titolo, fai clic per disattivare l'interruttore accanto a 'Titolo'.

Se il titolo non è essenziale, rimuoverlo creerà più spazio per i link e altri contenuti nel menu di navigazione mobile.

Per sostituire il testo 'Aggiungi altro contenuto qui…' con il tuo messaggio, fai clic per espandere l'area 'Contenuto aggiuntivo'.

Ora puoi digitare il tuo testo, cambiare il colore del testo, allineare il testo e altro ancora utilizzando le impostazioni nel menu di sinistra.

Per eliminare completamente il testo, fai semplicemente clic per disattivare l'interruttore.

Ancora una volta, questo può creare più spazio per il resto del contenuto del menu. Questo è particolarmente utile su smartphone e tablet, che in genere hanno schermi più piccoli.

Per impostazione predefinita, Responsive Menu mostrerà tutte le voci del tuo menu come un'unica lista. Tuttavia, potresti preferire mostrare questi link in più colonne.

Questo può funzionare bene se le etichette del tuo menu sono più brevi, poiché ti consente di mostrare più elementi in uno spazio più piccolo senza che il menu appaia disordinato.

Per provare diversi layout di colonne, fai clic per espandere la sezione ‘Menu’.

Ora puoi aprire il menu a discesa ‘Colonne del contenitore menu’ e scegliere il numero di colonne che desideri utilizzare.

A questo punto, potresti vedere del testo 'Aggiornamento richiesto'. Se vedi questo messaggio, fai clic su di esso per aggiornare l'anteprima live con le nuove impostazioni della colonna.

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

Se preferisci, puoi rimuovere la barra di ricerca per gli utenti mobili disattivando l'interruttore accanto a 'Cerca'.

Ci sono molte altre impostazioni che puoi configurare, quindi potresti voler dedicare del tempo a esaminare le altre opzioni. Tuttavia, questo è sufficiente per creare un menu ben progettato e pronto per i dispositivi mobili.

Quando sei soddisfatto di come è impostato il menu di navigazione, fai clic su 'Aggiorna'.

Ora, visita semplicemente il tuo blog WordPress utilizzando un dispositivo mobile per vedere il nuovo menu in azione. Puoi anche visualizzare la versione mobile del tuo sito WordPress dal desktop.

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

Un'altra opzione è aggiungere un menu responsive a schermo intero. Questo è un menu che si adatta automaticamente a diverse dimensioni dello schermo, quindi il menu di navigazione avrà 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 ti consente di creare un menu a schermo intero solo per dispositivi mobili, oppure puoi 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. Puoi consultare la nostra guida passo passo su come installare un plugin WordPress per maggiori dettagli.

Dopo l'attivazione, visita la pagina Fullscreen Menu Options dal menu di WordPress e seleziona la seguente casella: ‘Activate Animated Fullscreen Menu.’

Ti consigliamo inoltre di selezionare la casella ‘Show the menu only for Admin users’. Questo ti permetterà di vedere le modifiche mentre configuri il menu, ma i visitatori non vedranno il menu mobile finché non lo renderai pubblico.

Per impostazione predefinita, il plugin mostrerà il menu a schermo intero su tutti i dispositivi. Se desideri mostrare il menu a schermo intero solo su smartphone e tablet, seleziona la casella accanto a ‘Mobile only.’

Dopodiché, puoi perfezionare l'aspetto del menu facendo clic sulla scheda ‘Design / Appearance’.

Qui puoi scegliere i colori, il carattere e le impostazioni di animazione per il menu a schermo intero.

Quando apporti queste modifiche, tieni presente che ‘Initial Background Menu’ è l'icona di attivazione del menu. Nel frattempo, ‘Opened Background Menu’ è il colore del menu mobile espanso a schermo intero.

Dopo aver scelto i colori del menu, scorri fino alla sezione ‘Menu Appearance’. Qui puoi modificare il colore del carattere, la famiglia di caratteri e la dimensione del carattere del menu.

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

Fatto ciò, scorri fino a 'Impostazioni animazione'.

Per iniziare, puoi scegliere come si espanderà il menu quando un visitatore fa clic sull'icona del toggle. Apri semplicemente il menu a discesa 'Tipo di animazione' e scegli un'opzione dall'elenco, come Dall'alto verso il basso o Da sinistra verso destra.

Quando sei soddisfatto del layout del menu, fai clic sulla scheda 'Contenuto del menu' per aggiungere contenuti.

Qui, procedi e apri il menu a discesa 'Seleziona menu' e scegli il menu che desideri visualizzare a schermo intero.

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

Se desideri mostrare contenuti aggiuntivi nel menu, puoi aggiungerli nella casella ‘HTML gratuito / Shortcode’. Questa funziona come un mini editor di pagine, quindi puoi digitare testo, cambiare la formattazione, aggiungere punti elenco e liste numerate e altro ancora.

C'è anche una casella di controllo che aggiungerà un link alla tua pagina della privacy policy. 

Successivamente, potresti voler aggiungere icone dei social media al tuo menu di WordPress. Queste icone appariranno in fila in fondo al menu a schermo intero.

Per aggiungere queste icone, fai semplicemente clic per espandere la casella ‘Icona social 1’.

Ora puoi digitare un titolo per l'icona, come ‘Facebook’.

Dopodiché, fai clic sulla freccia accanto a ‘Icona social’ e scegli l'icona che desideri mostrare ai visitatori mobili.

Infine, digita l'indirizzo che desideri utilizzare nel campo ‘URL social’.

Per aggiungere altre icone, fai semplicemente clic sul pulsante ‘Aggiungi un'altra icona’.

Infine, potresti voler aggiungere una barra di ricerca di WordPress per aiutare i visitatori a trovare ciò che stanno cercando. Per fare ciò, seleziona semplicemente la casella accanto a ‘Aggiungi barra di ricerca’.

Per impostazione predefinita, il plugin mostrerà un messaggio ‘Cerca qualcosa…’. Tuttavia, puoi sostituirlo con il tuo messaggio personalizzato digitando nel campo ‘Placeholder input di ricerca’.

Ad esempio, se gestisci un negozio WooCommerce, potresti voler utilizzare testi come 'Inizia lo shopping' o 'Cerca prodotti'.

Una volta soddisfatto della configurazione del menu, fai clic sul pulsante 'Salva modifiche'.

Ora, visita semplicemente il tuo sito web utilizzando un dispositivo mobile per vedere il menu a schermo intero in azione.

Puoi anche visualizzare in anteprima la versione mobile del tuo sito web utilizzando il personalizzatore di temi di WordPress.

Bonus: Come aggiungere un menu responsive per dispositivi mobili alle landing page

Se stai creando una landing page o una pagina di vendita, allora vorrai che il design sia bello sui dispositivi mobili come lo è sul desktop.

Tenendo conto di ciò, ti consigliamo di creare la pagina utilizzando SeedProd. È il miglior page builder di WordPress e viene fornito con oltre 300 modelli progettati professionalmente.

Dopo aver creato un design utilizzando SeedProd, puoi aggiungere un menu responsive per dispositivi mobili alla pagina utilizzando il blocco Nav Menu pronto all'uso di SeedProd. Questo blocco ti consente di creare menu separati sia per i dispositivi mobili che per i desktop.

In questo modo, puoi utilizzare un layout diverso e persino mostrare collegamenti diversi a seconda del dispositivo dell'utente.

Per saperne di più, consulta la nostra guida su come aggiungere menu di navigazione personalizzati in WordPress.

Dopo aver aggiunto il blocco Nav al tuo design, fai semplicemente clic sulla scheda 'Avanzate'.

Qui, fai clic per espandere la sezione 'Visibilità dispositivo'.

Dopodiché, fai clic sull'interruttore 'Nascondi su desktop' per attivarlo. Ora, questo menu apparirà solo sui dispositivi mobili.

Ora puoi aggiungere collegamenti e modificare il layout del menu utilizzando le impostazioni nel menu a sinistra.

Speriamo che questo articolo ti abbia aiutato a imparare come creare un menu WordPress responsive pronto per dispositivi mobili. Potresti anche voler consultare la nostra guida per principianti su come aggiungere un ridimensionatore di font in WordPress e i nostri consigli esperti su modi per creare un sito WordPress ottimizzato per dispositivi mobili.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.