Come usare?
Mega Menu è uno dei tipi di menu più popolari ed efficaci, specialmente su desktop. Gli utenti si aspettano naturalmente di trovare un Mega Menu proprio sotto l’intestazione del sito web. Tuttavia, il menu predefinito di Shopify è solitamente semplice, privo di una struttura forte e offre poco o nessun supporto per le immagini. Ecco perché dovresti usare il Navi+ Mega Menu.
Vantaggi principali:
- Sostituisce completamente il semplice menu mega predefinito di Shopify
- Offre più stili di presentazione con immagini, griglie e layout multi-livello per un’esperienza ricca e professionale
- Funziona senza problemi sia su mobile che su desktop per un’esperienza coerente
FAQ:
1. Non ho deciso se usare la versione gratuita o quella a pagamento. Posso provare i modelli di menu professionali?
Assolutamente! I gruppi di menu servono principalmente ad aiutare i principianti a non sentirsi sopraffatti dalle funzionalità avanzate in Navi+ 😄. La cosa migliore è provare i menu professionali per esplorare tutte le funzionalità e le opzioni di layout. In seguito, puoi semplicemente eliminare qualsiasi menu di cui non hai bisogno o che trovi inadeguato.
2. Creare un menu qui lo fa apparire subito sul mio sito web?
Non ancora. Dovrai pubblicare il menu corretto affinché appaia sul tuo sito web. Non preoccuparti — è facile!
3. E se scelgo il modello sbagliato o commetto un errore?
Nessun problema. Puoi eliminarlo e crearne uno nuovo in qualsiasi momento. Se stai testando un menu e vuoi provare un altro modello, puoi salvare quello attuale come file di backup e riaprirlo in seguito. Puoi anche copiare e incollare parti tra i menu (aprendo due schede del browser) per mantenere il tuo lavoro precedente. Sentiti libero di sperimentare!
4. Dovrei creare solo un menu o più?
Dovresti creare più menu. Solo il menu attivo verrà visualizzato sul tuo sito, ma puoi preparare molte versioni — selezionando modelli diversi o clonando menu. I menu possono essere configurati per mostrare/nascondere in base al tipo di pagina (home, prodotto, collezione...), dispositivo (mobile o desktop) o parole chiave URL. Quindi vai avanti e costruisci menu che si adattino a ogni situazione!
Passo 1: Modifica l’albero del menu
1.1. Comprendere l’albero del menu
L’albero del menu è la parte più importante di qualsiasi menu: definisce la struttura.
Ecco un esempio di un albero del menu di un mega menu desktop completo:
[+] Menu
[+] Categorie
[+] Alfabeto
Skateboarding
- Componenti (Nome del gruppo)
- Scrivanie
- Truck
- Altro (Link blu per dettagli..)
- Completi
- Cappelli (Nome del gruppo)
- Burton Lunchlap Earflap Hat
- Volcom Ramp Stone Adjustable Hat
- ...
[+] Accessori
[+] Blog
[+] Supporto
[+] Altro
Questo è un albero del menu a 3 livelli. Il livello 1 include Menu, Categorie, Alfabeto, Skateboarding… e Altro...\ Skateboarding ha 5 sottomenu di livello 2: Componenti, Scrivanie, Completi (Consiste in alcuni sottomenu di livello 3: Cappelli, Burton Lunchlap Earflap Hat…)
Trascorrerai la maggior parte del tuo tempo a costruire questo albero del menu per il tuo sito web, aiutando i clienti a trovare i contenuti che cercano.
1.2. Interazioni di base con l’albero del menu
Puoi trascinare e rilasciare gli elementi del menu su e giù o a sinistra e a destra per cambiare la loro posizione e le relazioni genitore-figlio nell’albero del menu.
Quando passi il mouse su qualsiasi elemento del menu, vedrai opzioni aggiuntive: modifica i dettagli dell’elemento, eliminalo dall’albero del menu o copialo e incollalo altrove.
Suggerimento: Puoi copiare un elemento del menu da un menu a un altro aprendo l’app Navi+ in due schede del browser.
1.3. IMPORTANTE! Elimina gli elementi di menu di esempio e mantieni solo la struttura che desideri.
Questa è una situazione comune quando crei un menu con Navi+. Quando crei un nuovo menu, includiamo un esempio completo con elementi di menu popolari per mostrare idee di layout e permetterti di copiare/incollare secondo necessità. Tuttavia, se sei nuovo in Navi+ e utilizzi il piano Starter, vedrai molti avvisi rossi (i) per funzionalità non disponibili, come il caricamento di immagini o l’uso di interazioni avanzate.
Se ti piacciono queste funzionalità avanzate, considera di passare a un piano Business o Elite. Ma se vuoi continuare con il piano Starter, ti preghiamo di trovare ed eliminare gli elementi di menu con avvisi rossi (i).
Suggerimento importante: Quando appare la conferma di eliminazione, attiva “Non chiedere di nuovo la prossima volta” per eliminare più velocemente.
1.4. Aggiungi elementi di menu all’albero del menu
Per aggiungere un elemento di menu, hai due opzioni:
Opzione 1 **(Non consigliato se sei nuovo in Navi+)**: Fai clic su “Aggiungi menu” per inserire un elemento di menu vuoto alla fine dell’albero del menu. Questo metodo richiede una buona comprensione delle impostazioni degli elementi del menu, che tratteremo di seguito. Potrebbe sembrare opprimente all’inizio, quindi puoi esplorare questo in seguito.
Opzione 2 (Consigliata): Abbiamo già preparato molti modelli di elementi di menu ben progettati per te. Basta copiarli e incollarli nel posto giusto. Dopo aver terminato il tuo albero del menu, elimina semplicemente i modelli non utilizzati.
1.5. IMPORTANTE! L’attributo “È un elemento di menu multi-colonna” (disponibile solo per Desktop e per i Mega menu).
Questa è una funzionalità altamente specializzata progettata specificamente per i Mega Menu desktop. Viene utilizzata quando hai bisogno di un elemento di menu a schermo intero con più colonne. Ogni colonna può essere configurata con larghezze personalizzate (ad es., 3/12, 4/12, 6/12…). L’elemento di menu Multi-Colonna è estremamente potente e flessibile per costruire layout di menu complessi su misura per le tue esigenze.
Se non hai bisogno di layout complessi come gli elementi di menu Multi-Colonna — o prevedi di usarli in seguito — puoi eliminarli in sicurezza dai tuoi elementi di menu di livello 1.
Vedi istruzioni dettagliate su come utilizzare l'attributo "È un elemento di menu multi-colonna".
Quando un elemento di menu di livello 1 è impostato su "È un elemento di menu multi-colonna", verrà evidenziato in giallo chiaro nell'albero del menu, e i suoi elementi di menu di livello 2 verranno automaticamente convertiti in Colonne (con un'icona rossa), indipendentemente da qualsiasi altro attributo che assegni.
Per questi elementi di menu di livello 2 Colonna, l'unico attributo utilizzabile è Layout larghezza. Tutti gli elementi di sottomenu sotto quella colonna verranno quindi disposti all'interno di una singola colonna.
Trovi difficile usare questo tipo di menu? Hai ragione! Ma i risultati che ottieni con questo attributo sono davvero WOW.
Se rimuovi l'attributo "È un menu multi-colonna" dall'elemento di menu di livello 1, tutto tornerà allo stato originale.
Perché hai bisogno dell'attributo "Larghezza del dropdown quando espanso"?
Per impostazione predefinita, quando utilizzi l'attributo "È un elemento di menu multi-colonna", il sottomenu (dropdown) si espande fino alla larghezza dello schermo (o in base alla dimensione del contenitore, solitamente 1280, 1366, 1440 o 100% — configurabile nella scheda Avanzate).\ Tuttavia, con un'area così ampia, potresti non avere sempre abbastanza contenuti o idee per riempire lo spazio.
In questo caso, puoi limitare la larghezza del sottomenu (individualmente per ogni elemento di menu Multi-Colonna) per evitare un aspetto vuoto o sbilanciato.
Esempio: Puoi creare un menu con una larghezza di 700px e due colonne a 6/12 ciascuna. In questo modo, ottieni comunque un layout spazioso senza sprecare troppo spazio sullo schermo.