Menu hamburger

Link in evidenza

1. documentazione Shopify sulle sezioni e i blocchi

Video utili

Video di Shopify Academy: personalizzare il tuo negozio

Video di Shopify Academy: personalizzare il tuo negozio

Usi questo blocco per visualizzare il pulsante hamburger che apre la navigazione principale sui dispositivi mobili. Se desidera che i clienti possano raggiungere il menu principale su schermi più piccoli, questo blocco deve essere incluso. Per una panoramica più ampia sul funzionamento dei blocchi del tema, consulti la documentazione Shopify su sezioni e blocchi

Questo blocco è solo per dispositivi mobili ed è necessario affinché la navigazione principale funzioni su mobile.

Impostazioni di allineamento

Usi queste impostazioni per affinare la posizione del blocco all’interno dello spazio assegnato. Sono più utili quando il blocco viene allargato dalle scelte di layout, anziché restare alla sua larghezza naturale.

Se le modifiche all’allineamento sembrano sottili, di solito è perché il blocco non ha molto spazio extra in cui lavorare. Imposti prima il layout, poi usi l’allineamento per rifinire la posizione finale.

Impostazioni di layout

Usi l’impostazione di layout mobile per scegliere dove si posiziona il pulsante del menu nella riga su schermi più piccoli. Il posizionamento a sinistra e a destra è di solito il più familiare, mentre una posizione centrata può funzionare meglio in design dell’header più minimalisti.

Un layout a tutta larghezza offre al blocco più spazio nella riga, il che può rendere i controlli di allineamento più evidenti. Lo usi con attenzione, in modo che l’header mantenga un aspetto equilibrato con gli altri elementi mobili.

L’opzione fill-space influisce solo sulla spaziatura della riga su desktop. Può aiutare a distribuire lo spazio lungo la riga quando questo blocco si trova accanto ad altri blocchi dell’header, ma non fa apparire il pulsante su desktop.

Note sull’uso

1. Mantenga disponibile l’accesso da mobile. Rimuova questo blocco solo se non desidera intenzionalmente alcun accesso mobile alla navigazione principale.
2. Scelga una posizione familiare. Il posizionamento a sinistra o a destra è di solito il più facile da individuare rapidamente nell’header.
3. Usi la larghezza con intenzione. I layout a tutta larghezza possono aiutare con la spaziatura, ma possono anche far sembrare un header semplice troppo grande.
4. Regoli l’allineamento per ultimo. Le scelte di layout hanno l’effetto maggiore, mentre l’allineamento funziona meglio come regolazione finale.
5. Controlli entrambe le viewport. Riveda l’header su mobile e desktop dopo aver modificato il layout o la spaziatura, in modo che il pulsante risulti ancora chiaro nel punto in cui appare.
6. Mantenga leggibili le azioni vicine. Se altri elementi dell’header condividono la stessa riga, si assicuri che il pulsante del menu non competa con essi per l’attenzione.