Corso WordPress

Creare un menu di navigazione

In questa lezione imparerai come creare un menu di navigazione per il tuo sito WordPress.

Utilizzeremo il tema di default Twenty Fourteen, e l'apposita sezione dedicata alla creazione e gestione dei menu. Vedrai che ogni tema può disporre di diverse aree di visualizzazione menu, quindi dovrai manualmente selezionare quelle in cui vuoi che questo compaia.

Ti mostreremo come comporre il tuo menu, ovvero come inserire in esso elementi come le pagine, le categorie e link esterni. Inoltre imparerai a modificare, grazie alla comoda funzione drag & drop di WordPress, l'ordine degli elementi del tuo menu di navigazione. Vedrai anche come impostare facilmente delle voci di sotto menu, ovvero che compaiono sotto una voce correlata (ad esempio, puoi inserire la voce "chi siamo" sotto quella di "home").

La visualizzazione e la creazione di un menu può variare sensibilmente in base al tema che sceglierai. Nell'esempio che ti mostreremo, vedrai che cambiando tema, dovrai impostare nuovamente il menu attraverso le impostazioni previste dal nuovo template per ripristinare nuovamente una corretta visualizzazione.

Hai una domanda su questa lezione?

Accedi al video corso


  1. Maurilio Giuseppe
    Maurilio Giuseppe dice:

    Buongiorno, vorrei far apparire in un sito in WP fatto con Avada un menù laterale appiccicoso (in aggiunta a quello superiore standard) che stia sempre nella stessa posizione e magai apparire allo scorrimento (esmpio come xxxx), è possibile farlo con Avada o serve un plugin aggiuntivo (se si quale?).
    Grazie

    Rispondi
    • Lorenzo
      Lorenzo dice:

      Ciao Maurilio,

      In Avada > Theme Options > Header > Header Content si può impostare la tipologia di menu.
      Alla voce “Select a Header Layout” ci sono 6 layout differenti.
      A seconda di quello che selezioni avrai a disposizione diverse funzioni che potrai controllare dalla voce del menu subito sotto, che si chiama appunto Menu

      Detto questo, se vuoi un menu laterale che esce non devi andare nella sezione menu, ma utilizzare lo Sliding Bar.
      Sempre dentro alle Theme Options trovi tutte le impostazioni generali di questo strumento alla voce Slideing Bar.
      Attivalo per desktop e se vuoi disabilitalo per mobile.
      Le altre impostazioni sono molto intuitive, basta che le leggi e al massimo fai dei test.

      Per riempirlo di contenuti devi utilizzare un widget.
      Vai in Aspetto > Widget e trovi lo spazio widget Sliding Bar.
      Dentro a questo spazio puoi inserire tutti i widget che desideri, quindi anche un menu.

      Buona giornata

    • Maurilio Giuseppe
      Maurilio Giuseppe dice:

      Grazie. Ho provato e qualche cosa si riesce a fare ma si porta dietro una sovrastruttura particolare (apri, chiudi, barra alta tutto schermo, ecc…). Per fare una cosa graficamente più simile all’esempio indicato (mi servono 2 voci di menù, 2 bottoni/etichette, sempre presenti a dx e centrati verticalmente.
      Esiste un plugin apposito?

    • Lorenzo
      Lorenzo dice:

      Ciao Maurilio,
      ma tu intendi i menu versione tablet mobile oppure le due etichette “richiedi un preventivo” e “richiedi un test drive”?

  2. Niccolò
    Niccolò dice:

    Salve,
    vorrei realizzare un sottomenù come quello che avete voi se si passa con il mouse sopra alla voce “Video Corsi”. Ho notato che ha una struttura simile a quella di molti altri siti web, mi chiedevo se esistesse un plugin apposito per realizzarlo. In ogni caso vorrei sapere se avete qualche dritta da darmi per realizzarlo. Grazie.

    Rispondi
  3. Michela
    Michela dice:

    Buongiorno,
    sto usando il tema Hestia per creare (sto sperimentando) un sito one-page, come suggerito da voi leggendo il vostro articolo sui 9 temi gratuiti migliori.
    quando creo una nuova voce di menu, essa è collegata ad una pagina. C’è la possibilità di collegarla ad una sezione della stessa pagina (l’unica che vorrei avere per il sito), in modo che ad esempio cliccando sulla voce “contatti” il sito scorra verso il basso e mi visualizzi la sezione contatti?
    Non so se mi sono spiegata in modo chiaro, vi ringrazio come sempre
    Michela

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Michela,
      da quello che vedo nella demo di Hestia è sicuramente possibile.

      Generalmente si deve inserire un link interno (anchor) nella url del menu utilizzando il cancelletto seguito da una parola a tua scelta (esempio #contatti).

      All’interno della pagina poi si deve inserire lo stesso riferimento (contatti) nella sezione specifica.

      Nel caso del tema Hestia, puoi fare riferimento alla documentazione ufficiale, perché vedo che i nomi delle sezioni potrebbero essere già prestabiliti o al limite chiedere supporto agli sviluppatori.

      Buona giornata

  4. marcello.falsaperla
    marcello.falsaperla dice:

    Ciao ragazzi,
    Sto cercando di sistemare il menu di navigazione, ho creato un logo tramite logojoy però quando provo ad inserirlo nella barra header rimpicciolendolo sgrana troppo. Giustamente lasciandolo più grande non si posiziona correttamente nella barra. Avete qualche suggerimento? Stavo pensando di rendere la header trasparente per permettere al logo di essere più grande, voi cosa ne pensate?(eventualmente sapreste dirmi come fare?) Mi va benissimo lasciarla anche cosi ma è fondamentale che il mio logo si veda correttamente!
    Utilizzo il tema SocialChef e il mio url nel caso vogliate dare un occhiata è: https://icoachdelfood.com/

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Marcello,
      io ho provato a controllare la tua pagina e mi sembra che il logo si veda bene, solo che ho visto che hai caricato un’immagine enorme (oltre 3000 px di larghezza).

      La dimensione dell’immagine nel tuo tema è di 190×85, quindi magari caricane uno di dimensioni doppie (400×200 circa).

      Per il posizionamento devi controllare le opzioni che da il tuo tema, sia a livello di dimensione logo sia a livello di altezza generale del menu e cercare la combinazione migliore possibile su tutti i dispositivi.

      Volendo puoi anche provare una combinazione di logo con l’icona affiancata sulla sinistra, in modo che puoi ingrandire leggermente il testo.

      Per il resto io ti consiglio di lasciare il menu su fondo bianco in modo da renderlo ben visibile, direi che la grafica della versione demo di Social Chef è già perfetta.

      Buona giornata

    • marcello.falsaperla
      marcello.falsaperla dice:

      Ciao Gianluca,
      Grazie per la risposta, si ho apportato qualche modifica al logo mentre aspettavo risposta, in realtà il vero logo che volevo mettere è rotondo e non come quello che hai visto tu, adesso ho provato a rimetterlo e ho modificato le dimensioni dell’immagine a 204×200, come puoi vedere il logo esce dalla barra e se provo a rimpicciolirlo mi sgrana troppo.

    • Gianluca
      Gianluca dice:

      Ciao Marcello,
      con un logo del genere non ti consiglio di usare questa impostazione, perché l’altezza del menu deve essere comunque relativamente piccola per non rubare troppo spazio ai contenuti.

      È normale che si sgrani: se usi un logo sviluppato in un cerchio, quando è di dimensioni piccole risulta poco chiaro e soprattutto poco leggibile.

      L’unica cosa che puoi fare è controllare se il tema da la possibilità di inserirlo centrato in cima a tutto e non sulla sinistra.

      Per il resto non esagererei aggiungendo troppi elementi al logo, un testo associato ad un’icona è più che sufficiente, quindi il cerchio lo eviterei.

      Prova magari a mettere le icone sulla sinistra rispetto alla scritta, in modo da poter sfruttare la larghezza invece dell’altezza.

      Buona giornata

    • marcello.falsaperla
      marcello.falsaperla dice:

      Ti ringrazio Gianluca, ho seguito il tuo consiglio e ho modificato il logo, adesso è perfettamente leggibile.
      Ti auguro una buona serata!

  5. giorgioaugusti
    giorgioaugusti dice:

    salve,
    vorrei sapere come mai quando inserisco il logo nella barra del menu con Divi non riesco ad ingrandirlo.
    Ho provato a modificarlo dalla voce modificatore tema ho messo logo altezza massima 100…ma niente è sempre piccolo.
    Mi spiegate come posso fare???
    Grazie

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Giorgio,
      Per cambiare l’altezza del logo devi aprire il modificatore di tema e andare nella sezione Header e Navigazione > Barra Menu Primario.

      Qui devi intervenire contemporaneamente su due parametri: Menu altezza e Logo altezza Massima. Cambia queste impostazione e vedrai che il logo si ingrandisce come desideri.

      Chiaramente l’immagine iniziale deve essere inserita con una dimensione (in altezza) maggiore di quella che imposti, altrimenti risulterà poco nitido.

      Buona giornata

  6. Luigi
    Luigi dice:

    Salve
    bene ho visto il corso rif. menu, però non viene spiegato come togliere Home di default, che io non riesco a trovare e dove sia stata inserita, per fare delle modifiche, anche perche la pagina home mostra articolo di presentazione Ciao mondo, posso eliminare articolo, ma no elimino home, vorrei eliminare questa Home, e rifarne una nuova come spiegato nel corso, in modo che come pagina la posso impostare secondo il mio criterio

    Saluti

    Luigi

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Luigi,
      la pagina home appare in automatico fino a che non crei un nuovo menu con le voci che desideri e non gli assegni la posizione di menu primario.
      Ti mando qualche chiarimento maggiore via mail.

  7. Giada
    Giada dice:

    Ciao,
    ho un problema… il menù nella pagina iniziale del mio blog è composto da voci come per esempio: location, ricette, lifestyle. Vorrei che ognuna di queste voci contenesse gli articoli della propria categoria e invece se clicco sopra queste voci vedo che sono pagine di sola presentazione e non rimandano ai rispettivi articoli. Come posso fare?
    Grazie mille
    Giada

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Giada,
      per fare ciò che desideri puoi utilizzare direttamente il menu Categorie che trovi sul pannello insieme a Pagine, Link personalizzati, Articoli e altre voci che dipendono dal tema che stai utilizzando.

      Seleziona le categorie che desideri e rinomina nel caso l’etichetta di navigazione.

      Ti auguro buona giornata.

  8. Giuseppe
    Giuseppe dice:

    Buonasera

    Ho una domanda.

    Io uso il tema Enfold.
    Quando vado in aspetto/menù nella voce (struttura del menù) su Home e Blog c’è scritto in parentesi (mega menù).

    Cosa significa?

    Grazie

    Giuseppe

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Giuseppe,
      il Mega Menu è quello che vedi nella preview del tema Enfold, se passi con il mouse sul tasto Pages.

      In pratica ti consente di costruire un menu con diversi sotto livelli impaginati a colonna.

      Per impostare quali elementi vuoi che compongano il Mega Menu, devi aprire la tab del tasto dal pannello Struttura del menu con la freccina a destra (devono essere per forza voci principali del menu, non sotto elementi).

      In basso c’è il checkbox Use as Mega Menu.
      Se lo selezioni, vedrai che le sottovoci cambiano nome in column.

      Organizza le voci con diversi sotto elementi, in base a quante colonne vuoi realizzare.

      Spero di esserti stato utile,
      Buona giornata

Corso WordPress GRATUITO

INSERISCI NOME E MAIL PER ACCEDERE ALLE PRIME 19 LEZIONI.

Zero spam. Garantito.

Corso Wordpress Gratis

Inizia il Corso di WordPress GRATIS!

Inserisci nome ed email per avere l'accesso gratuito alle prime 19 lezioni del corso. Impara a costruire da solo il tuo sito web!

Ci sei quasi! Ti abbiamo mandato un'email per confermare il tuo indirizzo di posta.

Pin It on Pinterest