Dopo aver creato un menu e aggiunto dei link, potresti voler personalizzarne l’aspetto. Questa guida illustra le modifiche più comuni che puoi apportare al design del menu.
I temi dell’Editor del sito ti permettono di personalizzare completamente il design del menu attraverso l’Editor nella sezione Aspetto della bacheca. I temi classici offrono opzioni limitate per personalizzare il design del menu, disponibili in Personalizza nella sezione Aspetto della bacheca.
Per capire quale sezione di questa guida seguire, visita la bacheca di WordPress.com e controlla la voce Aspetto nella barra laterale sinistra. Se vedi Editor, segui la sezione Editor del sito di questa guida. In caso contrario, segui le istruzioni per il Personalizza.
Se il tuo tema usa l’Editor del sito (ovvero vedi Aspetto → Editor nella bacheca), puoi controllare il design del menu nelle impostazioni del blocco Navigazione seguendo questi passaggi:
- Dalla bacheca del sito, vai su Aspetto → Editor.
- Seleziona Modelli e scegli un template che includa il tuo menu, come Home o Pagina Iniziale.
- Apri la Vista elenco nell’angolo in alto a sinistra dello schermo (è l’icona che assomiglia a tre linee orizzontali una sopra l’altra).
- Seleziona il blocco Navigazione nella Vista elenco.
- Se non vedi un blocco Navigazione, puoi crearne uno.
- Sul lato destro dello schermo, visualizza le impostazioni del blocco Navigazione.
- Personalizza gli stili del blocco Navigazione tramite l’icona delle impostazioni o l’icona degli stili.
- Fai clic sul pulsante Salva per salvare le modifiche.
Scopri come usare ogni impostazione nella nostra guida alle impostazioni del blocco Navigazione, tra cui:
- Stili del blocco Navigazione, come colore, tipografia e dimensioni.
- Impostazioni di layout del blocco Navigazione, come giustificazione, orientamento e visualizzazione del menu.
Questo video mostra come accedere al blocco Navigazione e modificarne le impostazioni e gli stili. Questa funzionalità è disponibile nei nostri temi dell’Editor del sito, completamente personalizzabili. Puoi rallentare o velocizzare il video usando i controlli nell’angolo in basso a destra, dopo aver fatto clic sul pulsante Play.
Questa sezione si applica ai siti creati con il Costruttore di siti web IA (tutti i piani a pagamento) o ai siti che hanno attivato l’Agente WordPress (tutti i piani a pagamento). Apri l’Agente WordPress facendo clic sull’icona IA (una stella a quattro punte) nella parte inferiore dello schermo.
L’Agente WordPress può modificare direttamente l’aspetto e il comportamento del menu. Ecco alcune cose che puoi chiedergli di fare:
- “Cambia il colore del mio menu di navigazione in modo che si abbini al mio marchio.”
- “Imposta i menu a discesa in modo che si aprano al clic anziché al passaggio del mouse.”
- “Mostra il menu come menu hamburger su tutte le dimensioni dello schermo.”
- “Aggiungi una classe CSS chiamata ‘featured-link’ alla voce di menu Contatti.”
Puoi spostare la posizione del menu in tutti i temi dell’Editor del sito. Questi temi usano l’Editor nella sezione Aspetto per offrirti il pieno controllo sul layout, inclusa la posizione del menu del sito.
Anche se la posizione del menu nei temi dell’Editor del sito è completamente personalizzabile, potresti voler iniziare cercando un tema che mostri il menu in una posizione che ti piace. Scopri di più su come cambiare tema.
Se hai già scelto un tema dell’Editor del sito e vuoi cambiare la posizione del menu, hai diverse opzioni:
- Scopri come selezionare e spostare il blocco Navigazione, oppure vai direttamente al tutorial video.
- Aggiungi un nuovo menu al tuo template.
- Aggiungi la navigazione del sito a una singola pagina o articolo usando il blocco Elenco pagine.
- Aggiungi la navigazione all’interno di una pagina o di un articolo usando il blocco Indice.
Se usi un tema che non prevede l’Editor nella sezione Aspetto della bacheca, dai un’occhiata ai nostri temi dell’Editor del sito, completamente personalizzabili.
Su schermi desktop, il menu in genere appare come un elenco di link di testo su una sola riga. Sugli schermi più piccoli (tablet e dispositivi mobili), lo spazio potrebbe non essere sufficiente per mostrare tutti i link di testo in modo che i visitatori possano toccarli facilmente.
Invece, è comune raggruppare gli elementi del menu dietro un pulsante chiamato menu “sovrapposizione” o “hamburger” (chiamato così perché le tre linee orizzontali ricordano un hamburger).
Nelle impostazioni del blocco Navigazione nell’Editor del sito, puoi regolare la visualizzazione del menu di sovrapposizione. Segui questi passaggi per personalizzare la visualizzazione del menu di sovrapposizione:
- Dalla bacheca del sito, vai su Aspetto → Editor.
- Seleziona Modelli e scegli un template che includa il tuo menu, come Home o Pagina Iniziale.
- Apri Vista elenco nell’angolo in alto a sinistra della schermata (è l’icona che assomiglia a tre linee orizzontali una sopra l’altra).
- Seleziona il blocco Navigazione in Vista elenco.
- Sul lato destro dello schermo, visualizza le impostazioni del blocco Navigazione.
- Fai clic sull’icona Impostazioni (l’icona a forma di ingranaggio).
- Sotto Visualizzazione, scegli le impostazioni del menu di sovrapposizione:
- Mobile: l’impostazione predefinita. Il menu di sovrapposizione verrà visualizzato solo sugli schermi di dimensioni da dispositivo mobile.
- Disattivato: non visualizzare alcun menu di sovrapposizione.
- Sempre: mostra il menu di sovrapposizione in ogni momento, indipendentemente dalle dimensioni dello schermo.
- Con il template di sovrapposizione, puoi personalizzare l’aspetto della sovrapposizione a schermo intero che appare sui dispositivi mobili. Consulta la nostra guida sulla personalizzazione della sovrapposizione di navigazione.
- Fai clic sul pulsante “Salva” per salvare le modifiche.
I visitatori del sito sono abituati a vedere un’icona o un menu hamburger sui dispositivi mobili. Visualizzare il menu desktop (ovvero disattivare il menu di sovrapposizione) potrebbe rendere difficile per i visitatori navigare nel tuo sito web dai dispositivi mobili.
Consulta la guida sul blocco Navigazione per scoprire come usare tutte le funzionalità del blocco.
I temi classici e i temi di terze parti possono avere impostazioni predefinite proprie per la visualizzazione del menu sui dispositivi mobili. Consulta la documentazione del tema che hai scelto per saperne di più.
Puoi controllare se un menu a discesa si apre quando un visitatore passa il mouse su un elemento del menu, ci fa clic sopra oppure resta sempre visibile.
Per impostare la visibilità dei sottomenu, segui questi passaggi:
- Dalla bacheca del sito, vai su Aspetto → Editor.
- Seleziona Modelli e scegli un template che includa il tuo menu, come Home o Pagina Iniziale.
- Apri Vista elenco nell’angolo in alto a sinistra della schermata.
- Seleziona il tuo blocco Navigazione.
- Nella barra laterale delle impostazioni del blocco, fai clic sull’icona Impostazioni (l’icona a forma di ingranaggio).
- Sotto Visualizzazione, trova l’impostazione “Visibilità sottomenu” e scegli una delle seguenti opzioni:
- Passaggio del mouse: il menu a discesa si apre quando un visitatore passa il mouse sull’elemento del menu principale. Facoltativamente, puoi disattivare l’impostazione per visualizzare una freccia accanto al menu.
- Clic: il menu a discesa si apre quando un visitatore fa clic sull’elemento del menu principale.
- Fai clic sul pulsante Salva per salvare le modifiche.
Questa sezione della guida si applica ai siti con i piani WordPress.com Personal, Premium, Business e Commerce. Per i siti gratuiti, aggiorna il tuo piano per accedere a questa funzionalità.
Le classi CSS sono una proprietà avanzata del menu che puoi usare per applicare una classe CSS ai singoli elementi del menu.
Per capire quale sezione di questa guida seguire, visita la bacheca di WordPress.com e controlla la voce Aspetto nella barra laterale sinistra. Se vedi Editor, usa la sezione Temi a blocchi di questa guida. In caso contrario, segui le istruzioni per i temi classici.
Per aggiungere una classe CSS nell’Editor del sito, segui questi passaggi:
- Dalla bacheca del sito, vai su Aspetto → Editor.
- Seleziona Modelli e scegli un template che includa il tuo menu, come Home o Pagina Iniziale.
- Apri Vista elenco nell’angolo in alto a sinistra della schermata (è l’icona che assomiglia a tre linee orizzontali una sopra l’altra).
- Seleziona il blocco Navigazione in Vista elenco.
- Se non vedi un blocco Navigazione, puoi crearne uno.
- Sul lato destro dello schermo, visualizza le impostazioni del blocco Navigazione.
- Fai clic sull’icona Impostazioni ⚙️ (ingranaggio) e apri la sezione “Avanzate”.
- Aggiungi la tua classe CSS.
Puoi anche impostare una classe CSS per i singoli link all’interno del blocco Navigazione. Seleziona il singolo link prima di accedere alla sezione Avanzate.
Consulta la nostra guida sul blocco Navigazione per scoprire tutte le funzionalità del blocco.
Scopri di più sull’aggiunta di CSS personalizzato.
Supporto 