Editor Studio: personalizzare il design dei menu
Tempo di lettura: 6 min.
Nell'Editor Studio, puoi personalizzare l'aspetto del menu nei minimi dettagli. Accedi al pannello Ispezione per progettare il menu per ogni singolo stato (ad esempio passaggio del mouse, selezionati), modificando impostazioni come il colore di riempimento, lo stile del testo, l'ombra e molto altro ancora.
In questo articolo, scoprirai come personalizzare il design di ogni tipo di menu:
Usi le interazioni al passaggio del mouse?
Se aggiungi un'interazione al passaggio del mouse a un menu, questa non appare su tablet e dispositivi mobile. In alternativa, puoi aggiungere un'interazione al clic, se vuoi che sia visibile su tutti i punti di interruzione.
Personalizzare il design dei menu orizzontali
Dal pannello Ispezione, puoi progettare i menu orizzontali in tre stati diversi (Regolare, Passaggio mouse e Al clic) per offrire ai visitatori un'esperienza di navigazione più interattiva.
A seconda del preset scelto, utilizza le opzioni disponibili per adattare il menu all'aspetto del sito. Ad esempio, alcuni menu orizzontali includono tasti o separatori che puoi personalizzare.
Per progettare un menu orizzontale:
- Seleziona il menu orizzontale
- Clicca sulla freccia Apri Ispezione
in alto a destra dell'Editor - Scorri verso il basso fino a Design
- Seleziona l'elemento che desideri personalizzare dal menu a tendina:
- Contenitore menu
- Elementi menu
- Contenitore del sottomenu
- Elementi sottomenu
- (Elementi menu/sottomenu) Seleziona lo stato pertinente: Regolare, Passaggio mouse o Pagina corrente
- Progetta il design del menu utilizzando le opzioni disponibili:
- Riempimenti sfondo: modifica il colore di sfondo del menu o del sottomenu e regolane l'opacità a tuo piacimento. Se il design include separatori, puoi scegliere il colore da qui
- Bordi: regola la larghezza e il colore dei bordi del menu
- Angoli: rendi gli angoli del menu o del sottomenu più arrotondati o squadrati regolando il raggio
- Ombra: aggiungi ombra al menu e personalizzane l'angolo, il colore, la distanza e altro ancora
- Testo: modifica lo stile e la formattazione delle voci del menu e dei sottomenu
- Layout: regola la spaziatura interna attorno alle voci del menu
Personalizzare il design dei menu verticali
Puoi progettare i menu verticali in due stati diversi, Regolare e Selezionati, per fare in modo che i visitatori sappiano sempre in quale pagina si trovano. Modifica il colore di riempimento del menu, del sottomenu e della freccia (se applicabile) e personalizza altre aree come il testo, il bordo, l'ombra, ecc.
Nota:
Le impostazioni disponibili dipendono dal menu specifico che hai selezionato nel pannello Aggiungi elementi.
Per progettare un menu verticale:
- Seleziona il menu verticale
- Clicca sulla freccia Apri Ispezione in alto a destra dell'Editor
- Scorri verso il basso fino a Design
- Progetta il design del menu utilizzando le opzioni disponibili:
- Colore e opacità: modifica il colore di sfondo del menu o del sottomenu e regolane l'opacità a tuo piacimento. Se il design include una freccia, puoi colorarla da qui
- Bordo: seleziona uno stile per il bordo del menu e regolane la larghezza e il colore
- Ombra: aggiungi ombra al menu e personalizzane l'angolo, il colore, la distanza e altro ancora
- Testo: modifica lo stile e la formattazione delle voci del menu e dei sottomenu
- Spaziatura: regola la spaziatura verticale tra le voci di menu e anche il posizionamento del testo e del sottomenu (in px)
Suggerimento:
Puoi fissare il menu verticale alla pagina in modo che rimanga fluttuante mentre i visitatori scorrono verso l'alto e verso il basso.
Personalizzare il design dei menu ancora
Scegli cosa mostrare nel menu ancora selezionando un preset nel pannello Ispezione. Puoi visualizzare testo, tasti o un preset che combina entrambi. Un preset ti consente anche di mostrare il nome dell'ancora quando i visitatori scorrono verso quell'area specifica.
Puoi quindi personalizzare il design in due stati diversi, Regolare e Al clic, per permettere ai visitatori di avere una chiara indicazione dell'ancora che stanno visualizzando.
Per progettare un menu ancora:
- Seleziona il menu ancora
- Clicca sulla freccia Apri Ispezione in alto a destra dell'Editor
- Scorri verso il basso fino a Design
- Seleziona un preset in alto
- Seleziona lo stato pertinente: Regolare o Al clic
- Progetta il design del menu utilizzando le opzioni disponibili:
- Colore e opacità: modifica il colore di sfondo del menu o del sottomenu e regolane l'opacità a tuo piacimento. Se il design include una freccia, puoi colorarla da qui
- Testo: modifica lo stile e la formattazione delle voci del menu e dei sottomenu
- Spaziatura: regola la spaziatura verticale tra le voci di menu e anche il posizionamento del testo e del sottomenu (in px)
Personalizzare il design di un menu a tre linee
I menu a tre linee includono diversi elementi che puoi progettare in base alle tue esigenze: il menu stesso, il suo contenitore e le icone per aprirlo e chiuderlo.
Per progettare un menu a tre linee:
- Seleziona il menu a tre linee
- Scegli l'area del menu che desideri personalizzare:
Icona del menu
Contenitore menu
Il menu vero e proprio
Il tasto "Chiudi menu"
Hai trovato utile questo articolo?
|