Come creare un mega menu con Elementor ed ElementsKit

Riesci a immaginare un sito web di grandi dimensioni senza un mega menu? 
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?

Per aumentare l'usabilità e la capacità di coinvolgere l'utente, il mega menu gioca un ruolo fondamentale nel valorizzare le persone. 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 megamenu 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 generatore di menu completo e ricco di funzionalità per il tuo sito professionale. 

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 Menù

• 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: Personalizza il contenuto del megamenu

Seleziona la casella di controllo "Abilita questo menu per i contenuti Megamenu" => Fare clic su 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ù.

Controllo Disposizione

• 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.

Selezionare Spazio tra le 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 mega menu Testo dell'intestazione

• 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: personalizzare Icona

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

Passaggio #4: personalizzare Distintivo

• 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.

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.

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!