Come creare un mega menu in WordPress con Elementor?

Di cosa hai bisogno per creare un MegaMenu con Elementor?

Puoi creare un bellissimo mega menu da Element utilizzando la funzione visiva di trascinamento della selezione. Se desideri ottenere la funzionalità effettiva del mega menu, devi utilizzare un componente aggiuntivo di terze parti denominato componente aggiuntivo plus. Esistono molti altri plugin nel mercato WordPress per creare mega menu. Tuttavia, il componente aggiuntivo Plus offre varie opzioni per la creazione di mega menu che possono essere utilizzati per creare mega menu verticali, menu orizzontali, mega menu basati su attivazione/disattivazione, ecc. Offre:

• È progettato al 100% per Elementor.
• Ti consente di creare menu reattivi pixel perfetti.
• Ha compatibilità multibrowser.
• Tante opzioni di personalizzazione che si adattano alle tue esigenze.
• Facile da costruire qualsiasi interfaccia con funzionalità di trascinamento della selezione.
• Compatibile con tutti i temi WordPress più diffusi.

Quindi ti serve...

• Elementor
• Elementor Pro per intestazione personalizzata
• I componenti aggiuntivi Plus (ha una versione gratuita, ma è necessaria la versione Pro per la funzione di creazione della navigazione.)

Come aggiungere un mega menu in WordPress?

Con 4 passaggi fondamentali, puoi creare un mega menu tramite Element e i componenti aggiuntivi Plus. Sebbene siano presenti diversi passaggi secondari, questi vengono descritti in dettaglio di seguito.

Innanzitutto, attiva la funzione megamenu e genera un mega menu utilizzando il modello Elementor. Imposta la navigazione nativa di WordPress per aggiungere il tuo megamenu ( Aspetto > Menu ). Quindi, crea un'intestazione utilizzando il generatore di temi Elementor e infine imposta la reattività.

Attiva la funzione Mega Menu

Inizialmente, devi attivare la funzione Mega Menu sui componenti aggiuntivi Plus. Aggiungerà quindi un tipo di post personalizzato Plus Mega Menu per accogliere tutti i tuoi mega menu. Ora crea un nuovo post utilizzando Elementor per progettare tutto, dal tipo di post.

Nella dashboard di WordPress, vai a Impostazioni Plus, Widget Plus e attiva il widget Menu di navigazione TP.

Crea un modello di menu mega

Vedrai un nuovo tipo di post personalizzato Plus Mega Menu subito dopo aver attivato il widget. Verrà visualizzato come opzione individuale nel menu laterale della dashboard. Fare clic su Aggiungi nuovo da Plus Mega Menu per creare un nuovo mega menu.

Chiamalo come vuoi perché ti sarà molto utile se hai bisogno di creare un mega menu diverso in posti diversi. Per avviare l'interfaccia di Elementor, fai clic su Modifica con Elementor. Ora puoi progettare il layout del mega menu con Elementor che sarà visibile agli spettatori.

Ecco un esempio di una struttura di mega menu estesa di base. Puoi vedere una sezione principale per l'intero mega menu e abbiamo aggiunto varie colonne per controllare il menu espanso. Puoi aggiungere qualsiasi contenuto utilizzando il normale widget Elementor. Una volta terminata la creazione del modello, pubblicalo.

Imposta il menu di navigazione

Devi configurare la funzionalità di navigazione nativa di WordPress perché hai già creato un modello di mega menu. Per farlo, vai su Aspetto > Menu. Crea un menu se non ne hai creato uno. Ora aggiungi i contenuti che desideri nel Megamenu. In alto, aggiungi elementi essenziali, questi non attiveranno altri contenuti del megamenu. Il modo più semplice per farlo è collegare direttamente le pagine con collegamenti personalizzati. Quindi apri Plus Mega Menu per aggiungere la barra laterale delle voci di menu e aggiungi il modello di mega menu che hai creato.

Ora forse non riesci a vedere le opzioni Plus Mega Menu nell'area Aggiungi voci di menu . Hai difficoltà? Questo perché forse WordPress lo nasconde. Per rivelarlo, fai clic su Opzioni schermo in alto a destra e seleziona l'opzione del menu Plus mega .

È possibile personalizzare le dimensioni e l'allineamento del mega menu. Per le dimensioni, puoi scegliere: Predefinito (inserisci una larghezza massima in pixel), Contenitore (in base alle dimensioni del contenitore del sito Web) e Larghezza intera (il menu Mega si espanderà completamente indipendentemente dalle impostazioni).

Puoi anche personalizzare gli oggetti del menu, i colori delle etichette e le icone (se ne hai bisogno).

Crea modello di intestazione

Ora hai bisogno del generatore di temi Elementor per creare un'intestazione personalizzata per il tuo sito web. Per farlo, vai su Modelli > Generatore di temi e crea un nuovo modello per l'intestazione. Poiché ne abbiamo già creato uno, personalizzeremo il nostro modello esistente. Nel generatore di temi, puoi utilizzare le condizioni di visualizzazione di Elementor pro per scegliere dove apparirà questa intestazione sul tuo sito. Può renderlo visibile sempre o solo su pagine specifiche. Se hai finito con la struttura di base dell'intestazione, aggiungi il widget Menu di navigazione dai componenti aggiuntivi Plus.

Puoi utilizzare le impostazioni dei widget per controllare la direzione del menu, ad esempio orizzontale, verticale o verticale. Quindi utilizzare il menu Seleziona per scegliere il menu creato nel passaggio precedente. Per un'ulteriore personalizzazione, puoi farlo nella scheda Stile.

Rendilo reattivo

Per finire, imposta il comportamento reattivo per il mega menu in modo che i tuoi visitatori abbiano un'esperienza migliore su qualsiasi dispositivo. Puoi farlo semplicemente dal menu di navigazione. Da lì, vai alle impostazioni del menu Mobile nella scheda Contenuto, abilita Visualizzazione mobile reattiva.