Come creare il menu di navigazione di WordPress con 2 metodi diversi

Menù di navigazione di WordPress

I menu di navigazione sono come le stelle polare di un sito web. Immagina il tuo sito web come un mare pieno di cose da navigare per i marinai. Hanno quindi bisogno di un navigatore per raggiungere facilmente la destinazione desiderata.

È qui che entrano in gioco i menu di navigazione. Svolgono un ruolo chiave nel guidare i visitatori e fornire loro un'esperienza di navigazione fluida attraverso il tuo sito web.

Quindi, se sei il proprietario di un sito web o uno sviluppatore, devi impegnarti e concentrarti ulteriormente per progettare un menu di navigazione user-friendly per il tuo sito web.

Per gli utenti di WordPress, hai la flessibilità di progettare il menu di navigazione di WordPress in un paio di modi. 

In questa guida ti guideremo attraverso le profondità di Gutenberg ed Elementor per la creazione di un menu di navigazione. Alla fine di questo blog sarai in grado di creare e personalizzare il menu di navigazione di WordPress e migliorare l'esperienza utente del tuo sito web.

Cos'è il menu di navigazione di WordPress?

Il menu di navigazione del sito web è come la mappa del tuo sito web, che guida i visitatori attraverso le sue pagine. Questi menu vengono visualizzati come una serie di collegamenti o pulsanti generalmente visualizzati su una pagina Web, solitamente nella parte superiore o laterale. 

Aiuta a migliorare l'accessibilità e l'esperienza utente del tuo sito web fornendo un modo strutturato per esplorare le pagine del sito web e il loro contenuto.

Con WordPress, creare e personalizzare i menu per il tuo sito web è abbastanza semplice. Puoi aggiungere pagine, post, collegamenti personalizzati o persino categorie al menu di navigazione di WordPress.

Il metodo predefinito per creare un menu WordPress è abbastanza semplice. Fornisce un'interfaccia semplice per la creazione e la gestione dei menu di navigazione.

Tuttavia, troverai più plugin WordPress che aggiungono funzionalità avanzate e flessibilità nella personalizzazione del menu di navigazione. Alcuni di questi plugin sono dotati di un'interfaccia drag-and-drop intuitiva, che ti consente di organizzare facilmente le voci di menu nell'ordine desiderato.

In sostanza, il menu di navigazione di WordPress è un elemento cruciale per migliorare l'esperienza utente del tuo sito web, aiutando i visitatori a trovare ciò che stanno cercando in modo rapido ed efficiente.

✅ Metodo 1: Come creare il menu di navigazione di WordPress direttamente su una pagina (con GutenKit)

Il metodo convenzionale per aggiungere un menu di navigazione prevede la creazione del menu all'interno della dashboard di WordPress e quindi l'incorporazione in una pagina o in un post.

Ma utilizzando i blocchi GutenKit, puoi creare il menu di navigazione di WordPress direttamente in una pagina o in un post. E crea anche una pagina personalizzata durante la creazione del menu di navigazione. Scopriamo come 👇

📢 Prerequisito

Per creare un menu di navigazione WordPress direttamente nella pagina web, devi installare e attivare il plugin GutenKit sul tuo sito WordPress.

⬇️ Scarica il plugin GutenKit

Impara anche💡Come installare e attivare il plugin dell'editor di blocchi GutenKit.

#️⃣ Passaggio 1: seleziona il blocco del menu di navigazione

Dopo aver installato il plugin, aprire una pagina nell'editor Gutenberg (l'editor WordPress predefinito).

Nell'editor, trova e seleziona GutenKit Menù di navigazione bloccare. Quindi aggiungi il menu di navigazione alla sezione dell'editor.

Trascina e rilascia il menu di navigazione WordPress da GutenKit

#️⃣ Passaggio 2: aggiungi voci di menu al menu di navigazione in WordPress

Nel Menù di navigazione blocco, puoi aggiungere voci di menu semplicemente facendo clic sul pulsante con l'icona ➕ (più), ad es Aggiungi Menù pulsante. 

👉 Aggiunta di una pagina esistente al menu di navigazione

Quando fai clic sul pulsante Aggiungi menu, verrà visualizzato un elenco delle pagine esistenti del tuo sito web. In alternativa, puoi anche effettuare una ricerca digitando il nome della pagina o l'URL nel campo di ricerca.

Aggiungi voci di menu al menu di navigazione di WordPress

Inoltre, hai la possibilità di modificare il file Etichetta del menu E URL della pagina dalla barra laterale e dalle pagine personalizzate al menu di navigazione di WordPress.  

✨ Creazione di nuove pagine direttamente nel menu di navigazione

Ad esempio, mentre creavo un menu, all'improvviso mi sono reso conto di aver dimenticato di creare la pagina "Il mio account" sul sito web. 

Quindi, in genere, dovevo tornare alla dashboard e creare una nuova pagina denominata "Il mio account". Quindi torna all'editor e aggiungi questa pagina al menu di navigazione.

Bene, con GutenKit questo fastidio è eliminato!

Durante l'aggiunta di voci di menu, digita il nome della pagina nel campo di ricerca. Se la pagina non esiste sul sito web, una pagina verrà creata come bozza e aggiunto al menu di navigazione di WordPress.

Successivamente puoi modificare il contenuto della pagina e pubblicarlo per il tuo sito web.

Aggiungi una nuova pagina nel menu di navigazione di WordPress

#️⃣ Passaggio 3: configura il menu di navigazione di WordPress

Nel passaggio successivo, puoi configurare come apparirà il menu di navigazione sul tuo sito web. Utilizza le seguenti impostazioni di GutenKit per personalizzare l'aspetto del menu:

  1. Punto di interruzione del menu: Durante la personalizzazione del menu, puoi impostare il punto di interruzione del menu per tablet o dispositivo mobile oppure aggiungere un punto di interruzione personalizzato.
  2. Blocco scorrimento per fuori tela: È possibile applicare il blocco dello scorrimento quando il menu viene visualizzato come menu fuori schermo.
  3. Giustificare il contenuto: Hai più opzioni per giustificare il contenuto del menu come Inizio, Centro, Fine, ecc.
  4. Allinea elementi: Puoi anche allineare il contenuto del menu a destra, a sinistra o al centro.

🟢 Impostazioni del menu mobile 

Con l'editor di blocchi GutenKit puoi configurare separatamente l'aspetto del menu mobile. Per il blocco Menu Nav sono disponibili le seguenti impostazioni.

  • Logo del menu mobile
  • Collegamento al menù
  • Icona dell'hamburger

#️⃣ Passaggio 4: personalizza gli stili del menu di navigazione di WordPress

Per personalizzare il menu di navigazione GutenKit in WordPress, spostati su Stili scheda nell'editor di blocchi. Nella scheda Stile, puoi personalizzare il wrapper del menu, le voci del menu, l'hamburger e il logo del menu mobile.

✅ Metodo 2: Come aggiungere il menu di navigazione nell'editor classico di WordPress

Se stai ancora utilizzando l'editor classico, devi aggiungere il menu di navigazione di WordPress dal file Aspetto > Menu dalla tua dashboard. Per aggiungere un nuovo menu:

  • Passo 1: Vai a Aspetto > Menu.
  • Passo 2: Inserisci il Nome del menù.
  • Passaggio 3: Seleziona il Visualizza posizione.
  • Passaggio 4: Clicca sul "Crea Menùpulsante ".

Dopo aver creato il menu puoi aggiungere voci di menu dalla barra laterale.

  • Passaggio 5: Successivamente, aggiungi pagine, post, collegamenti personalizzati e categorie al menu.
  • Passaggio 6: Infine fare clic su Salva Menù pulsante.

➕ Bonus: come modificare il menu di navigazione in WordPress utilizzando Elementor

Se sei un utente Elementor, puoi facilmente modificare e personalizzare i menu di navigazione di WordPress utilizzando ElementsKit.

Nell'editor di Elementor, trascina e rilascia il file Menu di navigazione ElementsKit aggeggio. Successivamente, puoi personalizzare le impostazioni del menu, le impostazioni del menu mobile e gli stili del menu.

#️⃣ Impostazioni del menu

  • Selezione del menu: Quando scegli "Seleziona menu", visualizzerai le opzioni di menu correnti del tuo sito web.
  • Allineamento orizzontale del menu: Determina dove vuoi che appaia il tuo menu: le opzioni includono Sinistra, Centro, Destra e Giustificato.
  • Comportamento a discesa: Scegli che i menu a discesa si aprano al passaggio del mouse o al clic.
  • Indicatore del sottomenu: Personalizza l'icona che accompagna i menu principali e facilita la navigazione nei sottomenu. Se utilizzi la versione pro di ElementsKit, troverai la funzione Icona indicatore a discesa al posto dell'opzione "Indicatore sottomenu".

#️⃣ Impostazioni del menu mobile

  • Logo del menu mobile: Assegna un logo specifico per la visualizzazione mobile.
  • Collegamento al Menù: Mantieni il collegamento predefinito per la home page o specifica un URL personalizzato nel campo fornito. Facendo clic sul logo gli utenti verranno indirizzati al collegamento designato.
  • Icona hamburger (opzionale): Seleziona un'icona dalla libreria o carica il tuo SVG.
  • Sottomenu Area clic: Se il menu contiene sottomenu, designare un'icona per facilitare la navigazione all'interno di tali aree.

#️⃣ Stili di menu

Personalizzazione del wrapper del menu: Qui puoi ottimizzare aspetti come l'altezza del menu, lo stile dello sfondo, la spaziatura, la larghezza, il raggio del bordo, la spaziatura delle icone e altro ancora.

Stile delle voci del menu: Personalizza l'aspetto delle voci di menu con opzioni per stile di sfondo, colore, spaziatura dei bordi, margine delle voci e altro.

Personalizzazione delle voci del sottomenu: Similmente alle voci di menu, personalizza le voci di sottomenu con varie opzioni di stile disponibili in questa sezione.

Sottomenu Design del pannello: Espandi questa sezione per accedere a una moltitudine di opzioni di personalizzazione per personalizzare il pannello del sottomenu a tuo piacimento.

Stile dell'icona dell'hamburger: Esplora diverse opzioni di stile per l'icona dell'hamburger, inclusi colori, dimensioni, posizioni e funzionalità aggiuntive.

Personalizzazione del logo del menu mobile: Personalizza il logo del menu mobile in base alle tue preferenze utilizzando le opzioni fornite in questa sezione.

Avvolgendo

Seguendo la guida passo passo illustrata in questo blog, ora possiedi le conoscenze per creare senza sforzo menu personalizzati su misura per le esigenze del tuo sito web. Ricorda di mantenere la struttura del menu logica, concisa e intuitiva per garantire una navigazione fluida per i tuoi visitatori. Con la flessibilità e la versatilità di WordPress, le possibilità di creare menu di navigazione dinamici e accattivanti sono infinite. Quindi tuffati, sperimenta ed eleva la navigazione del tuo sito web a nuovi livelli!


Commenti

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *