Un mega menu è un tipo di menu di navigazione espandibile che rivela più opzioni contemporaneamente, in genere raggruppate in categorie per una migliore esperienza utente. A differenza dei tradizionali menu a tendina, i mega menu offrono un layout più ampio, spesso caratterizzato da colonne, immagini, icone o persino widget.
È particolarmente utile per i siti di e-commerce, i portali di notizie o qualsiasi altro sito web di grandi dimensioni con molti contenuti che devono essere facilmente accessibili.
Ma se si desidera creare un Mega Menu in Elementor, non è possibile perché Elementor (la versione gratuita) consente semplici layout di navigazione utilizzando il widget Nav Menu; manca la struttura avanzata necessaria per un mega menu completo. Si incontrerebbero limitazioni come:
- Nessun supporto per i dropdown a più colonne
- Nessun incorporamento di immagini o widget nelle voci di menu
- Stile e controllo hover limitati
Quindi, se desiderate un mega menu avanzato, moderno, facile da usare e ricco di funzioni, dovrete utilizzare un plugin di terze parti per abilitare questa funzionalità. Quindi, in questo blog, vi mostrerò Come creare un Mega Menu in Elementor in 5 semplici passi
Ecco l'anteprima del mega menu che creeremo utilizzando Elementor:
Creare un Mega Menu di WordPress in Elementor
Costruire un mega menu dettagliato per il vostro sito WordPress con Elementor può sembrare complicato. Elementor è ottimo per le pagine, ma i menu avanzati spesso richiedono di più. Molti plugin offrono funzioni di mega menu per Elementor, ma Element Pack si distingue per semplificare le cose.
Con altri plugin, potreste imbattervi in impostazioni confuse, opzioni di design limitate o difficoltà a far apparire il vostro menu in modo corretto su diversi dispositivi. Può sembrare di dover lottare contro l'interfaccia solo per ottenere un mega menu di base.
Element Pack, Tuttavia, offre tutta la potenza necessaria attraverso un'interfaccia facile da usare. Permette di creare mega menu impressionanti senza le tipiche frustrazioni, fornendo un modo diretto per aggiungere contenuti e layout direttamente all'interno di Elementor.
Quindi, iniziamo a costruire l'intero mega menu con l'Element Pack.
Prerequisito
Prima di tutto, verificare che questi due plugin siano stati installati e attivati:
- Elementor: La versione gratuita è sufficiente.
- Element Pack: Questo plugin per WordPress aggiunge funzionalità di mega menu specifiche per Elementor.
Passo 1: Abilitare i moduli e i widget del menu Mega
L'abilitazione della funzione Mega Menu in Element Pack Pro comporta la regolazione di diverse impostazioni nella dashboard di WordPress. Quindi,
- Andate su Element Pack Pro dalla vostra dashboard di WordPress.
- Passare alla sezione Caratteristiche speciali scheda.
- Attivare il Mega Menu Switcher e salvare le impostazioni.
- Quindi, andare alla sezione Widget di base scheda.
- Abilitare i widget Mega Menu e Sub-Menu.
- Salvare le impostazioni.
- Salvare nuovamente i permalink per garantire la corretta funzionalità.
Fase 2: Creazione e configurazione del menu Elementor
Ora è necessario creare il mega menu. Seguite i passaggi di base qui sotto per una gestione efficace del menu.
- Vai a Aspetto > Menu.
- Dare un nome al menu e fare clic su Crea menu.
- Aggiungere voci di menu (collegamenti personalizzati o pagine esistenti) al menu.
- Per ogni voce che si desidera trasformare in un menu Mega, attivare il selettore Menu Mega.
- Salvare il menu e aggiornare la pagina.
Passo 3: Progettazione del menu Mega
Dopo aver creato il menu, l'attivazione del commutatore di menu Mega Element Pack consente di personalizzare le voci del menu. Questa funzione evidenzia le voci pronte per essere convertite in Mega Menu.
La personalizzazione dei menu mega con opzioni di larghezza e icone migliora l'esperienza dell'utente. Questi elementi aiutano a integrare visivamente il menu con il design del sito web. Quindi, progettate alcuni elementi di base del sistema in base alle vostre esigenze.
- Passare il mouse su una voce di menu con il Mega Menu attivato.
- Fare clic sul pulsante Modifica menu Mega che appare.
- Viene visualizzato un pop-up
- Accendere Abilitare il menu Mega.
- Impostare la larghezza del menu (predefinita o personalizzata).
- Se lo si desidera, aggiungere un testo per il badge, che apparirà vicino alla voce di menu.
- Scegliere l'icona del menu e il colore dell'icona.
- Fare clic su Opzioni di salvataggio.
Passo 4: personalizzare il menu Mega di Elementor
Ora, per personalizzare il menu mega, dobbiamo aprirlo con Elementor. Quindi,
- Fare clic sul pulsante Modifica del contenuto del menu a tendina.
- Si aprirà l'editor Elementor.
- Trascinare e rilasciare i widget nel layout del Mega Menu.
- Utilizzate il widget Sub-Menu e create colonne, aggiungete immagini, icone, testo, ecc.
- Personalizzate gli stili, la spaziatura e il layout secondo le vostre esigenze.
- Utilizzate l'anteprima Elementor per vedere l'aspetto del menu Mega.
- Si può usare un altro modo per creare un sottomenu usando Copia e incolla dal vivo
- Basta andare su Element Pack Mega Menu Demo
- Scegliere una demo
- A questo punto, scegliete uno stile e fate clic sul pulsante di destra Copia e incolla dal vivo pulsante
- Qui, sto copiando l'elemento del menu Men della demo di Adidas
- Ora, tornare all'editor Elementor e incollare
- L'intero modello di mega menu sarà disponibile qui.
Passo 5: Personalizzazione del layout e dello stile del controllo
Il suo layout e i suoi stili possono richiedere ulteriori personalizzazioni per mantenerlo simile al vostro sito web. Quindi,
- A questo punto, modificate lo stile e il contenuto secondo le necessità.
- Utilizzate la modalità responsive per garantire una buona visualizzazione su mobile.
- Controllare il menu nelle visualizzazioni desktop e mobile.
Fase 6: salvare e gustare
Ora siamo alla fine,
- Andare al modello o alla pagina in cui si desidera mostrare il mega menu.
- Cercare il widget del mega menu nella sezione Element Pack
- Trascinare e rilasciare nel layout della pagina
- Selezionare il menu e impostare la direzione del menu
- A questo punto, se è necessario apportare modifiche al layout o allo stile, completarle e fare clic sul pulsante Pubblica.
- Ora visitate la vostra pagina o il vostro modello e passate il mouse sul vostro menu; otterrete così il mega menu.
Mega menu avanzato in Elementor: anteprima
Element Pack Maine Focus consente di creare un mega menu avanzato. Ecco alcuni mega menu avanzati realizzati da Element Pack.
Si tratta di una copia del dribble per fare un mega menu come il sito web Dribbble
Con Element Pack è possibile costruire mega menu avanzati come questo per il commercio elettronico.
È inoltre possibile costruire questo bellissimo mega menu con l'Element Pack.
Conclusione
Creare un mega menu in Elementor da zero può sembrare scoraggiante all'inizio, ma con gli strumenti giusti e un approccio strutturato, diventa un modo potente per elevare la navigazione e l'esperienza utente del sito.
Che si tratti di un negozio di e-commerce, di un blog ricco di contenuti o di un sito web aziendale, un mega menu ben progettato aiuta i visitatori a trovare più rapidamente ciò di cui hanno bisogno, mettendo in evidenza la professionalità del vostro marchio.
Seguendo i passaggi descritti sopra, avete costruito un mega menu completamente funzionale, visivamente accattivante, reattivo e personalizzabile. Non dimenticate di testarlo su tutti i dispositivi e di perfezionare il layout in base al feedback degli utenti. Element Pack vi offre la flessibilità di modificare e scalare il vostro menu in base alla crescita del sito.
Siete pronti ad andare oltre? Provate a integrare contenuti dinamici, icone o persino elementi di WooCommerce per rendere il vostro mega menu davvero interattivo. Le possibilità sono infinite. Continuate a sperimentare e lasciate che sia la vostra creatività a guidarvi!
FAQ
1. Posso creare un mega menu con Elementor gratuito?
Sì, ma è limitato. Per i layout e le funzionalità avanzate, Element Pack rende tutto molto più semplice.
2. Ho bisogno di competenze di codifica per costruire un mega menu?
Niente affatto! Con Element Pack è possibile progettare mega menu complessi in modo visuale, senza bisogno di codice.
3. Come si crea un mega menu su Elementor?
È possibile utilizzare il widget Menu della Elementor con il contenuto a discesa abilitato. Ma per un'impostazione più rapida e un maggior numero di opzioni di stile, l'Element Pack rende tutto più semplice.
4. Come si crea un mega menu in Elementor senza un plugin?
È possibile utilizzare CSS personalizzati e sezioni interne, ma ciò richiede molto tempo. Element Pack vi fa risparmiare ore grazie al widget Mega Menu integrato.
5. Come impostare un mega menu?
Progettate l'intestazione, aggiungete voci di menu e abilitate il contenuto a discesa. Oppure saltate la fatica: Element Pack gestisce per voi il layout, la reattività e le animazioni.
Ultimi blog
- Rilasciata la versione 9 di Element Pack Pro: Cosa c'è di interessante?
- Come aggiungere un cursore per le testimonianze in WordPress usando Elementor
- Come si fa a mantenere la fisarmonica chiusa per impostazione predefinita in Elementor?
- Come impedire che i link Elementor siano sottolineati (3 modi)
- Guida facile: Come aggiungere codice a una pagina su Elementor | 5 semplici passaggi
