Editor Studio: progettare il design dei menu a tendina in un menu
Tempo di lettura: 8 min.
Dopo aver aggiunto e configurato un menu a tendina, puoi personalizzarne il design in modo che appaia come desideri. Modifica l'aspetto e l'allineamento del contenitore e del menu per creare un look personalizzato per i clienti e rafforzare il loro brand.
Prima di iniziare:
I menu a tendina possono essere aggiunti solo dai nuovi menu nell'Editor Studio. Se hai già utilizzato i menu, puoi creare i sottomenu e aggiungere i mega menu.
Modificare il layout dei menu a tendina
A seconda del tipo di menu (barra di navigazione, a tre linee, eccetera), puoi utilizzare il pannello Layout per impostare la visualizzazione o la larghezza del menu a tendina. Puoi anche personalizzare la spaziatura e l'allineamento per adattarli all'aspetto del menu principale.
Per modificare il layout dei menu a tendina:
- Vai al tuo Editor
- Clicca sul menu/tasto menu
- (Menu a tre linee) Clicca su Modifica menu per aprire la modalità di modifica a tre linee e seleziona il menu
- Clicca sull'icona Layout
- Seleziona la scheda Menu a tendina
- Usa le opzioni per regolare il layout:
- Larghezza del contenitore: scegli la larghezza del contenitore a tendina e regolala come desideri:
- Allunga: il contenitore del menu a tendina ha la larghezza dello schermo intero. Puoi regolarne la larghezza impostando i margini (in px)
- Adatta al menu: il menu a tendina ha la stessa larghezza del menu parent principale
- Adatta al contenuto: il contenitore "si adatta" agli elementi del menu a tendina. Puoi scegliere se allinearlo a sinistra, al centro o a destra del menu principale
- Mostra elementi: seleziona se gli elementi del menu a tendina sono compressi o sempre mostrati
- Spazio sopra il contenitore: ingrandisci o riduci lo spazio tra il menu a tendina e il menu principale
- Numero di colonne: scegli quante colonne mostrare nel menu a tendina
- Spaziatura: regola la spaziatura degli elementi nel menu a tendina. Se hai aggiunto elementi secondari, puoi anche modificare la spaziatura tra e sopra di essi
- Spazio tra gli elementi: inserisci la spaziatura orizzontale e verticale tra gli elementi del menu a tendina
- Spazio tra i sottoelementi: riduci o rimpicciolisci lo spazio tra i sottoelementi
- Spazio sopra i sottoelementi: scegli la spaziatura sopra i sottoelementi nel menu
- Spaziatura interna: personalizza lo spazio attorno a ogni parte del menu a tendina in base alle tue esigenze:
- Spaziatura interna elemento: riduci o rimpicciolisci lo spazio attorno agli elementi del menu a tendina
- Spaziatura interna sottoelemento: regola lo spazio attorno ai sottoelementi nel menu a tendina
- Spaziatura interna contenitore: riduci lo spazio attorno al contenitore a tendina piccolo o grande quanto ti serve
- Allineamento: allinea gli elementi del menu a tendina e gli elementi secondari a sinistra, a destra o al centro del contenitore
- Larghezza del contenitore: scegli la larghezza del contenitore a tendina e regolala come desideri:
Nota:
Le opzioni visualizzate dipendono dal tipo di menu (barra di navigazione o a tre linee) e dall'orientamento (orizzontale o verticale) scelto.
Personalizzare il design dei menu a tendina
Puoi progettare ogni parte di un menu a tendina per completare l'aspetto del menu principale, dai contenitori agli elementi e ai sottoelementi.
Per personalizzare il design dei menu a tendina:
- Vai al tuo Editor
- Clicca sul menu/tasto menu
- (Menu a tre linee) Clicca su Modifica menu per aprire la modalità di modifica a tre linee e seleziona il menu
- Clicca sulla freccia Apri Ispezione
in alto a destra dell'Editor - Scorri verso il basso fino a Design
- Seleziona l'elemento che vuoi progettare
- Contenitore a tendina
- Contenitore del menu a tendina
- Elementi del menu a tendina
- Sottoelementi del menu a tendina
- (Elementi a tendina/sottoelementi a tendina) Seleziona lo stato pertinente: Regolare, Passaggio mouse o Pagina corrente/Selezionati
- Progetta il design del menu a tendina utilizzando le opzioni disponibili:
- Riempimenti sfondo: modifica il colore di sfondo del menu a tendina o aggiungi un gradiente accattivante. Puoi regolare l'opacità e aggiungere più livelli in base alle tue esigenze di design
- Bordi: regola la larghezza e il colore dei bordi del contenitore a tendina
- Angoli: rendi gli angoli del menu a tendina più arrotondati o rettangolari regolando il raggio
- Testo: regola lo stile e la formattazione degli elementi del menu a tendina e dei sottoelementi
- Ombreggiatura: aggiungi ombre al menu a tendina e personalizzane l'angolo, il colore, la distanza e altro ancora
Qual è la differenza tra i contenitori?
- Contenitore a tendina: mostra tutti gli elementi e i menu che hai aggiunto all'elemento a tendina
- Contenitore del menu a tendina: mostra solo gli elementi del menu a tendina. È posto all'interno del contenitore a tendina
Progettare i menu a tendina singolarmente
Le modifiche apportate al design e al layout di un menu a tendina si applicano a tutti i menu a tendina. Tuttavia, puoi "scollegare" i menu a tendina nei menu della barra di navigazione orizzontale per personalizzarli separatamente.
Nota:
Questa opzione non è disponibile nei menu a tre linee o nei menu con barra di navigazione verticale.
Per scollegare e personalizzare i singoli menu a tendina:
- Clicca sul menu orizzontale nell'Editor
- Clicca su Gestisci menu
- Passa il mouse sul menu a tendina pertinente e clicca su Modifica
- Scegli come vuoi progettare il design del menu a tendina:
Regola il layout del contenitore
Regola il layout del menu a tendina
Personalizzare il design del contenitore
Personalizza il design del menu:
Nota:
Gli interruttori Modifica solo questo menu a tendina nel pannello Ispezione sono collegati, il che significa che disabilitando/abilitando un interruttore si disabilita/abilita automaticamente l'altro.