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.
Ciao, sto costruendo il mio sito (con Divi) e ho costruito un menù con pagine principali e secondarie ma ho un problema. Vorrei che alcune voci principali del menù non aprissero una propria pagina ma mostrassero solo una scelta tra le pagine secondarie presenti nella tendina che si apre. Per esempio, se clicco sulla voce PRODOTTI si apre una pagina bianca che ho costruito per avere la voce PRODOTTI nel menù, ma io vorrei solo poter scegliere tra le sottopagine, per esempio TAVOLI, SEDIE, ARMADI, ECC. E’ possibile? Grazie mille!
Ciao Paolo,
è possibile, basta che metti nel menu il simbolo # al posto del della URL del link (quindi la voce prodotti in questo caso).
Buona giornata
Non capisco. Nel menù non vedo URL ma solo i nomi delle pagine. Se sostituisco PRODOTTI con il cancelletto poi nel menù della pagina vedo quello anziché la parola PRODOTTI. Mi sfugge qualcosa?
Ciao,
in Aspetto > Menu, apri il tuo menu.
Poi nel pannello di destra “Aggiungi voci del menu” vai in Link personalizzati.
Come URl metti # e come testo del link “prodotti”.
Buona giornata
Fatto. Tutto a posto. Grazie!
Ciao Lorenzo
forse c’è stato qualche problema ma ho avuto una notifica relativa ad una tua risposta che però non vedo. Comunque ripeto la domanda:
Si può importare un menu da un sito esterno e aggiungerlo a quello del sito che stiamo sviluppando?
grazie anticipatamente
Ciao Andrea,
per favore non scrivere da cellulare, perché altrimenti ti devo correggere tutti gli errori di ortografia, battitura e abbreviazioni. Grazie.
Rispondendo alla tua domanda non mi è mai capitato di dover importare solo il menu. Solitamente i menu sono molto semplici da fare e ci si emtte 3 minuti.
Se il menu è complesso, allora vuol dire che si è utilizzato un “mega menu” di un tema o un plugin, caso in cui, se cambi tema o plugin, non puoi installare.
Devi pertanto rifarlo.
Buona giornata
Salve, ho impostato un menu di navigazione nella barra laterale a sinistra. Mi chiedo e vi chiedo, è possibile definire la larghezza della barra e cambiare il colore e lo stile in alcune delle voci del menu?
Utilizzo Enfold.
Ciao Giovanni,
tutte le impostazioni che hai a disposizione le trovi all’interno delle opzioni del tema.
Per esempio la dimensione della sidebar rispetto ai contenuti è Enfold > Layout Generale > Tab Dimensioni.
Abituati sia per i temi che per i plugin nello sfogliare tutte le impostazioni perché molte volte scopri delle possibilità che ti aiutano a personalizzare maggiormente il tuo sito.
Buona giornata
ho fatto la stessa procedura che hai fatto tu in questo video ma quando creo il menù e lo salvo non vedo nella schermata di sinistra i 3 check box, o meglio sotto pagine dice nessun elemento dove sbaglio ?
Ciao Dante,
potresti mandarmi uno screenshot di quello che vedi? Perché così non riesco a capire.
Grazie
Ho creato pagine ed articoli e un menu… ma non riesco dal menù a raggiungere il link alle pagine p agli articoli… cosa sto sbagliando? Non compare neanche la manina con il dito che indica, l’unica voce del menù dove passando compare manina cliccando si apre pagina con scritta oops …collegamento non trovato riprovare.
Cosa sto sbagliando? Aiuto….
Ciao Luisa,
cerchiamo di ricapitolare tutti i passaggi che servono per realizzare un menu.
Per prima cosa devi creare un menu assegnandogli un nome e poi selezionare in Impostazioni del menu il checkbox sotto per stabilire che quello sarà il tuo menu principale.
Dopo averlo salvato dovresti avere una schermata vuota con i checkbox di lato (uno per ogni pagina che hai creato).
A quel punto, basta che selezioni le pagine che vuoi inserire e premi Aggiungi al menu.
Se vuoi inserire direttamente degli articoli al menu, basta che apri la tab Articoli e segui lo stesso procedimento.
Buona giornata
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
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
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?
Ciao Maurilio,
ma tu intendi i menu versione tablet mobile oppure le due etichette “richiedi un preventivo” e “richiedi un test drive”?
Nel caso intendessi i bottoni, allora ci sono diversi plugin, fra cui:
Buttonizer Multifunctional Button
Sticky Side Buttons
e Floatton, ma è a pagamento.
Buona giornata
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.
Ciao Niccolò,
quella funzione può essere disponibile con un plugin, ma molti temi hanno già integrata la possibilità di realizzarli.
Leggi questo articolo su come creare un mega-menu in WordPress che ne spiega il funzionamento.
Buona giornata
Ci sono riuscita!
Grazie mille Gianluca!
Buona giornata
Michela
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
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
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/
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
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.
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
Ti ringrazio Gianluca, ho seguito il tuo consiglio e ho modificato il logo, adesso è perfettamente leggibile.
Ti auguro una buona serata!
Si, decisamente molto meglio!
Buona serata anche a te.
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
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
Salve
Il tema Divi incorpora il megamenu?
Grazie
Luigi
Ciao Luigi,
si lo incorpora. Abbiamo scritto un articolo: Mega Menu in WordPress
Buona giornata
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
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.
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
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.
Grazie!!
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
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