Come Creare Un Menù a Tendina per il Tuo Sito Web?

menù a tendina
Scopri nel seguente articolo come creare un menù a tendina per il tuo sito web con Elementor e migliorare l'usabilità del tuo sito web.
Condividi con i tuoi amici

Tabella dei Contenuti

IMPORTANTE: Il seguente sito viene monetizzato con le affiliazioni. Cliccando sui link di colore verde e acquistando i servizi proposti, Chiara Scanavino ottiene una commissione.

Che cosa c’entra un hamburger come quello della foto di copertina di questo articolo con i siti web? Seguimi che te lo spiego.

Ma innanzitutto mi presento per chi ancora non mi conosce.

Mi chiamo Chiara Scanavino e sono una copywriter multilingue. Negli ultimi 8 anni, ovvero da quando mi sono trasferita definitivamente in Germania, mi occupo di digital marketing.

Nel blog https://cometrasferirsiingermania.com racconto della vita quotidiana in Germania e della lingua tedesca. Mentre su questo blog che stai leggendo aiuto i genitori italiani a insegnare l’educazione digitale ai figli.

Se sei interessato a questi argomenti, ti invito a seguire il mio canale YouTube, dove pubblico regolarmente dei video che accompagnano gli articoli del mio blog.

Chiara Scanavino - Linguista

Segui il mio canale YouTube e scopri i video che accompagnano il mio blog.
consigliato

Ma ora torniamo a noi…

Nel precedente articolo abbiamo detto che è importante curare la user experience del proprio blog / sito web / e-commerce.

Si, mi ricordo, Chiara… Ma dove vuoi arrivare?

Voglio continuare l’argomento. Perché c’è più di un modo per migliorare la user experience.

La scorsa volta abbiamo visto come inserire la barra di ricerca sul proprio sito web.

Ora voglio farti vedere come inserire un menù a tendina sul tuo sito web.

Ok, Chiara. Ma per favore… Niente codice HTML. Sono ancora fusə per prima…

Mi spiace, Marco. Ma comunque stai tranquillə. In questo articolo ti faccio vedere come realizzare il menù a tendina con Elementor. Quindi non vedrai una linea di codice. Va bene così?

Si, ma mantieni la tua promessa. Altrimenti mollo tutto di punto in bianco…

Ok. Stai tranquillə, Marco. Sono una persona di parola.

Speriamo…

Comunque ora partiamo…

Iniziamo a descrivere quali tipi di menù ci sono. E poi vediamo come realizzarlo con Elementor.

Va bene, Chiara. Sono prontə!

I tipi di menù

Bene, allora… Iniziamo questa guida descrivendo i tipi di menù…

Chiara, ma che è?! Siamo per caso al ristorante?!

Ah ah, che battuta… Comunque no. L’hamburger della foto è stato inserito perché questo fast food dà il nome ad un tipo di menù per i siti web.

È questo qui sotto:

back 6492344 1280

Solitamente lo trovi sui siti web se accedi dal tuo smartphone. Perché permette di distanziare meglio gli elementi di un menù a tendina tradizionale. Quindi il tuo sito risulta più facile da consultare.

Ma questo non è l’unico tipo di menù presente.

C’è anche il menù header e il menù footer. E poi puoi anche mettere il tuo menù in orizzontale o in verticale. Ma questo è un altro discorso, di cui parleremo tra poco.

Chiara, ma che cosa vogliono dire header e footer?

Header è quello che trovi in alto in un sito web.

Mentre footer è quello che trovi in fondo alla pagina.

Ah, capito. Ma… che cos’è il menù a tendina?

È un tipo di menù. Proprio come quello ad hamburger.

E come lo riconosco?

Semplice. Quando col mouse passi sopra un elemento del menù, ti viene fuori una tendina con tutte le pagine e le opzioni disponibili per quella voce.

Chiara, ma fammi un esempio concreto…

Eccolo qui sotto:

menù a tendina

Fonte: GPL, Collegamento. Ultima visualizzazione: 31.10.2022 h. 15:19.

Ah, ok. Ma… come si crea un menù a tendina per il proprio sito web?

Te lo spiego nel prossimo paragrafo, Marco. Continua a seguirmi.

Come Creare un Menù a Tendina per il Proprio Sito Web?

Per prima cosa, devi creare le pagine.

O meglio… Prima ancora di creare le pagine del tuo sito web devi avere le idee chiare in testa su quale struttura deve avere il tuo sito web.

Perché per migliorare l’esperienza dell’utente sul tuo sito web e quindi anche il posizionamento su Google, è molto meglio se parti dal generale e vai verso il particolare.

Quindi devi definire qual è la gerarchia delle pagine all’interno del tuo sito web.

Chiara, mi faresti un esempio concreto?

Io su questo sito ho creato la sezione “guide”, all’interno della quale si trovano le guide di marketing, di informatica e di psicologia.

È più chiaro ora?

Si, tutto bene. Andiamo pure avanti…

Bene. Allora crea le pagine che desideri inserire.

Fatto. E poi?

Poi vai nel backend del tuo sito web WordPress.

Vai sulla voce “aspetto” e clicca su menù.

Ok, Chiara. Mettimi una foto, per favore…

Va bene. Eccotela qui, Marco.

aspetto > menù

Sia chiaro per chi ci legge… Se vai su “aspetto” > “menù”, WordPress ti apre le impostazioni dell’ultimo menù che hai modificato.

Io qui l’ultima volta che ho avuto accesso a questa sezione del mio sito ho modificato il menù footer. E quindi ora, 31.10.2022 h. 15:39, quando sono tornata nella sezione “aspetto” > “menù”, WordPress mi ha aperto direttamente le impostazioni del menù footer.

Ok, Chiara. Ma… non avevi detto che facevi vedere come creare il menù a tendina con Elementor?

Si, certo, Marco.

E allora perché mi dici di impostare il menù da WordPress?

Perché anche se crei il menù con Elementor, la gerarchia delle pagine devi impostarla da WordPress.

E come faccio?

Come puoi vedere dall’immagine qui sopra, nella parte più a sinistra trovi la sezione “aggiungi voci del menù”. Lì c’è l’elenco di tutte le pagine che hai creato. Quindi quello che devi fare è trascinare la pagina che desideri all’interno del menù. E per creare le sottopagine devi spostare più in dentro la pagina figlia…

Non ci ho capito niente. Mi stai mandando in pallone, Chiara…

Guarda qui:

come stabilire la gerarchia delle pagine all'interno di un menù a tendina di wordpress

Ah, ok. Ora mi è più chiaro.

Quindi ricapitolando devo:

  1. creare le pagine;
  2. accedere alla pagina “aspetto” > “menù”;
  3. creare il menù header e footer;
  4. salvare le impostazioni.

È corretto, Chiara?

Corretto, Marco.

Bene. Sono contentə di aver capito bene.

Ora però mi spieghi come fare un menù a tendina come quello che hai messo tu, Chiara?

Te lo faccio vedere nel prossimo paragrafo.

Stay tuned.

Come Personalizzare il Menù a Tendina del Tuo Sito Web con Elementor Pro

Ora che hai creato la gerarchia delle pagine dentro WordPress hai bisogno di inserire il menù all’interno del tuo sito web.

Quindi quello che devi fare è:

  1. creare o entrare nella pagina / articolo di WordPress in cui vuoi inserire il tuo menù di navigazione;
  2. inserire il menù di navigazione tramite apposito widget;
  3. salvare le impostazioni.

Ok, ma qual è il widget per il menù di navigazione?

Questo qui sotto:

come personalizzare il menù a tendina con Elementor Pro

Ah, ok. Grazie. Ma poi come lo imposto? Scusa ma il video che hai messo è tutto in inglese…

Eh, hai ragione, Marco. Vedo di fare un video mio in cui ti faccio vedere le impostazioni in italiano.

Comunque… Di default Elementor ti mette il menù orizzontale. Quindi se vuoi cambiare il tipo di menù, devi andare nelle impostazioni del widget “menù di navigazione”. E lì imposti:

  1. il menù che vuoi mostrare (se vuoi, puoi mostrare anche il menù che hai impostato per il footer come menù principale e viceversa);
  2. il tipo di menù (verticale, orizzontale, dropdown / hamburger);
  3. lo stile che deve avere il menù.

E poi, una volta che hai terminato tutte le impostazioni, clicchi su salva. E il tuo menù a tendina è pronto per l’uso.

Conclusione

Bene, allora, Marco… Nel seguente articolo abbiamo visto come inserire il menù di navigazione nel tuo sito web e come personalizzarlo con Elementor.

Se ti è piaciuto questo articolo, non esitare a condividerlo con i tuoi amici. L’unione fa la forza.

Buona giornata

Chiara Scanavino – In viaggio verso te stessa

Articoli correlati

Cerca
Potrebbe interessarti anche...
Chi sono