Menu di navigazione Elementor: crea un menu straordinario per il tuo sito Web WordPress

Stai cercando un modo per creare un menu straordinario per migliorare l'interfaccia utente/UX del tuo sito web? Se è così, allora sei nel posto giusto. Qui abbiamo messo insieme una guida dettagliata per aiutarti.

Innanzitutto, ti mostriamo una procedura dettagliata su come creare un menu per il tuo sito Web WordPress. E una volta capito, ti guideremo su come utilizzare il widget del menu di navigazione di Elementor per personalizzare e potenziare il tuo menu WordPress.

Sommario:

• Perché hai bisogno di un menu di navigazione personalizzato?
• Crea un menu WordPress di base utilizzando Elementor
• 1. Crea un menu semplice per il tuo sito Web WordPress
• 2. Scegli e personalizza le voci del menu di navigazione
• 3. Crea sottomenu: voci del menu principale e secondario (facoltativo)
• 4. Gestisci la posizione del tuo menu e pubblica
• Come creare un menu di navigazione utilizzando il widget Elementor pro nav
• Funzionalità principali del widget Menu di navigazione Elementor
• Crea un menu con il widget nav-menu pro
• Menu reattivo per dispositivi mobili
• Concludendo

Perché hai bisogno di un menu di navigazione personalizzato?

È fondamentale sapere che i menu di navigazione sono importanti non solo per portare traffico al tuo sito ma anche per un migliore posizionamento SEO.

In effetti, i menu di navigazione sono progettati principalmente per il coinvolgimento dell’utente, ma questo non è l’unico scopo.

Il secondo fattore più importante è tenere in considerazione il ruolo dei “WebCrawler” o bot progettati per eseguire la scansione dei siti Web e indicizzare il contenuto al livello pertinente e riferirlo al motore di ricerca per classificare il contenuto nel posto giusto.

Pertanto, se stai creando menu troppo complicati, sarebbe difficile per i bot classificare i tuoi contenuti, ma perderai anche i tuoi visitatori.

In breve, la “facilità di navigazione” contribuisce in modo fondamentale a migliorare l’esperienza dell’utente e svolge un ruolo fondamentale nel migliorare il posizionamento del nostro sito e aumentare il traffico.

È un ottimo motivo per cui molti siti Web aziendali mantengono un'unica icona di navigazione anziché una complessa barra dei menu, che si carica fino a un menu a schermo intero quando viene cliccata.

Grazie al widget Elementor Pro con un menu di navigazione reattivo al 100%, puoi creare una barra dei menu perfetta per i pixel e incredibilmente flessibile senza utilizzare alcun codice.

In questo tutorial, ti mostreremo come utilizzare il widget del menu di navigazione Elementor per ottenere il menu WordPress personalizzato e avanzato.

Prima di iniziare con il widget di navigazione di Elementor, esploriamo come creare un semplice menu WordPress utilizzando la versione gratuita di Elementor.

Crea un menu WordPress di base utilizzando Elementor

Ora, per creare un menu WordPress, non è necessario installare alcun plugin speciale. Per impostazione predefinita, WordPress viene fornito con un generatore di menu facile da usare, che ti aiuterà a creare semplici menu di navigazione per il tuo sito web.

Detto questo, non avrai accesso ad alcuna opzione di personalizzazione del menu. Assumerà il design del tema WordPress attualmente attivo. Ma se questo è tutto ciò che desideri, allora questo è un ottimo modo per impostare un menu di navigazione per il tuo sito Web WordPress.

1. Crea un menu semplice per il tuo sito Web WordPress

Per prima cosa, dovrai accedere alla dashboard del backend di WordPress.

Ora, dalla barra laterale di sinistra, vai su Aspetto > Menu . Qui troverai un layout a due colonne con "Aggiungi voci di menu" a sinistra e "Struttura del menu" a destra.

Sotto Struttura del menu, troverai un campo per il "Nome del menu". Questo sarà il nome del menu che creeremo in questo momento. Chiamiamolo Menu 1.

Nota : non preoccuparti. I tuoi lettori non saranno in grado di vedere i nomi dei menu. È una funzionalità che ti aiuta a mantenere organizzati tutti i tuoi diversi menu.

Dopo aver dato un nome al tuo menu, fai clic sul pulsante "Crea menu" per renderlo disponibile. Ora devi aggiungere le diverse voci di menu.

2. Scegli e personalizza le voci del menu di navigazione

Ora arriva la parte in cui compili il tuo nuovo menu con le voci di menu. Nella sezione "Aggiungi voci di menu" sul lato sinistro, troverai un elenco organizzato di cose che puoi aggiungere al tuo menu.

Per impostazione predefinita, contiene tutte le tue pagine, post, pagine di destinazione, collegamenti personalizzati e categorie.

seleziona semplicemente le voci di menu che desideri aggiungere utilizzando la casella di controllo, quindi fai clic sul pulsante "Aggiungi al menu". Questo popolerà il tuo menu con tutte le voci di menu selezionate.

Nota : notare che ciascuna sezione sotto "Aggiungi voci di menu" ha la possibilità di alternare tra: Più recente , Visualizza tutto e Cerca . Ricorda di utilizzare queste opzioni se hai molti articoli.

Una volta che hai finito di aggiungere tutte le voci di menu, premi il pulsante "Salva menu" e vai al passaggio successivo.

3. Crea sottomenu: voci del menu principale e secondario (facoltativo)

Sapevi che per impostazione predefinita WordPress ti consente anche di creare sottomenu? Quando crei la struttura del sottomenu, hai una voce di menu principale e una voce di menu figlio.

Quando un utente passa il mouse sopra la voce del menu principale, rivelerà tutte le voci del menu figlio nascoste sotto di essa.

Fantastico, vero?

Ora per creare una struttura di sottomenu, tutto ciò che devi fare è scegliere una voce di menu che desideri sia nel menu principale. Successivamente, trascina e rilascia sotto di esso tutte le voci di menu che desideri come voci di menu figlio. Ora basta trascinarlo verso destra e il gioco è fatto!

4. Gestisci la posizione del tuo menu e pubblica

Ora che hai creato il tuo nuovo menu e aggiunto i sottomenu, è il momento di gestirne la posizione.

Nella parte superiore dell'editor di menu, dovresti notare un'opzione chiamata "Gestisci posizioni". Cliccandoci sopra dovrebbe apparire qualcosa di simile alla seguente schermata:

Ora, le posizioni dei menu disponibili dipenderanno dal tema che hai installato. In questo amp abbiamo un tema che supporta 3 menu.

Dopo aver assegnato un menu a ciascuna delle posizioni di menu disponibili, fare clic su "Salva modifiche" e il gioco è fatto.

Ora conosci tutte le funzionalità del menu di base offerte da WordPress per impostazione predefinita. Tuttavia, se desideri maggiore personalizzazione e funzionalità, continua a leggere per conoscere il widget del menu Elementor Pro Nav.

Come creare un menu di navigazione utilizzando il widget Elementor pro nav

Se desideri aggiungere un menu di navigazione personalizzato al tuo sito WordPress, avrai bisogno della versione Elementor Pro. La versione Elementor Pro include il widget di navigazione Elementor insieme a molte altre funzionalità speciali come oltre 300 modelli, un generatore di temi, un widget popup, widget WooCommerce e molte altre funzionalità interessanti.

Quali sono le caratteristiche chiave specifiche del widget Menu di navigazione stesso? Ecco una breve introduzione.

Funzionalità principali del widget Menu di navigazione Elementor

• Il widget del menu di navigazione ti dà la libertà di posizionare il tuo menu dove preferisci. Nell'intestazione, in alto o in qualsiasi punto della pagina.
• Puoi aggiungere più menu sul tuo sito e anche sulle tue pagine separatamente o globalmente.
• Dai un aspetto abbagliante al tuo menu utilizzando l'animazione, gli effetti al passaggio del mouse o lo stato attivo
• Crea un menu reattivo per dispositivi mobili del tuo sito e controlla come apparirà il tuo sito sugli schermi dei dispositivi mobili
• Personalizza il colore, la tipografia e la spaziatura o altre regolazioni della barra dei menu
• Crea un menu perfetto al pixel con la giusta precisione di allineamento, spaziatura e riempimento.

Crea un menu con il widget nav-menu pro

Dovrai creare un menu WordPress di base come accennato in precedenza e quindi personalizzare il menu WordPress predefinito utilizzando il widget pro-nav-menu. Una volta creato l'elenco principale, il passaggio successivo è aggiungerlo alla posizione desiderata, ovvero alla sezione Intestazione.

Ora, quando hai finito con le impostazioni di base, personalizziamo il menu utilizzando il widget del menu di navigazione.

Nell'angolo più in alto della sezione delle impostazioni sono disponibili tre opzioni; Contenuti, stile e avanzati.

La sezione Layout : hai tre opzioni Orizzontale, verticale o una fisarmonica a discesa nascosta.

• Orizzontale: il layout orizzontale è il layout più comune utilizzato dai siti. Si diffonde sullo schermo dalla direzione da sinistra a destra.
• Verticale: troverai anche un layout verticale su molti siti, in particolare su siti che offrono servizi creativi. Nel caso di layout verticale, l'espansione della barra di navigazione sarà dall'alto verso il basso.
• Menu a discesa: anche i menu a discesa sono piuttosto comuni. I menu a discesa hanno un layout verticale e richiedono l'interazione con l'utente per essere visualizzati. Sono utilizzati principalmente per creare un design pulito.

Sezione Allinea : questa sezione ti aiuta ad allineare le voci di testo del menu; centro, destra o sinistra.

Sezione Animazione : questa sezione ti consentirà di aggiungere effetti di animazione sotto, sopra o effetti di animazione a doppia linea. Puoi anche scegliere la cornice, lo sfondo e le animazioni di testo sottili.

Le animazioni di sottolineatura sono le seguenti:

• Dissolvenza: l'animazione di dissolvenza offre un'animazione di dissolvenza sotto le voci di menu.
• Diapositiva: l'animazione della diapositiva fa scorrere la barra sotto le voci del menu.
• Crescita : l'animazione della crescita cresce dal centro verso l'esterno e dà una sensazione di crescita.
• Drop in : l'animazione Drop in scorre dal basso verso l'alto.
• Elimina: l'animazione dell'esclusione scorre dall'alto verso il basso.

Allo stesso modo, ci sono animazioni incorniciate, sopralineate, a doppia linea, di sfondo e di testo. Ognuno di essi offre il proprio set di animazioni e puoi verificarle tu stesso per scoprire cosa ottieni con loro.

Sezione Puntatore : seleziona il tipo di puntatore dal menù a tendina.

Sezione indicatore del sottomenu : il widget Elementor è ricco di molte opzioni di stile dei sottomenu. Dove non solo puoi controllare il colore, lo stile e anche lo sfondo del menu.

Imbottitura e spaziatura dei menu: l'imbottitura può essere regolata rapidamente. È possibile modificare il riempimento orizzontale per menu e sottomenu, il riempimento verticale, lo spazio intermedio e anche l'allineamento destro, sinistro e centrato.

Elementor si avvicina molto bene alla spaziatura e al riempimento dei menu. Hanno lavorato duramente dietro le porte per assicurarsi di poter portare gli strumenti allo sviluppatore in modo che possano creare facilmente il progetto a cui stanno pensando.

La spaziatura del menu offre molte opzioni tra cui:

• Spazio tra le voci del menu
• Imbottitura orizzontale e verticale per gli elementi di menu e sottomenu
• Allineamento centrale, sinistro, destro e giustificato.

Colore di sfondo e tipografia : puoi ottenere il tuo look personalizzato con l'aiuto della combinazione di colori e del colore di sfondo desiderati. Inoltre, puoi anche scegliere le opzioni del menu trasparente o semitrasparente.

Come designer, puoi giocare con queste opzioni il più possibile e assicurarti di progettare gli sfondi secondo i tuoi gusti.

Menu reattivo per dispositivi mobili

Il mobile è una parte importante del Web ed è per questo che gli sviluppatori di Elementor forniscono anche strumenti per poter creare la barra di navigazione anche per i dispositivi mobili.

Il widget Elementor ti consente il controllo completo delle opzioni del menu mobile su WordPress. Puoi controllare la visualizzazione dello schermo mobile con un set separato di impostazioni per gli schermi solo mobili. C'è un'opzione per le impostazioni dello schermo mobile nella parte inferiore della sezione delle impostazioni di Elementor in cui puoi visualizzare le opzioni dello schermo mobile.

In breve, le funzionalità del menu mobile di Elementor sono le seguenti:

• Larghezza intera su dispositivi mobili: hai la possibilità di impostare anche la larghezza intera o quella limitata.
• Punti di interruzione per tablet o dispositivi mobili: è possibile utilizzare le impostazioni dei punti di interruzione per impostare il menu mobile per dispositivi mobili o tablet.
• Menu verticali e a fisarmonica: Elementor offre anche la possibilità di visualizzare un'icona ad hamburger pieghevole.
• Alterna allineamento: l'icona dell'hamburger può essere allineata al centro, a sinistra o a destra.
• Allineamento laterale/centrale: scegli l'allineamento del menu mobile.

Navigazione reattiva: offre un posizionamento reattivo del menu.

Concludendo

Il menu è una delle caratteristiche più significative di qualsiasi sito web. Perché aiuta i visitatori a navigare nel tuo sito web e se creassi un elenco in modo intelligente aiuterebbe a mantenere i tuoi visitatori sul tuo sito per molto tempo. Il menu è altrettanto importante quanto quello dell'intero layout di qualsiasi sito Web, dell'intestazione e della sezione del piè di pagina.

Pertanto, il widget del menu deve essere in grado di fornire l'aspetto unico del tuo marchio con tutte le funzionalità essenziali. Il widget di navigazione Elementor è dotato di funzionalità ricche di funzionalità che consentono ai clienti di personalizzare la sezione del menu per adattarla alla voce del tuo marchio. Ora puoi utilizzare un menu elegante personalizzato su misura nel tuo sito web, nella pagina di destinazione, nell'intestazione o in qualsiasi altra sezione in cui desideri visualizzarlo.