Menu principale

Link in evidenza

1. Documentazione di Company XYZ sul blocco del menu principale
2. Documentazione di Shopify su sezioni e blocchi
3. Documentazione di Company XYZ sulle impostazioni dei colori del banner
4. Documentazione di Company XYZ sulle impostazioni di visibilità
5. Documentazione di Company XYZ sull’uso dei video
6. Documentazione di Company XYZ sulle icone

Video utili

Video di Shopify Academy: personalizzare il tuo negozio

Video di Shopify Academy: personalizzare il tuo negozio

Usa questo blocco per mostrare un menu di navigazione standard con menu a discesa automatici quando il menu selezionato include link nidificati. Puoi anche aggiungere un banner opzionale e una barra dei vantaggi, rendendo questo blocco utile per combinare la navigazione con una promozione discreta o un messaggio del brand. Consulta la documentazione di Company XYZ sul blocco Main menu.

Per una panoramica più ampia della struttura del tema, consulta la documentazione di Shopify su sezioni e blocchi

Su dispositivi mobili, tutti i blocchi Menu e Mega menu vengono combinati in un’unica interfaccia di navigazione. Esaminali insieme per mantenere il menu mobile chiaro e facile da usare.

Impostazioni di base

Inizia scegliendo il menu che questo blocco deve visualizzare. Decidi poi se il banner opzionale o la barra dei vantaggi aggiungono un contesto utile, ad esempio una promozione, un annuncio stagionale o alcuni brevi punti di forza del servizio.

Usa questi elementi aggiuntivi con attenzione. La navigazione deve rimanere innanzitutto navigazione, quindi evita di aggiungere così tanti contenuti di supporto da rendere più difficile individuare i link.

Impostazioni di allineamento

Queste impostazioni regolano con precisione la posizione del menu all’interno del blocco su desktop. In genere sono più importanti quando il blocco occupa spazio aggiuntivo o utilizza un layout desktop più ampio.

Se le modifiche all’allineamento sembrano poco evidenti, controlla prima le scelte di layout. Il layout di solito ha l’effetto maggiore, mentre l’allineamento agisce più come una regolazione finale.

Impostazioni del layout

Usa queste impostazioni per controllare quanto spazio orizzontale utilizza il menu su desktop e come viene posizionato lungo la riga. I layout a sinistra, al centro e a destra sono adatti a configurazioni dell’header più tradizionali, mentre un layout a larghezza intera può rendere la navigazione più equilibrata negli header più ampi.

Fill available space è utile quando il blocco deve espandersi nello spazio rimanente invece di rimanere compatto. Poiché questa opzione si applica solo su desktop, visualizza sempre un’anteprima del risultato su schermi più grandi.

Consiglio

Se l’header appare sbilanciato, prova a modificare il layout prima di cambiare l’allineamento. Un layout più ampio spesso risolve i problemi di spaziatura in modo più efficace.

Sfondo del banner

Queste impostazioni controllano i contenuti multimediali dietro il banner opzionale. Puoi usare un’immagine o un video di sfondo e impostare contenuti multimediali distinti per dispositivi mobili quando l’elemento desktop non viene ritagliato bene sugli schermi più piccoli.

Scegli contenuti multimediali di sfondo che supportino il messaggio senza sovrastarlo. Immagini semplici e video brevi e poco distraenti funzionano generalmente meglio nelle aree di navigazione.

Attenzione

Contenuti multimediali di sfondo molto elaborati o ad alto contrasto possono rendere più difficile esaminare i contenuti correlati al menu. Se la leggibilità diminuisce, semplifica i contenuti multimediali o aumenta il contrasto tra overlay e testo.

Per indicazioni sulla configurazione dei video, consulta le best practice per i file video.

Primo piano del banner

Queste impostazioni controllano i contenuti sovrapposti allo sfondo del banner. I campi vuoti rimangono nascosti, quindi puoi mantenere il banner essenziale o creare un messaggio promozionale più completo.

Usa l’icona, la didascalia, il titolo e il sottotitolo per creare una gerarchia dei contenuti chiara. I campi delle icone accettano emoji o icone denominate, che possono essere utili per dare risalto quando vengono usate con moderazione e coerenza. Per suggerimenti sulla formattazione delle icone, consulta le indicazioni sulle icone del tema.

Le impostazioni dei pulsanti consentono di aggiungere un’azione diretta e controllarne lo stile, la posizione dell’icona e la larghezza sui dispositivi mobili. Se abiliti uno stile di link per l’intero blocco, i link all’interno del testo del sottotitolo vengono rimossi; questa opzione è quindi più adatta quando l’intero banner deve indirizzare i visitatori verso un’unica destinazione.

Scegli un unico schema di interazione principale per il banner. Se l’intero banner è cliccabile, evita di aggiungere altri link concorrenti o messaggi eccessivamente complessi.

Contenuti multimediali in primo piano del banner

Aggiungi un’immagine in primo piano quando il banner necessita di un logo, un badge, un’immagine del prodotto o un altro elemento grafico che deve essere posizionato sopra lo sfondo. Questa soluzione funziona particolarmente bene quando lo sfondo è più suggestivo e l’immagine in primo piano rappresenta il vero punto focale.

Usa l’impostazione della larghezza dell’immagine per mantenere l’elemento grafico proporzionato al testo. Un’immagine a larghezza intera può essere adatta a grafiche d’impatto, ma larghezze inferiori sono generalmente migliori per loghi ed elementi visivi di supporto.

Se rendi cliccabili i contenuti multimediali in primo piano, mantieni la stessa destinazione del resto del banner per evitare una combinazione confusa di destinazioni dei link.

Colori del banner

Queste impostazioni sostituiscono le scelte cromatiche generali del banner solo per questo blocco. Usale quando il banner necessita di un contrasto diverso, di un branding più marcato o di un controllo maggiore sul modo in cui il testo viene visualizzato sopra i contenuti multimediali. Consulta la documentazione di Company XYZ sulle impostazioni dei colori del banner

I controlli dell’overlay sono particolarmente utili per la leggibilità. Aumenta l’overlay solo quanto basta per supportare il testo, poiché overlay troppo intensi possono rendere il banner piatto o visivamente pesante.

Impostazioni standard dei blocchi

Impostazioni di visibilità

Usa i controlli di visibilità per mostrare o nascondere questo blocco in base alle dimensioni del dispositivo. È utile quando vuoi una disposizione diversa della navigazione su desktop e dispositivi mobili. Consulta la documentazione di Company XYZ sulle impostazioni di visibilità

Poiché la navigazione mobile combina i blocchi basati sui menu in un’unica interfaccia, controlla sempre il risultato completo su dispositivi mobili dopo aver modificato la visibilità.

Impostazioni dell’editor

Usa il titolo dell’editor per rinominare il blocco nella barra laterale dell’editor. È utile quando hai più di un blocco relativo ai menu e vuoi etichette più chiare durante la modifica.

Note sull’uso

1. Mantieni concentrati i link di primo livello. Usa etichette di menu concise e aggiungi solo livelli di menu a discesa che aiutino concretamente i visitatori a trovare più rapidamente i contenuti.
2. Esamina l’esperienza mobile nel suo insieme. Poiché i blocchi basati sui menu vengono combinati sui dispositivi mobili, valuta l’esperienza finale della navigazione mobile invece di considerare solo questo blocco.
3. Usa il banner con moderazione. Aggiungi contenuti promozionali solo quando favoriscono la scoperta senza competere con la navigazione principale.
4. Dai priorità alla leggibilità. Quando usi immagini o video di sfondo, regola i colori e gli overlay finché testo e azioni non risultano facili da esaminare.
5. Adatta il layout allo spazio dell’header. Usa layout più ampi o basati sull’opzione di riempimento quando il menu deve equilibrare un header esteso e layout più compatti quando altri elementi dell’header hanno la priorità.
6. Controlla entrambi i breakpoint. I controlli desktop e mobile possono influire in modo diverso su layout, allineamento e visibilità dei contenuti multimediali; visualizza un’anteprima di entrambe le dimensioni prima di pubblicare.
7. Usa intenzionalmente le sostituzioni dei contenuti multimediali. Mantieni le scelte dello sfondo desktop e mobile coerenti con i contenuti e con il comportamento di ritaglio desiderato e considera che contenuti multimediali distinti possono risultare più indipendenti dal resto dell’header.