Riuscito
Impostazioni del layout di navigazione
Controllare l’allineamento e lo spazio della navigazione nei layout dell’header su desktop e dispositivi mobili.
Usi questo gruppo di impostazioni per controllare dove appare la navigazione nell’header su desktop e dispositivi mobili. Le consente di mantenere la navigazione nella riga principale oppure di darle una riga separata a tutta larghezza quando il menu ha bisogno di più spazio.
Per una panoramica più ampia dell’interfaccia, veda documentazione Shopify sull’editor del tema
Impostazioni di layout
Sezione intitolata “Impostazioni di layout”Il layout su desktop e dispositivi mobili è controllato separatamente, così può mantenere una disposizione compatta su una dimensione di schermo e una più spaziosa sull’altra. Sinistra, centro e destra collocano la navigazione nella riga principale dell’header. A tutta larghezza la sposta sotto quella riga, in una riga propria.
Questa scelta influisce sia sulla visibilità sia sull’equilibrio. Mantenere la navigazione nella riga principale aiuta a creare un header più compatto, mentre una riga a tutta larghezza offre più spazio alle voci del menu e rende la navigazione più evidente.
Per maggiori dettagli sul comportamento di allineamento e raggruppamento, veda impostazioni del layout di navigazione.
A tutta larghezza fa più che cambiare l’allineamento. Posiziona la navigazione su una riga separata sotto la riga principale dell’header.
Posizionamento su desktop e dispositivi mobili
Sezione intitolata “Posizionamento su desktop e dispositivi mobili”Su desktop, sinistra e destra possono funzionare bene quando la navigazione deve affiancare il branding, la ricerca o le icone delle azioni. Il centro è spesso la scelta migliore quando la navigazione deve essere il focus visivo dell’header.
Su mobile, dia priorità alla chiarezza rispetto alla simmetria. Se l’header sembra troppo affollato, spostare la navigazione in una riga a tutta larghezza può rendere il layout più facile da leggere e ridurre la competizione con gli altri elementi dell’header.
Riempire lo spazio disponibile
Sezione intitolata “Riempire lo spazio disponibile”Riempire lo spazio disponibile estende l’area di navigazione per utilizzare lo spazio rimanente nella riga desktop. Questo può aiutare l’header a sembrare più equilibrato quando la navigazione è affiancata a elementi più piccoli e altrimenti ci sarebbe spazio vuoto.
È più utile quando la navigazione resta nella riga principale. Se le etichette del menu sono lunghe o l’header è già denso, esegua un test con attenzione in modo che la larghezza extra migliori l’equilibrio senza rendere lo spazio scomodo.
Note sull’uso
Sezione intitolata “Note sull’uso”- Abbini il layout alla lunghezza del menu. Usi A tutta larghezza quando la navigazione di primo livello ha bisogno di più spazio orizzontale.
- Regoli separatamente ciascuna dimensione dello schermo. Scelga il layout più chiaro per desktop e dispositivi mobili invece di forzare la stessa posizione su entrambi.
- Usi A tutta larghezza per ridurre l’affollamento. Se navigazione, branding e elementi di utilità competono per una sola riga, spostare la navigazione sotto di solito crea un header più pulito.
- Espanda lo spazio con intenzione. Attivi Riempire lo spazio disponibile quando la riga desktop ha spazio residuo e la navigazione dovrebbe aiutare a ancorare il layout.
- Riveda l’equilibrio complessivo dell’header. Dopo aver modificato l’allineamento, verifichi che la navigazione sembri ancora intenzionale accanto agli altri elementi dell’header.
- Controlli entrambe le viewport. Un layout che su desktop appare equilibrato può affollare l’header su mobile, quindi verifichi entrambe le dimensioni prima di pubblicare.