Vuole offrire ai futuri visitatori del suo sito web un menu di navigazione perfetto? Congratulazioni! È nel posto giusto, perché le offrirò tutti i consigli, gli strumenti e i passi da seguire per ottenere il risultato giusto per le sue esigenze. In effetti, il menu di un sito web è un elemento molto importante per i visitatori e contribuisce a una buona esperienza dell’utente. E per una buona ragione, il menu le permette di avere una visione globale e di tutte le sezioni del sito web. Si tratta quindi di un elemento che permette agli utenti di Internet di determinare se continueranno o meno la loro visita. Dovete quindi offrire un menu impeccabile. Per consentirle di farlo, ho aggiunto un video a questo articolo che le mostra visivamente i passaggi descritti qui.
Creare un menu in WordPress
Contenuti
In questo video
le mostro come creare un menu in WordPress utilizzando il tema Avada:Il menu: uno strumento essenziale per la navigazione
Il menu di un sito web o la barra di navigazione è l’elemento che consente di navigare facilmente tra le pagine di un sito web, anche se molto denso. Se dà un’occhiata alla parte superiore di questo articolo, vedrà i seguenti titoli:
- TWAINO: Questa pagina la reindirizza automaticamente alla home page;
- AGENZIA SEO : Presentazione della mia agenzia SEO Twaino ;
- SERVIZI : Questa pagina presenta i miei diversi servizi;
- FORMAZIONI: in questa sezione, mostro ai visitatori le formazioni che offro;
- BLOG: Questa pagina contiene tutti i miei articoli e video;
- AUDIT GRATUITO: questo la conduce a un modulo.
Come può vedere, un semplice clic su una di queste sezioni la porterà automaticamente alla relativa pagina, quindi si tratta di una navigazione semplice ed efficiente che i visitatori apprezzeranno. Questo è esattamente il ruolo principale del menu o della barra di navigazione di un sito web.
Qual è il posto migliore per posizionare il suo menu?
Sempre collocato nello stesso punto da una pagina all’altra, il menu di navigazione è generalmente collocato in due punti:
- In orizzontale, nella parte superiore della pagina;
- In verticale sulla sinistra della pagina.
Questa disposizione le dà il privilegio di essere sempre visibile e di essere rapidamente accessibile indipendentemente dalle dimensioni della finestra del browser. Si può quindi affermare che la localizzazione del menu in questo modo è diventata la norma e facilita il percorso dell’utente.
Si noti, tuttavia, che il menu può anche essere disposto verticalmente sulla destra. Ma le consiglio vivamente di non scegliere questa opzione, in quanto gli utenti si sono già abituati ai due layout precedenti, soprattutto al primo. Mostrare originalità non sarà necessariamente una cosa positiva, in quanto non farà altro che confonderli e farli scappare.
D’altra parte, a volte è utile inserire aree di navigazione indipendenti dal menu di navigazione principale. Infatti, queste aree possono essere specifiche per determinate pagine e offrire agli utenti elementi aggiuntivi per approfondire la navigazione. Ad esempio, si tratta di opzioni per affinare i criteri di acquisto su un sito di e-commerce con, ad esempio, la presenza di filtri: taglia, prezzo, colore, sesso e molti altri.
Le migliori pratiche per un menu di navigazione perfetto
Pensi alla struttura del suo sito in anticipo
Prima di passare alla creazione del mio menu, ho avuto l’opportunità di progettare il layout del mio sito web Twaino.com. Le consiglio di fare lo stesso, per diverse ragioni che ho menzionato nel mio articolo articolo sull’argomento, che include anche il processo da seguire per progettare con successo il suo sito web.
Questa fase le consente di creare la struttura ad albero del suo sito web e di identificare le diverse voci che avrà nel suo menu di navigazione.
Scegliere la posizione più appropriata
Può scegliere tra i tre layout che ho menzionato sopra:
- Menu orizzontale ;
- Menu verticale a sinistra;
- Destra verticale.
Può fare delle combinazioni, ma cerchi di evitare la ridondanza per ottimizzare l’esperienza dell’utente.
Limitare il numero di link
In un menu di navigazione, può aggiungere tutte le intestazioni che desidera. Ma le suggerisco di non superare le 7 sezioni diverse. In effetti, un numero eccessivo di intestazioni porterà a una minore leggibilità e potrà aumentare la confusione dell’utente che fuggirà dal suo sito web.
Invece, pensi a creare dei sottomenu e a utilizzare il footer per integrare alcune pagine statiche come “Chi siamo”, “Note legali”, ecc. Inoltre, si assicuri che il suo menu non contenga alcuna ridondanza, come ad esempio mettere la sezione “Home” quando il suo logo può essere cliccato e riportato a questa pagina.
Scegliere nomi espliciti
Un altro elemento molto importante è la scelta dei nomi per le sue sezioni e deve assicurarsi che siano espliciti. Deve assicurarsi che il visitatore del suo sito web sappia immediatamente cosa troverà nella pagina e una parola è solitamente sufficiente. Per esempio, invece di scegliere “Il blog di ….”, scelga “blog” o “i nostri noleggi” invece di “i nostri noleggi di mobili …..”.
Inoltre, scelga dei nomi che siano davvero significativi per la sua attività. Ad esempio, se inserisco solo “Servizi”, i visitatori non sapranno a prima vista che offro servizi SEO e di formazione.
Ordinare bene i link del menu
Un altro aspetto molto importante è l’ordine di visualizzazione dei link nel suo menu di navigazione. Le suggerisco di mettere al primo posto le pagine più importanti o il cuore della sua attività. È consuetudine collocare le pagine “Trovaci” o “Contattaci” alla fine e gli utenti si sono già abituati a questo layout.
Rimanga coerente con le diverse pagine del suo sito
È possibile avere dei menu in alcune pagine che differiscono in termini di layout e ordine.
Ma le consiglio di mantenere il menu principale e di aggiungere un menu secondario specifico per alcune pagine, se necessario. In questo modo, creerà un sito coerente e renderà più facile per le persone seguirla.
Creare il proprio menu su WordPress: i passi da seguire con il tema Avada
Utilizzerò il modello che ho creato con Adobe Illustrator per creare il menu del mio sito web Twaino.com. Infatti, questo mock-up mi permette di avere un’idea precisa del risultato atteso e di conseguenza di sapere come procedere esattamente.
Inoltre, tenga presente che utilizzerò il tema “Avada” che ho installato e che l’intero processo si basa su di esso. A seconda del tema che possiede, probabilmente non avrà esattamente le stesse interfacce che ho io. Tuttavia, può adattare il processo al suo tema personale.
È importante notare che ci sono due fasi principali nella creazione del menu di navigazione:
- Aggiungere il suo logo;
- La creazione dei titoli del suo menu di navigazione e il suo design.
Innanzitutto, le mostrerò come aggiungere il suo logo alla barra di navigazione. In secondo luogo, le mostrerò come configurare e progettare le sezioni del suo menu di navigazione.
Andiamo allora!
Acceda all’account “Admin” del suo sito
Prima di iniziare una delle due fasi principali, deve innanzitutto accedere all’account di amministrazione del suo sito web per accedere alla dashboard di WordPress. Per farlo, basta aggiungere “…./wp-admin” all’URL del suo sito web. Quindi compili le caselle con le sue credenziali e invii.
Aggiungere il suo logo al menu di navigazione: i passi da seguire
Per il mio tema demo “Avada SEO”, c’è già un logo di default. Quindi, quello che farò è cambiare questo logo e mettere il mio al suo posto.
1) Vada alle opzioni del suo tema
Sulla mia dashboard, vado su “Avada”, che è il mio tema, e nel menu che appare, scelgo “Opzioni tema” che mi offre uno spazio di configurazione con diverse voci.
2) Scelga il tipo di logo da modificare
In questa nuova pagina, clicchi sull’opzione “Logo” nella seconda barra laterale sinistra. Avrà poi due sottosezioni che comprendono :
- Logo: questo è il logo classico del menu di navigazione;
- Favicon: è la piccola icona che viene visualizzata sulle schede del browser. Questo permette all’utente di identificare la scheda del suo sito web, anche se si trova su un altro sito.
3) Cambiare il logo predefinito e le sue variazioni
3-1) Cambiare il “Logo predefinito
Per modificare il logo predefinito, clicchi sulla sottosezione “Logo” e scorra fino all’opzione “Logo predefinito”. Lì, clicchi sul pulsante “Carica” per caricare invece il suo logo.
Vorrei sottolineare che nell’interfaccia che appare, può vedere direttamente le dimensioni del logo attuale per avere un’idea precisa delle dimensioni di cui il suo logo ha bisogno per riempire correttamente lo spazio che occupa.
Per farlo, guardi i suoi dettagli che sono mostrati nella barra laterale destra
Al mio livello, ho 165 x 41 pixel e se ha progettato lei stesso il suo logo, può facilmente modificarne le dimensioni, come farò con Adobe Illustrator nel video
Se non l’ha disegnato lei, dia le dimensioni al suo grafico perché lo faccia.
Nel caso in cui il suo logo sia già pronto, prema la finestra “Carica file” che le permette di andare direttamente al suo computer per ottenere il logo. Ha due possibilità:
- Trascini il file del logo direttamente sulla pagina;
- Clicchi sul pulsante “Seleziona file” per recuperare manualmente il logo dalle sue cartelle.
Scelgo la seconda opzione e il mio logo viene caricato nella “Libreria multimediale” del mio sito web. Qui ha la possibilità di dare un nome al suo logo, cosa che faccio indicando “Twaino-logo 1x”, quindi premo il pulsante blu in basso “Seleziona”.
Il mio logo prende il posto del logo predefinito.
3-2) Modificare le altre varianti del logo predefinito
3-2-1) Logo Retina predefinito
Vada quindi al livello “Logo predefinito Retina” e clicchi su “Carica” per modificarlo. Procedo allo stesso modo di prima, prendendo le dimensioni esatte per adattare il mio logo. Lo carico nella “Libreria multimediale”, lo nomino “Twaino-logo 2x” e lo seleziono.
Lo salvo prima per vedere se le modifiche sono state prese in considerazione. Per farlo, devo andare alla homepage del mio sito web e naturalmente a un’altra scheda.
Per farlo, basta andare nell’angolo in alto a sinistra e cliccare sull’icona della casa seguita dal nome del tema demo “Avada SEO”. Quindi prema “Vai al sito”, che la porterà direttamente alla pagina iniziale in un’altra scheda del browser.
Vedo che il logo predefinito è stato sostituito dal mio logo.
3-2-2) Logo di intestazione adesivo
Continuo le modifiche con questa volta “Sticky Header Logo”. Infatti, un’intestazione appiccicosa è un menu che rimarrà “fisso” nella parte superiore della sua pagina, e questo anche quando si scende durante la navigazione/lettura.
A questo livello, ho due opzioni, tra cui “Logo intestazione appiccicoso” e “Logo intestazione appiccicoso Retina”. Si noti che gli adesivi sono elementi molto interessanti in un sito web e saranno oggetto di un altro articolo.
Procedo allo stesso modo di prima per sostituire questi loghi in modo predefinito. Solo che questa volta devo solo selezionare i loghi corrispondenti nella “Libreria multimediale”. Provi a selezionare il logo scelto da “Logo predefinito” per “Logo intestazione appiccicosa” e “Logo predefinito Retina” per “Logo intestazione appiccicosa Retina”.
3-2-3) Logo mobile
Appena sotto “Logo intestazione appiccicosa”, c’è “Logo mobile” e deve anche modificare i loghi predefiniti che include.
Proceda esattamente come nel passo precedente e faccia attenzione a scegliere lo stesso logo da “Logo predefinito” per “Logo mobile” e il logo da “Logo predefinito Retina” per “Logo mobile Retina” Poi salvi cliccando sul pulsante blu “Salva” in basso.
4) Cambiare il Flavicon
Poi clicchi sulla sottosezione “Flavicon” del menu “Logo” per modificare la Flavicon del suo sito web. Un Flavicon è una piccola immagine che si trova nella barra del browser di ricerca. Si tratta di una piccola immagine che aiuterà gli utenti di Internet a identificare molto facilmente il suo sito web in un browser.
Nella pagina che si apre, vedrà tre diverse opzioni con le dimensioni appropriate per ciascuna. Questi sono :
- Flavicon: una dimensione di 16px x 16px o 32px x 32px ;
- Icona Apple iPhone Carica: 57 px x 57 px ;
- Icona Apple iPad Carica: 72 px x 72 px ;
Quindi procederà a modificare le dimensioni del suo logo per avere questi tre diversi formati. Nel mio caso, lo faccio rapidamente con Adobe Illustrator.
Poi, deve solo cliccare su ciascun pulsante “Carica” per caricare il logo corrispondente a ciascuna opzione.
Man mano che aggiunge questi loghi, vedrà che vengono aggiunte altre opzioni. Deve solo modificare nuovamente il suo logo per caricare anche loro. Le consiglio di fare tutto in una volta, in modo da non lasciare nulla che possa crearle problemi in seguito.
Dopo aver caricato tutti i loghi, clicchi sul pulsante blu “Salva modifiche” in basso per salvare le modifiche. Se va sulla homepage del suo sito web, vedrà che il suo logo appare nella scheda del browser.
Il mio logo appare nel browser e poiché tutto sembra essere perfetto, passo alla creazione delle voci del mio menu di navigazione.
Creare le voci del menu di navigazione: i passi da seguire
Esistono due modi diversi per creare il menu di navigazione:
- Dalla pagina iniziale;
- Dal tema “Avada”.
Il primo è in realtà una navigazione predefinita proposta da WordPress e personalmente non utilizzo necessariamente questo metodo, ma trovo interessante presentarglielo.
Dalla pagina iniziale
Sempre accedendo al suo account di amministratore, andrà alla pagina iniziale.
Quindi clicchi sul pulsante “Personalizza” seguito da un pennello, che si trova in alto a sinistra dell’icona di aggiornamento.
Nell’interfaccia che appare, faccia clic sulla sezione “Menu” nella barra laterale sinistra.
Poi clicco sul nome del menu “Menu principale SEO” nella mia situazione.
Si apre un’interfaccia con tutte le categorie del menu di navigazione predefinito. Cliccando su “+ Aggiungi articoli” può aggiungere altre categorie a quelle esistenti. Può anche riorganizzarli cliccando su “Riordina”.
Configurazione del menu di navigazione con Avada
Questo metodo le permette di configurare il suo menu di navigazione in modo molto più preciso. Questo è il motivo principale per cui personalmente lo preferisco a quello precedente. Si noti che qui distinguo due fasi principali, tra cui :
- La creazione del menu (con il testo);
- Il design del menu.
1) La creazione del menu (con il testo)
Questo passaggio le consente di creare le diverse intestazioni che desidera avere nel suo menu di navigazione.
1-1) Vada alla pagina di configurazione del menu
Ci sono due modi per accedere alla pagina di configurazione del menu:
-Dalla pagina iniziale, clicchi sulla finestra “Avada SEO” e nel menu che appare, selezioni “Menu”;
-Nella Dashboard, clicchi sulla sezione “Aspetto” e poi sull’opzione “Menu”.
1-2) Creare un nuovo menu principale
Nell’interfaccia di configurazione, clicchi su “Crea un nuovo menu”, che si trova in fondo alla finestra “Modifica menu”. Quindi inserisca il nome del menu che desidera aggiungere e prema il pulsante blu “Crea menu” sulla destra. Per il mio sito web, sto creando il menu “Twaino”.
Ora può configurare il suo nuovo menu e sono disponibili diverse opzioni:
- Navigazione principale: le permette di creare il suo menu principale;
- Navigazione superiore: consente di farla apparire sulla barra che si trova appena sopra la barra del menu di navigazione
- Navigazione mobile: consente di creare menu specifici per la navigazione mobile;
- pagine utili 404: Per le pagine di errore 404;
- Navigazione appiccicata all’intestazione: le permette di integrarla nel menu che appare quando si scorre il sito.
Nel mio caso, seleziono la prima opzione e l’ultima per il mio menu “Twaino”.
1-3) Poi crea i menu
Dopo aver creato il menu principale, può creare i menu che appariranno sulla barra di navigazione.
Ci sono diverse opzioni per aggiungere voci al menu:
- Aggiungere una pagina recente : In questa sezione potrà scegliere la pagina che desidera integrare nel suo menu;
- Aggiungere un articolo: WordPress le offre la possibilità di aggiungere un articolo nel suo menu con questa opzione;
- Aggiungere un link personalizzato: se desidera inviare i suoi visitatori ad una pagina particolare del suo sito o ad un sito esterno, può utilizzare questa opzione aggiungendo l’URL di sua scelta;
- Aggiungere una categoria: per navigare in un sito, può essere interessante aggiungere una categoria nel menu.
Nel mio caso, poiché il mio sito web è stato appena creato, non ho necessariamente le pagine e gli articoli esistenti. Pertanto, per mostrarle come procedere, aggiungerò dei “link personalizzati”. Naturalmente, una volta che tutte le mie pagine saranno costruite correttamente, avrò la possibilità di modificare il mio menu per renderlo perfettamente pulito.
Ai fini del mio video e di questo tutorial, farò clic su “Collegamenti personalizzati”, che si trova appena sotto la voce “Articoli” nella barra laterale, a sinistra, e ha “Aggiungi voci di menu” in alto.
Si assicuri di inserire prima il link del suo sito web nella sezione “Indirizzo web”. Non dimentichi di aggiungere la “s” a “http” se è già passato a HTTPS.
Nella sezione “Testo del collegamento”, inserisca i nomi dei menu che desidera. Al mio livello, inserisco ” https://twaino.com “e successivamente i seguenti nomi:
- AGENZIA SEO ;
- SERVIZI ;
- FORMAZIONE
- BLOG ;
- AUDIT GRATUITO.
Poi clicchi sul pulsante blu “Salva menu” in fondo alla pagina per avere una prima visione
Se va sulla home page del suo sito web, noterà che i menu sono effettivamente apparsi, come ho fatto io sulla home page del mio sito. Il passo successivo consiste nel modificare l’attuale design del menu per ottenere il risultato desiderato
2) Il design del suo menu
Per avere il design desiderato per il suo menu, si rechi nelle opzioni del suo tema.
Per farlo, vada su “Avada” nella barra laterale sinistra della sua dashboard e clicchi su “Opzioni del tema” e poi su “Menu”
Nell’interfaccia che appare, ha a disposizione tutte le opzioni per “progettare” il suo menu.
2-1) Cambiare il colore del testo del menu
Clicchi prima su “Menu principale” e poi scorra verso il basso fino a “Menu principale Font Hover/Colore attivo”.
Prema “Seleziona un colore” e scelga il colore che desidera dare ai nomi dei menu.
Ho scelto il bianco per via del mock-up che ho realizzato in precedenza. Convalidi questa modifica cliccando sul pulsante “Salva modifiche” e vada sulla home page del suo sito web per vedere la modifica. Nel mio caso, ho tutti i nomi dei miei menu in bianco.
2-2) Metta un pulsante colorato sotto un menu
Per il mio menu “AUDIT GRATUITO”, voglio inserire un pulsante colorato sotto di esso per distinguerlo dagli altri menu. Se vuole fare anche questo, vada alla sezione “Aspetto” nella barra laterale sinistra della dashboard. Poi clicchi su ‘Menu’ e sulla barra del menu in questione, prema la freccia sul lato destro per scorrere verso il basso.
Selezioni il pulsante blu “Opzione Menu Avada” che la porterà all’interfaccia di configurazione. In “Stile del menu di primo livello” può scegliere la dimensione del pulsante. Ho scelto “Button Medium” per avere una taglia media.
Può anche aggiungere un’icona e cambiare il colore del pulsante. Per l’ultimo punto, faccia clic su “Seleziona un colore” davanti all’opzione “Colore di sfondo dell’etichetta di evidenziazione del menu”. Scelga il colore che più le aggrada, ma poiché io ho già un colore da utilizzare, copio semplicemente il suo codice e lo incollo nella parte corrispondente per avere esattamente il colore che desidero.
Dopo queste configurazioni, le convalidi premendo “Salva menu”.
Aggiornate la vostra home page e vedrete che il pulsante è effettivamente apparso
Ho il menu “AUDIT GRATUITO” su un pulsante colorato. Tuttavia, a volte il colore non corrisponde a quello che si desidera avere.
2-3) Cambiare il colore e il carattere del suo pulsante del menu
Se ha seguito i passaggi precedenti senza ottenere il colore desiderato, è possibile che ci sia un’opzione ancora attiva. Per farlo, vada nel menu Opzioni del tema del suo tema e clicchi su Elementi del costruttore di fusione e poi su Elemento pulsante
Quindi ha a disposizione diverse configurazioni per i pulsanti sul suo sito web.
Innanzitutto, cambierò il carattere del pulsante “AUDIT GRATUITO”. Per farlo, vada su “Tipografia dei pulsanti” e selezioni la “Famiglia di caratteri” che fa al caso suo. Utilizzerò “Gudea” a causa del layout del mio sito web.
Nella seconda posizione, modifico il colore del pulsante accedendo alla voce “Button Gradien” per scegliere il colore desiderato. Salvo le modifiche e c’è stato un cambiamento nel colore del pulsante e nel carattere del menu.
2-4) Selezioni lo stile del suo menu
Vada al menu “Opzioni del tema” del suo tema e clicchi su “Intestazione” e poi su “Contenuto dell’intestazione”
Ha la possibilità di scegliere tra diversi stili di menu, sta a lei fare la scelta in base a ciò che desidera
Inoltre, ci sono alcune configurazioni che può già realizzare qui.
Queste includono l’aggiunta del suo numero di telefono e della sua e-mail, accedendo alle opzioni “Numero di telefono per le informazioni di contatto” e “Indirizzo e-mail per le informazioni di contatto”.
Inoltre, alla voce “Contenuto dell’intestazione 2”, selezioni “Collegamenti sociali” se desidera, come me, inserire i link ai suoi account di social network direttamente nella parte superiore del suo sito web.
Al termine, convalidi le modifiche cliccando sul pulsante blu “Salva modifiche”.
2-5) Attivare l’intestazione adesiva
Sempre al livello “Intestazione”, faccia clic su “Intestazione appiccicosa” e prema “On”
Quindi salvi e vada alla homepage del suo sito web per vedere le modifiche apportate.
2-6) Cambiare il colore della sua intestazione
Per cambiare il colore della sua intestazione, vada in “Stile intestazione” e scorra fino a “Colore sfondo intestazione”.
Selezioni il colore che desidera e scorra verso il basso fino a Colore di sfondo superiore dell’intestazione per cambiare il colore dell’intestazione superiore, compresi i link ai social network.
Salvi le modifiche salvando.
2-7) Modifichi le dimensioni e i colori dei testi nell’intestazione superiore
Per farlo, clicchi sull’opzione “Menu superiore secondario” nella sezione “Menu” di “Opzioni tema”. Una volta nella pagina, scorra verso il basso e scelga i colori che desidera nei tre parametri:
- Colore del carattere del menu secondario ;
- Menu secondario a discesa Colore carattere ;
- Menu secondario Dropdown Font Hover Color.
Per modificare la dimensione del testo, basta andare al parametro “Dimensione carattere menu secondario”
Specifichi le dimensioni che desidera e si senta libero di sperimentare per ottenere il risultato migliore. Quindi salvi queste modifiche per ottenere un’anteprima.
Ecco fatto! Ho appena finito di creare il menu di navigazione per il mio sito web. Come può vedere, il risultato è quasi uguale a quello del mio sito web mock-up.
Conclusione
Il menu di navigazione è uno dei primi elementi da inserire quando si inizia a creare un sito web. Ma sebbene la sua creazione non sia estremamente complicata, come ha visto, rimane un elemento molto importante che non deve essere preso alla leggera. Per questo motivo, le consiglio vivamente di realizzare in anticipo un mock-up del suo sito web, che le farà risparmiare molto tempo durante questa fase. Saprà esattamente cosa vuole ottenere e non dovrà fare altro che utilizzare il processo descritto sopra per ottenere il risultato desiderato. Non abbia paura di sperimentare un po’, perché a volte opzioni diverse influiscono sulla stessa impostazione, come nel caso del colore del pulsante nel mio menu “AUDIT GRATUITO”.
