Come modificare la barra dei menu in Elementor

La costruzione di un sito web che rifletta il vostro marchio inizia con una navigazione chiara e facile da usare. Tuttavia, molti principianti di WordPress hanno difficoltà a modificare la barra dei menu in Elementor. 

Per impostazione predefinita, Elementor non dispone di strumenti avanzati per i menu, il che comporta problemi come la mancata visualizzazione dei menu o la scarsa reattività dei dispositivi mobili. 

Qual è la soluzione? C'è un modo semplice per risolvere il problema.

Con Element Packè possibile avere il pieno controllo del menu di navigazione di Elementor utilizzando il widget Mega Menu, senza bisogno di codifica. 

Vediamo di sbloccare tutto il potenziale del costruttore di intestazioni Elementor utilizzando una delle caratteristiche più potenti del widget di navigazione Element Pack.

Perché utilizzare Element Pack Pro per le barre dei menu Elementor?

Le opzioni di menu predefinite di Elementor possono risultare limitate se si vuole creare una barra di navigazione completamente personalizzata o in stile mega. Ed è qui che il pacchetto Elementor offre un menu dedicato. widget per creare e modificare barre di menu in elementor in modo semplice e veloce, senza toccare una riga di codice.

Vediamo quindi come element pack si differenzia da elementor di base:

Menu predefinito di WordPress vs Barra dei menu Elementor

Come creare e personalizzare una barra dei menu in soli 6 passaggi

Quindi, per iniziare a modificare la barra dei menu predefinita, è sufficiente installare Element Pack dal suo file sito ufficiale. Ora che tutto è stato configurato, vediamo il processo completo di costruzione e personalizzazione di una barra di menu in Elementor utilizzando l'Element Pack Pro. 

Inizieremo creando la struttura del menu in WordPress e poi la personalizzeremo utilizzando il widget Mega Menu di Elementor e Element Pack.

Passo 1: Creare un menu di base in WordPress

Prima di creare una barra di menu, è necessario attivare i widget di menu necessari nel pacchetto di elementi. Per attivare la funzione barra dei menu:

• Vai a Dashboard > Element Pack Pro > Other Settings
  
• Ricerca di Menu Mega nell'elenco
  
• Commutare l'interruttore su Su

• Cliccare Salva le impostazioni

Ora avete abilitato il widget del menu nell'editor Elementor, il che significa che siete pronti a modificare i menu di navigazione nell'Elementor usando l'Element Pack Pro con tutte le icone di controllo, animazioni, badge e tutto il resto!

Ora creiamo il menu di base all'interno della dashboard di WordPress. 

• Vai a Dashboard > Appearance > Menus
  
• Cliccare Creare un nuovo menu
  
• Aggiungere un Nome del menu, quindi fare clic su Crea menu

• Aggiungere voci di menu selezionando pagine, post o collegamenti personalizzati

• Cliccare Menu Salva
  

Suggerimento: utilizzate nomi di link significativi come "Servizi", "Negozio" o "Contatti" per rendere il vostro menu di navigazione Elementor facile da usare e chiaro.

Passo 2: Abilitare la barra dei menu

Una volta creato il menu, è il momento di trasformarlo in una barra di menu alimentata da Element Pack.

• Cercare il Menu Mega accanto al pulsante Nome del menu campo

• Attivare il commutatore: una volta attivo, le voci di menu si illuminano di verde, indicando che sono ora compatibili con il sistema di controllo della velocità. Ewidget di navigazione del pacchetto lement
  
• Passare il mouse su una qualsiasi voce di menu e fare clic sul piccolo simbolo fluttuante Menu Mega che appare

Passo 3: Configurare le impostazioni della barra dei menu

Facendo clic sul pulsante fluttuante Menu Mega si aprirà una finestra a comparsa in cui è possibile configurare le impostazioni principali della barra dei menu:

• Abilitare il Abilitare il menu Mega commutatore
  
• Impostare un larghezza personalizzata per la barra dei menu (l'impostazione predefinita è 750px - si può aumentare se necessario)
  
• Scegliere il orientamento - L'orizzontale è comune, ma il verticale è ottimo per i layout di eCommerce.
  
• Aggiungere un icona o distintivo alla voce di menu per dare risalto visivo

• Cliccare Salva il menu Mega
  

Queste modifiche al design sono una parte importante di ciò che rende così potente la personalizzazione dei menu di Elementor. Si ottiene il pieno controllo visivo senza toccare il codice.

Passo 4: personalizzare il contenuto della barra dei menu in Elementor

Una volta salvate le impostazioni, verrà visualizzata una nuova opzione: Modifica del contenuto del menu Mega

• Fare clic su Modifica del contenuto del menu Mega

• Viene avviata una finestra a schermo intero Editore Elementor popup
  
• Ora è possibile progettare il contenuto del menu come qualsiasi sezione Elementor:
  
  • Aggiungere widget come colonne, immagini, pulsanti, o sottomenu
    
  • Disporre il layout con la flessibilità del drag & drop
    

Questo approccio porta tutta la potenza dell'interfaccia visiva di Elementor nella progettazione della barra dei menu.

Non sarete più bloccati da noiose caselle a discesa: pensate alla vostra barra dei menu come a un'intera tela di design.

Una volta terminata la creazione del layout, fare clic sul pulsante X nell'angolo in alto a sinistra di questa pagina. 

Passo 6: inserire il widget della barra dei menu in una pagina

Ora che il vostro menu è progettato e pronto, è il momento di inserirlo nel vostro sito web:

• Aprite la pagina di destinazione con Elementor
  
• Ricerca di Menu Mega nel pannello dei widget
  
• Trascinare e rilasciare il Widget Mega Menu sul layout

• Dalle impostazioni del widget, scegliere il menu creato in precedenza
  

E questo è quanto! 

La barra dei menu reattiva in Elementor è ora attiva e interattiva. 

È possibile modificare ulteriormente le impostazioni di visualizzazione, come il layout verticale, il menu a levetta, le animazioni e la visibilità del dispositivo, utilizzando le schede Contenuto e Stile del widget.

Barra dei menu a regolazione fine con opzioni di personalizzazione 

Ora che la barra dei menu Elementor è stata installata con l'Element Pack Pro, è il momento di perfezionarne il layout, il comportamento e il design. 

Grazie all'interfaccia visiva dell'Elementor e alla potenza aggiuntiva della Element Pack Proè possibile controllare completamente il modo in cui il vostro barra del menu e risponde su diversi dispositivi, il tutto senza codice.

Impostazioni di layout

Andare a: Contenuto > Layout

Qui si imposta il layout di base della barra dei menu.

• Selezione del menu: Dal menu a tendina, selezionare il menu predefinito di WordPress creato in precedenza. 

• Finché non lo si seleziona, la barra dei menu visualizza un messaggio che chiede di scegliere un menu.

• Orientamento: Scegliere tra Orizzontale e Verticale.

• I menu orizzontali sono standard per le sezioni di intestazione.
  
• I menu verticali funzionano bene per le barre laterali o per i layout di e-commerce.
  
• Alternare l'opzione di menu: Abilitare il Toggle per trasformare la barra dei menu in un menu pieghevole, ideale per le visualizzazioni su dispositivi mobili e tablet. 

• Questa sezione consente anche di personalizzare l'intestazione dei toggle, le icone a freccia, il posizionamento delle icone, l'offset e le impostazioni di animazione.
  

Questa configurazione garantisce la possibilità di creare una barra di menu reattiva in Elementor che si adatta bene a diversi dispositivi.

Impostazioni del menu Hamburger

Vai a: Contenuto > Menu Hamburger

Questa sezione è stata progettata per la reattività dei dispositivi mobili. Assicura che il vostro menu rimanga accessibile sui dispositivi più piccoli.

• È possibile attivare o disattivare la visibilità su dispositivi specifici (tablet, cellulari, ecc.).
  
• Impostare l'allineamento dell'icona dell'hamburger (sinistra, centro, destra).
  
• Personalizzare la spaziatura e il comportamento del layout

Questo è particolarmente importante quando si lavora su un menu mobile in Elementor o risolvere problemi come la La barra dei menu di Elementor non viene visualizzata correttamente su schermi più piccoli.

Impostazioni del menu a tendina

Andare a: Contenuto > Impostazioni discesa

Controllate il comportamento dei contenuti a discesa quando l'utente interagisce con le voci del menu di base.

• Impostare il Valore offset per definire lo spazio tra l'elemento base e il contenuto del menu a tendina
  
• Scegliere il Tipo di animazione (ad esempio, dissolvenza, scorrimento, ecc.)
  
• Set Durata dell'animazione per controllare la velocità dell'animazione
  
• Definire il Tipo di innesco come Librarsi o Cliccare - a seconda di come si vuole che gli utenti accedano ai menu a tendina

Le tendine sono essenziali per un menu di navigazione multilivello Elementor e queste impostazioni forniscono un controllo preciso sul loro aspetto e sulla loro interazione.

Stilizzazione del menu (panoramica della scheda Stile)

Tutte le personalizzazioni del design avvengono sotto la voce Scheda stile del widget Mega Menu. Ecco come controllare ciascun componente:

Voci di menu

Andare a: Stile > Voci di menu

• Personalizzazione colore del testo, colore di sfondo, imbottitura, margine, confini, e box ombre
  
• Impostare stili unici per Hover stati per rendere le interazioni più dinamiche
  
• Questi controlli si applicano agli elementi di base visibili dell'elemento Barra del menu Elementor
  

Contenitore a discesa

Andare a: Stile > Giradischi

• Regolare il colore di sfondo dell'area a discesa
  
• Utilizzo imbottitura, margine, confine, e box ombra per definire la struttura e la spaziatura
  
• Nei casi in cui il contenuto interno ha già uno sfondo bianco, l'aggiunta del padding rivela più chiaramente lo sfondo della tendina.
  

Icona Hamburger

Andare a: Stile > Menu Hamburger

• Cambiare il colore dell'icona, sfondo, imbottitura, marginee altre proprietà visive
  
• In questo modo è possibile garantire la coerenza tra le versioni desktop e mobile del sito. Menu d'intestazione reattivo
  

Distintivi

Per personalizzare i badge del menu:

• From WordPress Dashboard > Appearance > Menus, fare clic su Modifica del menu Mega accanto alla voce di menu base che si desidera etichettare

• Nella finestra a comparsa, è possibile impostare il parametro testo del badge, colore del testo, e colore di sfondo

• Tornare quindi a Elementor e aprire il widget Mega Menu
  
• Go to: Style > Badgedove è possibile regolare con precisione la posizione, il padding, il margine, il bordo e il raggio del badge.

I badge sono utili quando si lavora su Modifica della testata Elementor Quando è necessario evidenziare voci di menu speciali come "Nuovo", "Vendita" o "Beta".

Con queste opzioni, si progetta un sistema di navigazione interattivo e di marca che funziona su ogni dispositivo. 

La potenza combinata del costruttore di intestazioni Elementor e del widget di navigazione Element Pack Pro offre un controllo e una flessibilità di progettazione di livello superiore.

Suggerimenti per migliorare il design della barra dei menu e l'esperienza dell'utente

Un menu pulito, reattivo e intuitivo può aumentare significativamente il coinvolgimento e ridurre la frequenza di rimbalzo. Ecco alcuni suggerimenti essenziali per migliorare il design del menu di WordPress utilizzando il costruttore di intestazioni di Element Pack Pro e Elementor.

Mantenere le voci di menu concise

• Mantenete le etichette del menu principale a una o due parole
  
• Evitare il disordine: puntare su 5-7 voci di menu di primo livello
  
• Utilizzare termini chiari e riconoscibili come "Informazioni", "Servizi", "Contatti".
  

In questo modo si migliora la scannerizzazione e si garantisce che il menu di navigazione di Elementor non sovraccarichi i visitatori.

Utilizzare le animazioni Hover per il feedback

• Abilitate le animazioni del passaggio del mouse sotto la voce Style > Menu Items scheda
  
• Mantenere le animazioni fluide e non 300 ms mantenere la reattività
  

Questo aggiunge un tocco di classe alla personalizzazione del menu Elementor e migliora il feedback dell'utente senza essere invadente.

Attenersi a caratteri e spaziature pulite

• Utilizzare caratteri di facile lettura (il sans-serif è il migliore per i menu).
  
• Garantire una sufficiente spaziatura orizzontale tra gli elementi per evitare clic errati.
  
• Mantenere una gerarchia visiva con i pesi e le dimensioni dei caratteri.
  

Questi perfezionamenti sono fondamentali quando si lavora su un'intestazione personalizzata in Elementor e garantiscono l'accessibilità su tutti i dispositivi.

Assicuratevi che i menu mobili siano completamente reattivi

• Utilizzare il Menu Hamburger impostazioni sotto Content > Hamburger Menu
  
• Assicuratevi che il vostro menu mobile in Elementor appare correttamente tra i breakpoint
  
• Test di visibilità su dispositivi mobili, tablet e desktop
  

Strumenti come Chrome DevTools o BrowserStack possono aiutare a verificare la reattività prima della pubblicazione.

Test di diversi orientamenti in base al layout

A seconda del layout del sito e della densità dei contenuti, il passaggio da una barra di menu orizzontale a una verticale potrebbe offrire una migliore UX.

• Menu verticali funzionano bene per le barre laterali o le categorie dell'e-commerce
  
• Menu orizzontali sono migliori per i layout di intestazione tradizionali
  
• Provare diversi orientamenti sotto Content > Layout > Orientation
  

Sperimentate e raccogliete feedback per trovare ciò che si allinea meglio al vostro flusso di utenti e alla struttura dei contenuti.

Seguendo questi suggerimenti, vi assicurerete che la vostra barra dei menu sia coinvolgente, veloce da caricare e adatta alle moderne abitudini di navigazione.

Conclusione

Congratulazioni, ora avete costruito una barra di menu personalizzata e completamente funzionale in Elementor, utilizzando il metodo Element Pack Pro!

Dall'impostazione dei plugin e dalla creazione di un menu in WordPress, all'inserimento e alla personalizzazione del Widget Mega Menu all'interno dell'editor visivo di Elementor. Questa potente combinazione permette di costruire menu di navigazione dinamici, reattivi e facili da usare senza scrivere una sola riga di codice.

Il design è un processo iterativo. Sentitevi liberi di esplorare diversi layout, font, icone e trigger di menu per adattarli all'identità del vostro marchio. 

Con la flessibilità di Personalizzazione del menu ElementorL'unico limite è la vostra creatività.

Se non l'avete ancora fatto, vi invitiamo caldamente a prova Element Pack ProSoprattutto se volete creare un design di menu WordPress professionale e completamente personalizzabile che funzioni perfettamente su tutti i dispositivi. È un kit di strumenti indispensabile per chiunque utilizzi Elementor.

Domande frequenti