Come creare un mega menu in WordPress con Elementor

Riusciresti a immaginare un sito web di grandi dimensioni senza un menu di navigazione? 
Non c'è modo!

Le persone stanno diventando sempre più esigenti riguardo al tempo che trascorrono online. Uno studio recente lo dimostra  94% degli utenti web dire che la facilità di navigazione è la caratteristica più utile di un sito web.
Quasi tutti, vero?

l'usabilità e la capacità di coinvolgere l'utente, il mega menu è il tipo perfetto di menu di navigazione per il tuo sito web. Un mega menu semplice ma funzionale incoraggerà gli utenti a esplorare ancora più aree del tuo sito web e ad agire immediatamente.

Anche i più grandi siti di e-commerce, come Amazon ed eBay, utilizzano mega menu per aiutare gli utenti a navigare attraverso l'intera navigazione di un sito Web in un unico menu. 

Non solo un sito di e-commerce, ma un mega menu è anche un'ottima opzione per qualsiasi sito di notizie, riviste, editori di contenuti, aziende e altro ancora. 

Quando si crea un sito Web di grandi dimensioni con più categorie e sottocategorie, Megamenu è un grande menu espandibile a più colonne in cui tutto è visibile contemporaneamente.
Sono sicuro che mi vengono in mente così tante domande! Giusto? 

Nessun problema… Qui ti aiuterò a ottenere tutte le risposte alle tue domande e alla fine di questo articolo imparerai come creare facilmente il tuo mega menu. 

Presentazione di ElementsKit Mega Menu Builder

Utilizzando il ricco di funzionalità ElementsKit Generatore di menu mega puoi creare e personalizzare qualsiasi tipo di Megamenu con un'interfaccia di contenuto live Elementor.

Otterrai variazioni nel mega menu come il menu Nav e il mega menu verticale insieme a molte opzioni di personalizzazione. 

Nel complesso, ElementsKit Elementor Mega Menu è un modulo completo e ricco di funzionalità per il tuo sito professionale che si classifica facilmente al primo posto tra i i migliori costruttori di Mega Menu WordPress per Elementor.

Come creare un mega menu con Elementor? 

Elementor ti offre molte funzionalità per progettare il tuo mega menu ma per ottenere funzionalità aggiuntive puoi utilizzare un plug-in di terze parti.

Esatto, ne hai bisogno ElementsKit. Sebbene ci siano così tanti plugin per creare un mega menu, ElementsKit supporta diversi tipi di mega menu tra cui mega menu verticale, mega menu orizzontale e molte altre opzioni di personalizzazione.

Qui ti mostreremo in dettaglio il processo passo passo per creare un mega menu completamente funzionale.

Cosa ti serve per creare un megamenu con Elementor

Per seguire questo blog tutorial, avrai bisogno di due cose–>

• Elementor
• ElementsKit

Oppure segui le istruzioni passo passo:

Assicurarsi Megamenù il modulo è SU da ElementsKit → MODULI.

Passaggio #1: Aggiungi menu

Per creare un mega menu in Elementor, devi creare un menu dalla dashboard di WordPress. Per farlo,

• Navigare verso Aspetto > Menu.
• Clicca su Crea un nuovo menu.
• Fornire Nome del menù > Controlla il Casella di controllo > Crea Menù.
• Clicca su Collegamento personalizzato > Fornire Collegamento E Aggiungi voci di menu nello stesso modo.

Passaggio #2: personalizzare il contenuto del megamenu

In questo passaggio puoi aggiungi voci di mega menu dal menu di WordPress che hai creato.

Seleziona la casella di controllo "Abilita questo menu per i contenuti Megamenu" > Clicca sul Menu mega con icona di impostazione su quale voce di menu desideri aggiungere il Mega Menu.

• Si aprirà un popup, attiva/disattiva il Megamenù opzione e Salva. Dopodiché fai clic su the MODIFICA CONTENUTO DEL MEGAMENU pulsante.

Scegli modello

• Clicca il Elementskit Icona della libreria modelli, quindi vai a Intestazioni.
• Clicca su Intestazione > Contenuto del menu mega > Inserisci qualsiasi Megamenù.

Disposizione di controllo

• Modifica la sezione Interna facendo clic sulla Sezione tratteggiata.
• Casella Larghezza contenuto: personalizza la larghezza del contenuto trascinando verso destra o sinistra.
• Contenuto a larghezza intera: Selezionare Intera larghezza.

Seleziona Spazio tra colonne

• Spazio tra le colonne=> Seleziona lo spazio tra le colonne da cadere in picchiata.

Scegli Posizione

• Altezza: seleziona la tua altezza trascinando da sinistra a destra.
• Allineamento verticale: seleziona Allineamento verticale dal menu a discesa.
• Overflow: seleziona Overflow predefinito o Nascosto.

Selezionare Etichetta HTML

• Seleziona il tuo Etichetta HTML da Cadere in picchiata.

Personalizza il testo dell'intestazione del menu Mega

• Seleziona Tipo di icona.
• Abilita per aggiungere icona.
• Carica l'icona dell'intestazione.
• Aggiungi o modifica titolo.
• Aggiungi Modifica descrizione.

Personalizza il testo

• Aggiungi o modifica testo.
• Aggiungi o modifica sottotitoli.
• Abilita per mostrare l'etichetta.
• Aggiungi o modifica etichetta.
• Personalizza colore di sfondo, tipografia, imbottitura, allineamento, raggio.

Passaggio #3: personalizza l'icona

1. Fare clic su "Aggiornamento' per salvare il menu > Chiudere l'editor.
2. Ora vai alla scheda Icona > Scegli un colore dalla tavolozza dei colori.
3. Seleziona Icona dalla Libreria di icone.
4. Ora vai al sito > Sono apparse l'icona selezionata e il colore.

Fase #4: Personalizza il badge

• Aggiungi o modifica testo.
• Scegliere Colore distintivo.
• Scegliere Colore di sfondo del distintivo.
• Clic Salva.

Passaggio #5: Impostazioni

Larghezza predefinita

• Seleziona la larghezza del menu mega: Predefinito.
• Seleziona la posizione del menu mega: Predefinito.
• Salva la finestra.
• Vista del sito: Mostra la larghezza predefinita con la posizione predefinita.

Relativo predefinito 

• Seleziona la larghezza del menu mega: Predefinito.
• Seleziona la posizione del menu mega: Parente.
• Clic Salva.
• Vista del sito: Mostra la larghezza predefinita con la posizione relativa.

Larghezza intera predefinita

• Seleziona la larghezza del menu mega: Intera larghezza.
• Seleziona la posizione del menu mega: Predefinito.
• Clic Salva.
• Vista del sito: Mostra l'intera larghezza con la posizione predefinita.

Posizione relativa a larghezza intera

• Seleziona la larghezza del menu mega: Intera larghezza.
• Seleziona la posizione del menu mega: Parente.
• Clic Salva.
• Vista del sito: Mostrando Larghezza intera con posizione relativa.

Larghezza predefinita personalizzata

• Seleziona la larghezza del menu mega: Larghezza personalizzata.
• Fornisci qualsiasi larghezza personalizzata, ma per impostazione predefinita lo è 750px.
• Seleziona la posizione del menu mega: Predefinito.
• Clic Salva.
• Vista del sito: Mostrando Larghezza personalizzata con posizione predefinita.

Larghezza predefinita personalizzata Parente

• Seleziona la larghezza del menu mega: Larghezza personalizzata.
• Fornisci qualsiasi larghezza personalizzata, ma per impostazione predefinita lo è 750px.
• Seleziona la posizione del menu mega: Parente.
• Clic Salva.
• Vista del sito: Mostrando Larghezza personalizzata con posizione relativa.

Passaggio #6: Crea un modello di intestazione

Qui puoi usare il Modello di intestazione Elementor oppure puoi usare il Modello di intestazione ElementsKit.

• Ora cerca Menù di navigazione > Trascina il Menu di navigazione Ekit E Gocciolare sull'area selezionata. Assicurati di trascinare il menu ElementsKit Nav altrimenti il Megmenu creato non verrà visualizzato.
• Vai a Impostazioni del menu > seleziona il tuo creato Menù dell'intestazione dal menu a discesa.
• Puoi aggiungere qualsiasi tipo di widget da qui per personalizzare il tuo modello di intestazione.

Crea un mega menu usando Gutenberg

Se hai creato il tuo sito web nell'editor di blocchi di WordPress, puoi anche creare mega menu in Gutenberg senza problemi. Il plugin editor a blocchi GutenKit è dotato del modo più semplice per creare un mega menu WordPress in Gutenberg.

Con GutenKit, puoi creare l'intero menu nell'editor e progettare mega menu sia con orientamento verticale che orizzontale.

Tutto ciò che serve è installare il plugin GutenKit Pro e iniziare a costruire il tuo bellissimo sito in Gutenberg.

Risultato finale

• Una volta terminato, fare clic su Aggiornamento pulsante per salvare il menu.
• Ora vai sul tuo sito e potrai vedere che il Megamenu selezionato viene visualizzato di conseguenza.

Per saperne di più sulla creazione di mega menu in WordPress, puoi consultare la documentazione di ElementsKit Widget Mega Menu per Elementor.

Avvolgendo

Alla fine, siamo riusciti ad arrivare alla fine. Spero che siamo stati in grado di aiutarti con questo tutorial! E ora puoi creare un mega menu Elementor personalizzato utilizzando ElementsKit!

Puoi vedere tutti questi passaggi in un unico video qui.

Se hai ulteriori dubbi o hai riscontrato altri problemi, faccelo sapere nella sezione commenti!