Come aggiungere un menu responsive a schermo intero in WordPress

I menu sono essenziali per aiutare i visitatori a navigare sul tuo sito WordPress e a trovare altri tuoi post e pagine. I menu responsive a schermo intero possono essere particolarmente utili quando si progetta il sito per gli utenti mobili.

Quando i tuoi utenti cliccano o toccano un'icona hamburger, verrà visualizzato un overlay a schermo intero del menu del tuo sito web con una bellissima animazione.

Abbiamo sperimentato alcuni tipi di menu diversi sui nostri siti per vedere quali ottengono i migliori risultati. E in questo articolo, ti mostreremo come aggiungere un menu responsive a schermo intero in WordPress senza scrivere codice.

Perché aggiungere un menu responsive a schermo intero in WordPress?

Un menu responsive a schermo intero rende molto più facile per i visitatori navigare nel tuo sito web WordPress o negozio WooCommerce su smartphone e tablet.

Utilizzando l'intero schermo per il menu, è semplice toccare i collegamenti senza selezionare accidentalmente l'elemento sbagliato.

Con sempre più persone che navigano da dispositivi mobili piuttosto che da desktop, controllare l'aspetto del tuo sito su schermi piccoli è essenziale.

Un menu responsive si adatta automaticamente a diverse dimensioni dello schermo, garantendo un'esperienza fluida per ogni visitatore.

Diamo un'occhiata a come aggiungere un menu responsive a schermo intero in WordPress.

Passaggio 1: Installa e attiva il plugin FullScreen Menu

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 principianti per maggiori dettagli.

Passaggio 2: Configura le impostazioni generali del menu

Dopo l'attivazione, dovresti recarti alla pagina Opzioni Menu a Schermo Intero nel menu di amministrazione di WordPress per configurare le impostazioni del plugin.

Ti porterà automaticamente alla scheda 'Impostazioni'. Inizia selezionando la casella ‘Attiva menu animato a schermo intero’ per abilitare il menu.

È una buona idea selezionare anche la casella 'Mostra solo per gli utenti amministratori' all'inizio. Questo ti permetterà di vedere le modifiche mentre configuri il menu, ma i visitatori del tuo sito non potranno vederlo finché non avrai finito.

Non dimenticare di tornare indietro e deselezionare quella casella quando hai finito.

Sotto queste opzioni, troverai altre impostazioni che ti permettono di mostrare il menu solo sui dispositivi mobili, chiudere il menu con un clic o uno scorrimento, e nascondere il menu su pagine specifiche. 

Per il nostro esempio, lasceremo queste impostazioni deselezionate, ma sentiti libero di personalizzarle come desideri per il tuo sito.

Passaggio 3: Personalizza il design e l'aspetto del menu

Successivamente, personalizzeremo il design del menu. Fortunatamente, il plugin del menu ti consente di farlo senza bisogno di CSS personalizzato.

Per personalizzare il menu, dovrai fare clic sulla scheda 'Design/Aspetto' in alto nella pagina. In questa pagina, puoi scegliere i colori, il carattere e le impostazioni di animazione per il tuo menu.

In cima alla pagina, noterai due impostazioni del colore. Il primo colore è per l'icona del menu hamburger. Questa appare tipicamente nell'area dell'intestazione del tuo sito web. Quando i tuoi visitatori fanno clic o toccano, il menu a schermo intero verrà mostrato o nascosto.

La seconda impostazione di colore è per lo sfondo del menu.

Quando fai clic su ciascuna casella, apparirà una palette di colori. Puoi fare clic sul colore che desideri utilizzare o digitare il suo codice esadecimale.

Dopo aver scelto i colori del menu, dovresti scorrere la pagina fino alla sezione Font/Aspetto. Qui, puoi scegliere il colore, la famiglia e la dimensione del carattere che verranno utilizzati per il testo del menu.

Per questo tutorial, raccomandiamo di attenersi alle impostazioni predefinite dei font, che spesso utilizzano il font del tuo tema.

Questa è una buona scelta perché corrisponderà al design generale del tuo sito web e il caricamento di font aggiuntivi può talvolta rallentare le prestazioni e la velocità del tuo sito WordPress.

Ci sono anche impostazioni per visualizzare un menu laterale su pagine specifiche e per scorrere il menu principale se non è abbastanza alto. Per questo tutorial, lasceremo queste impostazioni deselezionate, ma sentiti libero di sperimentare con esse sul tuo blog o sito web WordPress.

Dopo di che, scorri fino alla sezione 'Impostazioni animazione'. Qui, puoi regolare due impostazioni principali.

La prima di queste è 'Tipo di animazione'. Questo ti permette di selezionare la direzione dell'animazione quando il menu viene attivato. Puoi scegliere da alto verso basso, da sinistra verso destra e da destra verso sinistra.

La seconda impostazione è l'effetto che ottieni quando passi il mouse sopra una voce di menu. Le scelte sono una linea sottile che appare (come una linea di spaziatura), un cambio di colore di sfondo o un cambio di colore di sfondo con un bordo arrotondato.

Passaggio 4: Definisci il contenuto del menu a schermo intero

Infine, dovrai scorrere di nuovo fino in cima alla pagina e fare clic sulla scheda 'Contenuto del menu'. Qui, puoi selezionare il menu WordPress che verrà visualizzato nel tuo menu a schermo intero.

Accanto a 'Seleziona Menu' in alto, dovrai scegliere un menu dall'elenco a discesa. Se non hai ancora creato un menu di navigazione, consulta la nostra guida su come aggiungere menu di navigazione in WordPress.

Se desideri visualizzare contenuti aggiuntivi nella schermata del menu, puoi aggiungerli nella sezione successiva, etichettata come ‘Free HTML / Shortcodes’. Digita semplicemente il tuo contenuto nella casella dell'editor e aggiungi eventuali file multimediali che desideri. Questo contenuto verrà visualizzato sotto il menu.

C'è anche una casella di controllo che includerà un link alla tua pagina della privacy policy. Molti proprietari di siti web preferiscono aggiungerlo nel footer invece che nel menu principale, tuttavia.

Successivamente, potresti voler aggiungere icone social come elementi del menu. Queste verranno visualizzate in una riga in fondo al tuo menu a schermo intero.

Per aggiungerle, scorri semplicemente verso il basso fino alla sezione ‘Social Icons’ e inserisci un titolo per l'icona, come ‘Facebook’. Dopodiché, scegli l'icona appropriata e digita l'URL della tua pagina social.

Puoi aggiungere altre icone facendo clic sul pulsante ‘Add Another Icon’.

Infine, puoi aggiungere una barra di ricerca in cima al tuo menu responsive. Dovrai scorrere fino in fondo alla pagina 'Contenuto del menu' e selezionare la casella 'Aggiungi barra di ricerca?'. Se vuoi, puoi anche digitare del testo segnaposto.

Passaggio 5: Salva le modifiche e testa il tuo menu

Infine, fai clic sul pulsante ‘Salva modifiche’ per memorizzare le tue impostazioni.

Ora puoi visitare il tuo sito web per vedere il menu responsive a schermo intero in azione. Ti consigliamo di ridimensionare il browser per vedere come si comporta il menu su diverse dimensioni dello schermo.

Ecco come appare sul nostro sito web demo.

Una volta che sei soddisfatto del tuo menu a schermo intero, non dimenticare di tornare a Opzioni menu a schermo intero nel menu di amministrazione di WordPress e deselezionare 'Mostra solo per gli utenti amministratori'.

Dopo aver fatto clic sul pulsante ‘Salva modifiche’, i visitatori del tuo sito web potranno accedere al menu.

Domande frequenti sull'aggiunta di un menu responsive a schermo intero in WordPress

Ecco alcune domande che i nostri lettori hanno posto frequentemente sull'aggiunta di un menu responsive a schermo intero in WordPress:

Come si crea un menu responsive in WordPress?

Per creare un menu responsive in WordPress, utilizza un plugin per menu mobile-friendly come FullScreen Menu. Questo assicura che il tuo menu si adatti a diverse dimensioni dello schermo per una navigazione fluida.

Come si rende un'intestazione responsive in WordPress?

Rendere un'intestazione responsive in WordPress significa che si adatta automaticamente su qualsiasi dispositivo. Puoi farlo utilizzando un tema responsive o personalizzando il layout dell'intestazione con CSS e l'editor a blocchi.

Per istruzioni dettagliate, consulta il nostro tutorial su come personalizzare l'intestazione del tuo WordPress.

Come creare una pagina a schermo intero in WordPress?

Puoi creare una pagina a schermo intero in WordPress utilizzando un page builder come SeedProd o le impostazioni del tema che consentono modelli "a larghezza intera". Questo rimuove le barre laterali e allarga il tuo contenuto su tutto lo schermo.

Come creare una tabella responsive in WordPress?

Per creare una tabella responsive in WordPress, usa il blocco tabella dell'editor a blocchi o un plugin con supporto per tabelle responsive. Questo assicura che la tua tabella scorra o si impili ordinatamente sui dispositivi mobili.

Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere un menu responsive a schermo intero al tuo sito WordPress. Potresti anche voler imparare come aggiungere un mega menu sul tuo sito WordPress o come aggiungere un menu a pannello scorrevole nei temi WordPress.

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