Come creare un mega menu con Elementor ed ElementsKit

Come costruire un mega menu con elementor ed elementkit

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–>

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.

Crea un mega menu usando Gutenberg

Se hai creato il tuo sito web nell'editor di blocchi WordPress, puoi anche creare un mega menu in modo semplice e fluido. Il plug-in dell'editor di blocchi GutenKit viene fornito nel modo più semplice creazione del 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.

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!


Commenti

  1. Avatara Pietro

    Ciao,
    ottimo tutorial!
    Ho ancora una domanda sul Mega Menu:
    Posso aprire il Mega Menu con un clic e non con il passaggio del mouse?
    Sarei molto felice se avessi una risposta.
    Saluti,
    Peter

    1. Avatar Tanjana Sabrin
      Tanjana Sabrin

      Ciao Peter,

      Grazie mille per il tuo apprezzamento Questo significa molto per noi. Al momento la funzionalità non è disponibile. Ma puoi sicuramente richiedere una funzionalità per questo. Aggiungiamo continuamente nuove funzionalità in base alle esigenze dei nostri clienti.

      Ecco il link - https://wpmet.com/plugin/elementskit/roadmaps/#ideas. Condividi semplicemente la tua fantastica idea e fai clic sul pulsante di invio. 😍

      Stai al sicuro 😃

  2. Avatar Andrea
    Andrea

    CIAO,
    Adoro il tuo mega generatore di menu, ma ho un piccolo problema.
    Uno dei miei mega menu si trova all'estrema destra dell'intestazione e parte del mega menu scompare sul lato destro.
    Esiste un'opzione per allineare il mega menu a destra, a sinistra o al centro?

    Grazie

    1. AvatarAyub Ali

      Ciao Andrea,

      Senza controllare il tuo sito non possiamo dirti cosa sta causando esattamente questo problema. Quindi, forniscici il collegamento al tuo sito Web live o uno screenshot pertinente per comprendere chiaramente il problema. Ma puoi provare a cambiare la posizione del megamenu su quella predefinita seguendo questo screenshot (https://d.pr/i/ccf6RC). Fateci sapere l'aggiornamento qui o meglio se potete aprire un ticket di supporto: https://help.wpmet.com/

  3. Avatar Farzan

    Ciao a tutti, grazie per lo straordinario tutorial! Potrei applicare tutto, solo un piccolo problema. Nell'intestazione ho 4 pagine, una di queste ha un mega menu se ci passi sopra con il mouse. Tuttavia, nell'intestazione non posso fare clic sulla pagina principale (con il nome: persoonlijk), posso solo fare clic sugli elementi nella mega intestazione. Riesci a vedere cosa mi sto perdendo? (il sito è ancora in fase di sviluppo, ma puoi vedere l'intestazione nel file https://insight.nl/home URL. Vorrei avere la possibilità di poter cliccare anche sul pulsante PERSOONLIJK. Potresti aiutarmi a scoprire cosa ho fatto di sbagliato lì?
    Molte grazie in anticipo.

    1. AvatarAyub Ali

      Ciao Farzan, poiché si tratta di un problema tecnico e potresti aver bisogno di aiuto personalizzato, ti suggerirei di aprire un ticket di supporto da https://help.wpmet.com/

      Dato che il nostro team di supporto è molto disponibile, posso dire che faranno del loro meglio per risolvere il tuo problema il prima possibile.

      Auguri.

  4. AvatarMani

    Grazie mille per questo fantastico articolo. È molto utile. Chiunque può facilmente capire piuttosto che guardare molti video su Youtube.

  5. Avatar Mellisa
    Mellisa

    EHI,
    Ottimo tutorial; lo hai spiegato in modo chiaro e semplice. Creare un buon mega menu è essenziale in quanto ti aiuta a enfatizzare visivamente la relazione tra gli elementi, aiuta gli utenti a conoscere le scelte e ti aiuta a utilizzare facilmente icone e immagini.

  6. Avatara Davide
    Davide

    Ho seguito esattamente questo tutorial e il mio menu NON verrà visualizzato.
    Quando vai alla pagina che ho linkato sopra vedrai un menu: è il menu WordPress predefinito. Appena sotto ho utilizzato il widget del menu di navigazione e il menu non si popolerà.

    qualche idea?

  7. Avatar Collin
    Collin

    Il megamenù è fantastico! Proprio sul fatto: voglio che la pagina corrispondente si apra quando si fa clic sul nome del menu e che il Mega Menu appaia quando si passa il mouse. Come lo faccio? Adesso, quando clicco, appare solo il Mega Menu. Grazie per l'aiuto.

  8. Avatara Margherita
    Margherita

    Grazie per questo fantastico tutorial! È possibile creare un collegamento ipertestuale tra Titolo e Descrizione nel Mega Menu sotto Modifica Attiva/Disattiva? Ho un elenco di stati e città nel mio Mega Menu, ma ho il problema di dover elencare lo stato due volte in modo da poterne creare uno con collegamento ipertestuale nella sezione Paragrafo. C'è un modo per eliminare questa ridondanza?

  9. Avatara Margherita
    Margherita

    Ho dimenticato di aggiungere se fosse possibile avere anche la possibilità di passare il mouse sopra il titolo, consentendo alle città di apparire ed essere selezionate sotto di esso. Grazie.

  10. Avatar Sami Azam
    Sami Azam

    Come possiamo mostrare il Mega Menu sulle icone degli hamburger invece che su una voce di menu?

    1. Avatar Dipa Shaha
      Dipa Shaha

      Caro Sami
      Sfortunatamente, la funzione desiderata non è disponibile. Tuttavia, puoi richiedere questa funzionalità. Il team di ElementsKit è sempre felice di ricevere suggerimenti sulle funzionalità.
      Puoi richiedere la funzionalità utilizzando questo collegamento https://wpmet.com/plugin/elementskit/roadmaps/#ideas
      Grazie

  11. Avatar ajay

    Ho seguito esattamente questo tutorial e il mio menu NON verrà visualizzato.
    Quando vai alla pagina che ho linkato sopra vedrai un menu: è il menu WordPress predefinito. Appena sotto ho utilizzato il widget del menu di navigazione e il menu non si popolerà.

    Penso che ci sia qualche bug nel mega menu e ora non funziona più

    1. Avatar Hasib

      Ciao Ajay, assicurati di aver creato un menu nel backend prima di creare un mega menu. E dopo aver selezionato il menu di navigazione, devi scegliere quale menu desideri condividere nel mega menu.

  12. AvatarJy

    CIAO,

    Il megamenu funziona molto bene finché non aggiorno tutti i plugin, è strano che alcuni dei megamenu funzionino ma altri no e mostri "nessun contenuto trovato", ho eseguito il rollback della versione dei plugin ma non riesco a risolvere i problemi. Qualche idea su cosa causi questo problema?

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *