Navigazione del footer

Link in evidenza

1. Documentazione di Company XYZ sulla sezione di navigazione del footer
2. Documentazione Shopify su sezioni e blocchi
3. Documentazione di Company XYZ sul blocco del menu del footer
4. Documentazione di Company XYZ sul blocco del logo
5. Documentazione di Company XYZ sul blocco delle icone dei social media
6. Documentazione di Company XYZ sul blocco dei selettori di localizzazione
7. Documentazione di Company XYZ sul blocco delle icone di pagamento
8. Documentazione di Company XYZ sul blocco del copyright
9. Documentazione di Company XYZ sul blocco del pulsante
10. Documentazione di Company XYZ sul blocco dell’immagine
11. Documentazione di Company XYZ sul blocco del video
12. Documentazione di Company XYZ sul blocco del separatore
13. Documentazione Shopify sulla personalizzazione delle sezioni
14. Documentazione di Company XYZ sulle impostazioni degli sfondi delle sezioni
15. Documentazione di Company XYZ sulle impostazioni del padding delle sezioni
16. Documentazione di Company XYZ sulle impostazioni dei separatori
17. Documentazione di Company XYZ sulle impostazioni delle larghezze del layout

Video utili

Video Learn With Shopify: best practice per i menu di navigazione di Shopify

Video Learn With Shopify: best practice per i menu di navigazione di Shopify

Video Shopify Academy: personalizzare il proprio negozio

Video Shopify Academy: personalizzare il proprio negozio

Usa la navigazione del footer per creare un layout personalizzato di fine pagina con menu, elementi del brand, testo legale, link social, media e contenuti di utilità. Funziona meglio quando desideri un controllo maggiore rispetto a un footer semplice impilato, soprattutto su desktop, tablet e mobile.

Il riferimento alla sezione Navigazione del footer è disponibile nella documentazione di Company XYZ. Per una panoramica più ampia del comportamento delle sezioni in Shopify, consulta la documentazione Shopify sulle sezioni e i blocchi

Impostazioni di base

I controlli principali del layout definiscono quante colonne usa il footer nelle diverse dimensioni dello schermo. Queste impostazioni definiscono la struttura generale prima che tu perfezioni i singoli blocchi.

1. Imposta prima il layout desktop. Usa più colonne per i footer con molti link e meno colonne per layout più semplici, incentrati sul brand.
2. Usa consapevolmente l’impostazione tablet. Se le colonne tablet sono impostate su 0, i tablet riutilizzano il numero di colonne desktop, il che è utile quando il layout desktop si adatta già bene.
3. Mantieni il mobile più semplice. Gli schermi più stretti di solito funzionano meglio con meno colonne, soprattutto quando combini menu con contenuti più ampi come rich text, immagini o video.

Consiglio

Se il footer sembra affollato, riduci il numero di colonne prima di nascondere i contenuti. Una struttura più pulita di solito migliora la leggibilità più che rimuovere link utili.

Impostazioni di colore

Questi colori a livello di sezione ti consentono di sostituire i colori del testo e delle icone del footer senza modificare il resto del sito. Usali quando il footer ha bisogno di un trattamento visivo proprio.

1. Abbina il colore del testo allo sfondo. È particolarmente importante quando aggiungi un’immagine di sfondo, un gradiente o un video.
2. Usa il colore delle icone per coerenza. Aiuta a unificare i blocchi basati su icone, come i link social o altri elementi di utilità.
3. Considera i colori dei blocchi come eccezioni. Parti dai colori della sezione per l’intero footer, poi usa i colori a livello di blocco solo quando un elemento specifico deve distinguersi.

Tipi di blocco supportati

1. Button
2. Copyright
3. Follow on shop button
4. Footer menu
5. Localization selectors
6. Logo
7. Payment icons
8. Rich text
9. Separator
10. Social media icons
11. Image
12. Video

Guida ai blocchi

Menu del piè di pagina

I blocchi Footer menu mostrano un elenco di navigazione, con un titolo facoltativo per ogni gruppo. Scopri di più sul Menu del piè di pagina.

1. Usa blocchi menu separati per gruppi distinti come Help, Company e Policies.
2. Aggiungi titoli brevi quando hai più menu, così i clienti possono scansionare il footer più rapidamente.
3. Suddividi gli elenchi lunghi in gruppi più piccoli invece di creare un unico menu troppo grande.

Logo

Il blocco Logo rafforza l’identità del brand e può ancorare visivamente il footer. Se nel blocco non è impostata alcuna immagine, può usare il nome del negozio come fallback. Scopri di più sul Logo block.

1. Mantieni il logo di dimensioni contenute in modo che supporti il layout invece di dominarlo.
2. Una larghezza pari a 0 consente al logo di estendersi nello spazio disponibile, il che di solito è l’ideale per footer semplici, orientati al brand.

Testo ricco

Rich text è adatto per brevi testi del brand, dettagli di contatto, messaggi di fiducia o una frase di valore concisa.

1. Mantieni il testo breve così il footer resta facile da consultare.
2. Usa colori di sfondo o di testo a livello di blocco solo quando quel contenuto deve distinguersi dagli elementi circostanti.

Icone dei social media

Questo blocco attinge dagli account social configurati nelle impostazioni del tema. Scopri di più sul Icone dei social media.

1. Usa Show all quando gli account social configurati sono completi e coerenti.
2. Disattiva Show all se vuoi mettere in evidenza solo alcune reti principali.
3. Scegli lo stile delle icone in base al design del footer: branded per il riconoscimento, solid per un’interfaccia più pulita, oppure text only per un aspetto più minimale.

Selettori di localizzazione

I selettori di localizzazione consentono ai clienti di scegliere paese, valuta e lingua, dove supportato. Scopri di più sul Selettori di localizzazione.

1. Aggiungi questo blocco solo se tali opzioni sono disponibili per i clienti.
2. Su mobile, lo stile di input Small field può forzare il blocco su una nuova riga, quindi visualizza l’anteprima del footer dopo averlo modificato.

Aggiungi i selettori di localizzazione solo quando sono completamente configurati e utili per i clienti. In caso contrario, aggiungono complessità senza migliorare il footer.

Icone di pagamento e copyright

Questi blocchi vengono in genere usati vicino alla parte inferiore del footer per rassicurazione e informazioni legali. Scopri di più sul Icone di pagamento e sul Copyright block.

1. Collocali in una riga inferiore per un modello di footer familiare.
2. Mantieni il testo del copyright breve e aggiornato.
3. Considera le icone di pagamento come segnali di fiducia di supporto, non come contenuto principale del footer.

Pulsante

Il blocco Button aggiunge una chiara azione nel footer, ad esempio contattare il tuo team o aprire una pagina di supporto. Scopri di più sul Pulsante.

1. Usa al massimo uno o due pulsanti, così il footer non compete con il contenuto principale della pagina.
2. I pulsanti mobile a tutta larghezza sono utili quando l’azione è importante su schermi più piccoli.

Immagine e video

I blocchi Image e Video possono rendere il footer più editoriale o orientato al brand. Scopri di più sul Immagine e sul Video block.

1. Usa i media con moderazione, così la navigazione non viene spinta troppo in basso nella pagina.
2. Mantieni le didascalie brevi e pratiche.
3. Per il video, un’immagine poster di solito crea una prima impressione migliore.

Attenzione

I blocchi media di grandi dimensioni possono rendere i link del footer più difficili da trovare, soprattutto su mobile. Se la navigazione è la funzione principale del footer, mantieni i media secondari.

Separatore

Il blocco Separator aggiunge spazio o una separazione visiva tra gli elementi del footer. Scopri di più sul Separatore.

1. Usalo per dividere le aree superiori e inferiori del footer o per creare spazio attorno ai contenuti di utilità.
2. Può rimanere un piccolo spazio anche con altezza 0, perché il footer usa una spaziatura standard tra gli elementi.

Impostazioni condivise dei blocchi

La maggior parte dei blocchi del footer include controlli condivisi per allineamento, layout e visibilità. Queste impostazioni rendono la sezione abbastanza flessibile per footer reattivi personalizzati. Per il comportamento generale di modifica, consulta la documentazione Shopify sulla personalizzazione delle sezioni

1. Le impostazioni di allineamento consentono a ciascun blocco di allinearsi in modo diverso su desktop e mobile.
2. Le impostazioni di layout consentono di spostare un blocco su una nuova riga o colonna, oppure di estenderlo per riempire lo spazio desktop rimanente.
3. Le impostazioni di visibilità sono utili quando desktop e mobile richiedono layout del footer significativamente diversi.

Impostazioni standard della sezione

Impostazioni dello sfondo sezione

Impostazioni dello sfondo sezione controlla il colore di sfondo, il gradiente, l’immagine, il video e il trattamento dell’overlay del footer. In questa sezione, è particolarmente utile per separare il footer dal resto della pagina o creare una finitura di brand più forte.

Se aggiungi sfondi con immagini o video, controlla attentamente il contrasto di testo e icone. Il colore e l’opacità dell’overlay possono aiutare a preservare la leggibilità, e i media di sfondo specifici per mobile possono semplificare il design sugli schermi più piccoli.

Impostazioni di padding

Impostazioni di padding controlla lo spazio sopra e sotto il contenuto del footer. Usale per rendere il footer più arioso o per comprimerlo quando la pagina ha già molto spazio verticale.

Il padding desktop e mobile può essere regolato separatamente, il che aiuta a evitare che un footer desktop grande sembri troppo alto sui telefoni.

Impostazioni dei separatori

Impostazioni dei separatori aggiunge una linea nella parte superiore o inferiore della sezione footer. È utile quando desideri una transizione più chiara tra il footer e i contenuti vicini.

Se il colore del separatore è trasparente, viene usato invece il colore predefinito del bordo. Mantieni uno stile del separatore sobrio, a meno che il footer non abbia bisogno di un bordo più marcato.

Impostazioni di larghezza

Impostazioni di larghezza controlla sia la larghezza massima del contenuto sia la larghezza complessiva della sezione. In Footer navigation, la larghezza del contenuto influisce su quanto strettamente i blocchi sono disposti tra loro, mentre la larghezza della sezione conta soprattutto quando usi uno stile di sfondo.

L’editor può rendere le modifiche alla larghezza meno evidenti di quanto siano nella pagina pubblicata, quindi visualizza l’anteprima del risultato nella vetrina mentre perfezioni il layout. Usa larghezze più strette per una lettura più pulita e larghezze più ampie quando lo sfondo fa parte del design.

Note sull’uso

1. Inizia dalle colonne. Imposta prima il numero di colonne su desktop, tablet e mobile, quindi regola il layout dei singoli blocchi solo dove necessario.
2. Raggruppa chiaramente i link. Usa più blocchi Footer menu con titoli brevi in modo che i clienti possano scansionare rapidamente i link di supporto, aziendali e delle policy.
3. Proteggi il contrasto. Ricontrolla la leggibilità di testo e icone ogni volta che aggiungi un’immagine di sfondo, un gradiente, un video o colori personalizzati.
4. Usa con parsimonia le varianti responsive. Nascondi o duplica i blocchi solo quando mobile e desktop hanno davvero bisogno di layout del footer diversi.
5. Mantieni secondari i contenuti di utilità. Loghi, media, icone di pagamento e pulsanti devono supportare il footer, non rendere più difficile trovare la navigazione principale.
6. Visualizza entrambe le viewport in anteprima. I blocchi del footer possono riorganizzarsi, nascondersi o cambiare enfasi tra desktop e mobile, quindi controlla ogni dimensione prima della pubblicazione.
7. Considera i media come una scelta di design. Media separati per desktop e mobile possono modificare ritaglio, leggibilità e comportamento di fallback, quindi controlla entrambe le versioni se usi immagini o video.
8. Lascia i valori predefiniti quando desideri uno stile di fallback. Le scelte di colore vuote o trasparenti di solito preservano l’aspetto esistente del footer, mentre colori, gradienti o media espliciti rendono l’area del footer più indipendente.