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
- Fare clic su "Aggiornamento' per salvare il menu => Chiudi l'editor.
- Ora vai alla scheda Icone => Scegli un colore qualsiasi dalla tavolozza dei colori.
- Seleziona Icona dalla Libreria di icone.
- 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!
Lascia un commento