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.

Per prima cosa, 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 Menu di navigazione Elementor per personalizzare e potenziare il tuo menu WordPress.

Tabella dei contenuti:

• Perché hai bisogno di un menu di navigazione personalizzato?
• Crea un menu WordPress di base usando Elementor
• 1. Crea un semplice menu per il tuo sito Web WordPress
• 2. Scegli e personalizza le voci del menu di navigazione
• 3. Crea sottomenu - Voci di menu padre e figlio (opzionale)
• 4. Gestisci la posizione del menu e pubblica
• Come creare un menu di navigazione usando il widget di Elementor Pro Nav
• Widget del menu Nav di Elementor Caratteristiche principali
• Crea un menu con il widget nav-menu pro
• Menu reattivo mobile
• Avvolgendo

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 migliorare il posizionamento SEO.

In effetti, i menu di navigazione sono progettati principalmente per il coinvolgimento degli utenti, ma questo non è l'unico scopo.

Il secondo fattore più importante è quello di tenere in considerazione il ruolo di "WebCrawler" o robot progettati per eseguire la scansione dei siti Web e indicizzare i contenuti al livello pertinente e riportarli al motore di ricerca per classificare i contenuti nel posto giusto.

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

In breve, la "facilità di navigazione" è un contributo fondamentale per migliorare la migliore esperienza utente e svolge un ruolo fondamentale nell'incrementare il posizionamento del nostro sito e aumentare il traffico.

È un motivo eccellente per molti siti Web aziendali per mantenere un'unica icona di navigazione anziché una barra dei menu complessa, che viene caricata fino a un menu a schermo intero quando si fa clic.

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 dimostreremo come utilizzare il widget del menu di navigazione di Elementor per ottenere il menu WordPress avanzato e personalizzato.

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

Crea un menu WordPress di base usando 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 per il menu. Prenderà 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 semplice menu 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 Menù 1.

Nota : non preoccuparti. I tuoi lettori non potranno vedere i nomi dei menu. È una funzione che ti aiuta a mantenere organizzati tutti i tuoi diversi menu.

Dopo aver dato un nome al tuo Menu, clicca 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 popolare 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, landing page, link personalizzati e categorie.

basta selezionare le voci di menu che si desidera aggiungere utilizzando la casella di controllo, quindi fare clic sul pulsante "Aggiungi al menu". Questo popolerà il tuo menu con tutte le voci di menu selezionate.

Nota : nota che ogni sezione sotto "Aggiungi voci di menu" ha la possibilità di passare da: Più recenti , Visualizza tutto e Cerca . Ricordarsi di utilizzare queste opzioni se 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 di menu padre e figlio (opzionale)

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 padre, rivelerà tutte le voci del menu figlio nascoste sotto di essa.

Bello vero?

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

4. Gestisci la posizione del menu e pubblica

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

Nella parte superiore del tuo editor di menu, dovresti notare un'opzione chiamata "Gestisci posizioni". Fare clic su di esso e dovrebbe apparire qualcosa di simile alla seguente schermata:

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

Dopo aver assegnato un menu a ciascuna delle posizioni di menu disponibili, fai 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 più personalizzazione e funzionalità, continua a leggere per conoscere il Widget del menu Elementor Pro Nav.

Come creare un menu di navigazione usando il widget di 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 viene fornita con 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 Nav stesso? Ecco una breve introduzione.

Widget del menu Nav di Elementor Caratteristiche principali

• Il widget del menu Nav ti dà la libertà di posizionare il tuo menu ovunque tu voglia. Nella tua intestazione o nella parte superiore o ovunque nella tua pagina.
• Puoi aggiungere più menu sul tuo sito e anche sulle tue pagine separatamente o globalmente.
• Dai un aspetto smagliante al tuo menu usando l'animazione, gli effetti in bilico o lo stato attivo
• Crea un menu reattivo per dispositivi mobili del tuo sito e controlla l'aspetto del tuo sito sugli schermi mobili
• Personalizza il colore, la tipografia e l'imbottitura o altre regolazioni della barra dei menu
• Crea un menu perfetto per i 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 abbiamo menzionato sopra e quindi personalizzerai il menu WordPress predefinito utilizzando il widget menu pro-nav. Dopo aver creato l'elenco principale, il passaggio successivo consiste nell'aggiungerlo nella posizione desiderata, ovvero nella sezione Intestazione.

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

Nell'angolo più in alto della sezione impostazioni, sono disponibili tre opzioni; Contenuto, stile e avanzato.

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 sui siti che offrono servizi creativi. Nel caso di un layout verticale, la diffusione 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 sono layout verticali e richiedono l'interazione con l'utente per essere visualizzati. Sono utilizzati principalmente per creare un design pulito.

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

Sezione Animazione : questa sezione ti permetterà di aggiungere effetti di animazione sotto, sopra o su 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 di menu.
• Grow : l'animazione di crescita cresce dal centro verso l'esterno e dà una sensazione di crescita.
• Drop in : Drop in animazione scorre dal basso verso l'alto.
• Drop out: l'animazione di drop out scorre dall'alto verso il basso.

Allo stesso modo, ci sono animazioni con cornice, overline, doppia linea, sfondo e testo. Ognuno di loro offre il proprio set di animazioni e puoi controllarle tu stesso per scoprire cosa ottieni con loro.

Sezione puntatore : seleziona il tipo di puntatore dal menu a tendina.

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

Imbottitura e spaziatura dei menu: la spaziatura interna 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 design a cui stanno pensando.

La spaziatura del menu offre molte opzioni tra cui:

• Spazio tra le voci di menu
• Riempimento orizzontale e verticale per elementi di menu e sottomenu
• Allineamento al centro, a sinistra, a destra e giustificato.

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

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

Menu reattivo mobile

Il mobile è una parte importante del Web, ed è per questo che gli sviluppatori di Elementor forniscono anche strumenti in modo che tu possa creare la barra di navigazione anche per il cellulare.

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

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

• Larghezza intera su dispositivo mobile: hai la possibilità di impostare anche la larghezza intera o 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 di hamburger pieghevole.
• Attiva / disattiva allineamento: l'icona dell'hamburger può essere allineata al centro, a sinistra oa destra.
• Allineamento a parte / al centro: scegli l'allineamento del menu mobile.

Navigazione reattiva : offre un posizionamento reattivo del menu.

Avvolgendo

Il menu è una delle funzionalità più significative di qualsiasi sito Web. Perché aiuta i visitatori a navigare attraverso il tuo sito Web e se hai creato un elenco in modo intelligente, aiuterebbe a mantenere i tuoi visitatori sul tuo sito per lungo tempo. Il menu è altrettanto importante di quello dell'intero layout del sito Web, dell'intestazione e della sezione piè di pagina.

Pertanto, il widget del menu deve essere in grado di offrire l'aspetto unico del tuo marchio con tutte le funzionalità essenziali. Il widget Elementor Navigation è 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 e personalizzato su misura nel tuo sito Web, nella pagina di destinazione, nell'intestazione o in qualsiasi altra sezione in cui desideri visualizzarlo.