Elenco loghi

Link in evidenza

1. Documentazione Shopify su sezioni e blocchi
2. Documentazione Company XYZ sul blocco Button
3. Documentazione Company XYZ sul blocco Logo item
4. Documentazione Company XYZ sul blocco Rich text
5. Documentazione Company XYZ sulle impostazioni dell’header
6. Documentazione Company XYZ sulle impostazioni del padding della sezione
7. Documentazione Company XYZ sulle impostazioni degli sfondi della sezione
8. Documentazione Company XYZ sulle impostazioni dei separatori
9. Documentazione Company XYZ sulle impostazioni di visibilità
10. Documentazione Company XYZ sulle impostazioni delle larghezze del layout

Video utili

Video Shopify Academy: personalizzare il proprio negozio

Video Shopify Academy: personalizzare il proprio negozio

Mostra una griglia pulita di loghi, badge o riquadri immagine collegati. Questa sezione è adatta a marchi partner, segnali di fiducia, rivenditori, certificazioni o semplice navigazione basata su immagini quando i layout ricchi di testo sembrano troppo affollati. Per una panoramica più ampia di come questo si inserisce in un tema, vedi documentazione Shopify su sezioni e blocchi

Impostazioni principali

I controlli principali del layout determinano quanto la griglia dei loghi risulti densa o spaziosa. Usate l’allineamento orizzontale per posizionare la griglia nell’area del contenuto, quindi regolate il numero di colonne per desktop, tablet e mobile in modo che i loghi restino riconoscibili su ogni dimensione dello schermo.

Il tablet può ereditare il numero di colonne del desktop quando non serve un layout intermedio separato. In questo modo la configurazione resta più semplice e di solito funziona bene quando la maggior parte dei loghi ha proporzioni simili.

Se i loghi iniziano a sembrare troppo piccoli, riducete il numero di colonne prima di aumentare la larghezza dei singoli loghi. Una griglia più chiara in genere funziona meglio di una più densa.

Gruppi di impostazioni specifici della sezione

Impostazioni colore

Queste sostituzioni definiscono lo stile dell’area dell’heading della sezione, inclusi l’icona, l’heading e il sottotitolo. Usatele quando questa griglia di loghi ha bisogno di un trattamento visivo proprio senza modificare il resto della pagina.

Se i loghi stessi sono colorati, mantenete semplici i colori dell’heading in modo che la sezione non sembri affollata. Quando li combinate con uno sfondo personalizzato, controllate con attenzione il contrasto.

Tipi di blocco supportati

1. Button
2. Logo item
3. Rich text

Pulsante

Il blocco Button aggiunge una call to action separata all’interno della sezione. Questa soluzione funziona bene quando i loghi supportano una destinazione più ampia, come una pagina completa dei partner, una pagina media o una pagina di informazioni all’ingrosso.

Scoprite di più sul Pulsante.

1. Usate un blocco Button quando la sezione ha bisogno di un unico passo successivo chiaro oltre ai singoli link dei loghi.
2. Mantenete distinto lo scopo del pulsante se anche i loghi sono cliccabili.
3. La visualizzazione mobile a tutta larghezza può rendere l’azione più facile da toccare verso la fine di una pagina.

Elemento logo

Il blocco Logo item è il blocco di contenuto principale per questa sezione. Ogni elemento può includere un’immagine, una didascalia o testo opzionale e un link opzionale, quindi può funzionare sia come semplice parete di loghi sia come elemento di navigazione visiva.

Scoprite di più sul Elemento logo.

1. Usate immagini sorgente di dimensioni simili per ottenere una griglia complessivamente più ordinata.
2. Regolate la larghezza massima dell’immagine per ciascun blocco per correggere loghi che appaiono visivamente troppo grandi o troppo piccoli.
3. Aggiungete didascalie solo quando aggiungono un contesto utile, come il tipo di partner o la destinazione.

Consiglio

Quando un logo sembra troppo grande, modificate quel singolo blocco invece di cambiare l’intera griglia.

Testo ricco

Il blocco Rich text aggiunge un breve testo di supporto all’interno della sezione. Usatelo per un contesto sintetico, ad esempio per spiegare perché questi loghi sono importanti o cosa i visitatori possono aspettarsi se i loghi sono usati come navigazione.

Scoprite di più sul Testo ricco.

1. Mantenete il testo breve in modo che la sezione continui a presentarsi principalmente come una griglia di loghi.
2. Usate allineamenti separati per desktop e mobile se il testo richiede un posizionamento diverso sugli schermi più piccoli.
3. Il colore di sfondo del blocco può aiutare a far risaltare il testo di supporto, ma usatelo con parsimonia.

Impostazioni standard della sezione

Impostazioni dell’header

Impostazioni dell’header vi consentono di aggiungere una didascalia, un heading, un sottotitolo, un’icona e un pulsante opzionale a livello di sezione sopra la griglia dei loghi. Questo è utile quando i loghi hanno bisogno di contesto, come marchi in evidenza, certificazioni o menzioni sui media.

Un heading breve spesso migliora la chiarezza e la scansionabilità. Se aggiungete anche blocchi Button, assicuratevi che ciascuna azione abbia uno scopo diverso.

Impostazioni di padding

Impostazioni di padding controllano lo spazio sopra e sotto la sezione. Aumentate il padding quando l’elenco di loghi dovrebbe risultare più evidente, oppure riducetelo quando si trova tra diverse sezioni di contenuto compatte.

Lo spazio su mobile spesso richiede una regolazione separata perché le righe impilate possono rendere la sezione più alta del previsto.

Impostazioni dello sfondo sezione

Impostazioni dello sfondo sezione vi consentono di aggiungere un colore, un gradiente, un’immagine o un video dietro la sezione. Questo può creare un momento di branding più forte, ma sfondi troppo elaborati possono entrare in conflitto con i loghi.

Attenzione

Sfondi dettagliati e file logo trasparenti possono ridurre la chiarezza. Usate overlay o trattamenti di sfondo più semplici quando il riconoscimento dei loghi è la priorità.

Impostazioni dei separatori

Impostazioni dei separatori aggiungono una linea sopra o sotto la sezione. Sono più utili quando l’elenco di loghi ha bisogno di una separazione visiva più pulita rispetto al contenuto circostante.

Per la maggior parte delle sezioni di loghi, separatori sottili funzionano meglio di quelli decorativi.

Impostazioni di visibilità

Impostazioni di visibilità controllano se la sezione appare su desktop, mobile o entrambi. Questo è utile quando desiderate una presentazione mobile più semplice o una sezione diversa altrove per gli schermi più piccoli.

I controlli di visibilità a livello di blocco possono anche aiutarvi a ridurre il contenuto di supporto senza nascondere l’intera sezione.

Impostazioni di larghezza

Impostazioni di larghezza controllano la larghezza del contenuto e la larghezza esterna della sezione. Layout più ampi possono supportare griglie di loghi multi-colonna più equilibrate, mentre layout più stretti possono far sembrare più intenzionale un insieme ridotto di loghi.

L’editor potrebbe non riflettere completamente le modifiche alla larghezza, quindi controllate l’anteprima della pagina live quando perfezionate il layout.

Note sull’uso

1. Date priorità al riconoscimento. Scegliete numeri di colonne che mantengano i loghi facili da identificare a colpo d’occhio.
2. Normalizzate la dimensione visiva. Usate regolazioni della larghezza per ogni logo per bilanciare marchi con proporzioni molto diverse.
3. Collegate con intenzione. Se i loghi fungono da navigazione, assicuratevi che ogni destinazione sia chiara e utile.
4. Aggiungete contesto quando serve. Usate l’header o un breve blocco Rich text per spiegare perché questi loghi sono raggruppati insieme.
5. Visualizzate in anteprima su più dispositivi. Controllate i layout desktop, tablet e mobile prima di pubblicare, soprattutto quando mescolate loghi con testo o pulsanti.
6. Verificate separatamente su mobile. I controlli desktop e mobile possono modificare allineamento, visibilità e comportamento delle immagini, quindi confermate entrambe le viste prima di pubblicare.
7. Mantenete leggibili le immagini forti. File trasparenti, sfondi personalizzati o media separati per desktop e mobile possono modificare contrasto e ritaglio, quindi testate la combinazione finale per verificarne la chiarezza.
8. Usate uno stile semplice per le aree condivise. Lasciate invariati colori e sfondi predefiniti quando volete che la griglia si integri; usate sostituzioni esplicite solo quando volete che questa sezione si distingua.