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!

94% of users say it’s the most important feature of a website. So, easy navigation matters! That’s why mega menus are so effective. They organize categories and subcategories into a single, clear layout, making it easy for visitors to find what they need.

Sites like Amazzonia E eBay use mega menu to give the best user experience. Mega menus are ideal for e-commerce, news, blogs, and businesses with lots of content.

This article will show you how to create a functional and stylish mega menu con Elementor.

What do you need to create the mega menu with Elementor?

The only thing you need to create the mega menu using Elementor is ElementsKit.

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

You will get variations in the mega menu such as the Nav menu E Megamenù verticale along with many customization options. 

Overall, ElementsKit Elementor Mega Menu is a full featured-packed module for your professional site that easily ranks top among the best WordPress Mega Menu builders for 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 this step, you can add mega menu items from the WordPress menu you have created.

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

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

Qual è il prossimo?

Once you’ve finished creating the mega menu in Elementor, make sure to preview it. If you’re satisfied with the style, finalize and publish it. However, if you later find that it isn’t as attractive as you initially thought, you can change it at any time.

To understand how users interact with the style, consider integrating a heatmap tool like Clarity.

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.

With GutenKit, you can create the entire menu in the editor and design mega menu in both vertical and horizontal orientation.

All you need is to install GutenKit Pro plugin and start building your beautiful site in Gutenberg.

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!