Impostazioni del layout

Link in evidenza

1. documentazione Shopify sulle sezioni e i blocchi
2. documentazione Shopify sulla personalizzazione delle sezioni

Video utili

Video di Shopify Academy: personalizzare il tuo negozio

Video di Shopify Academy: personalizzare il tuo negozio

Usate queste impostazioni per controllare come i contenuti ripetuti vengono visualizzati su desktop, tablet e mobile. Potete scegliere una griglia o una presentazione per ogni dimensione del dispositivo, quindi regolare quanti elementi compaiono alla volta in base ai vostri contenuti e allo spazio disponibile sullo schermo. Per una panoramica più ampia su come sono organizzati i componenti del tema, vedete documentazione Shopify sulle sezioni e i blocchi

Stile del layout

Lo stile del layout controlla se gli elementi vengono visualizzati in una griglia fissa o in una presentazione scorribile. Questo vi offre la flessibilità di mostrare più elementi alla volta su schermi più grandi, mantenendo più semplice la navigazione su schermi più piccoli.

1. Scegliete Grid quando i clienti devono confrontare più elementi affiancati.
2. Scegliete Slideshow quando ogni elemento richiede più attenzione o quando lo spazio è limitato.
3. Se necessario, alternate gli stili in base al dispositivo. Una griglia su desktop e una presentazione su mobile è spesso una combinazione pratica.

Scegliete insieme stile del layout e numero di colonne. Le griglie dense funzionano meglio con contenuti semplici, mentre le presentazioni di solito richiedono meno elementi visibili e più spazio per scheda.

Numero di colonne

Il numero di colonne controlla quanti elementi compaiono in ogni riga per ciascuna dimensione del dispositivo. Numeri più alti aumentano la densità di navigazione, ma riducono anche lo spazio disponibile per immagini, titoli, prezzi e dettagli di supporto.

1. Su desktop, numeri di colonne più alti possono funzionare bene per schede compatte e una navigazione ampia tra gli elementi.
2. Su tablet, un numero separato vi aiuta a evitare layout che risultano troppo stretti sugli schermi di medie dimensioni.
3. Su mobile, numeri più bassi sono di solito più facili da leggere e toccare.

Se il numero di colonne del tablet è impostato su 0, gli schermi tablet utilizzano invece l’impostazione delle colonne del desktop. Questo è utile quando volete un layout coerente per schermi più grandi, ma vale la pena verificare che le schede del tablet abbiano comunque spazio sufficiente.

Consiglio

Se le schede degli elementi risultano affollate, riducete il numero di colonne prima di modificare la dimensione del testo o nascondere i dettagli. Un maggiore spazio orizzontale di solito migliora la chiarezza più rapidamente.

Scelta della densità giusta

Il miglior layout dipende da quante informazioni deve mostrare ogni elemento. Le schede semplici, basate sulle immagini, possono gestire layout più densi, mentre le schede con molto testo o ricche di dettagli di solito richiedono più spazio.

1. Usate meno colonne per titoli più lunghi, più etichette, prezzi o metadati aggiuntivi.
2. Usate più colonne per layout da scansione rapida con poco testo.
3. Usate i layout di presentazione quando volete che i clienti si concentrino su un elemento alla volta invece di scansionare un’intera riga.

Note sull’uso

1. Partite dalla dimensione dei contenuti. Scegliete il numero di colonne in base a quanto testo e quante immagini ogni elemento deve mostrare comodamente.
2. Controllate separatamente il tablet. Ereditare il numero di colonne del desktop può farvi risparmiare tempo, ma i layout tablet spesso richiedono una regolazione propria.
3. Mantenete il mobile facile da toccare. Evitate layout mobile che rendono le schede troppo strette o i target touch troppo piccoli.
4. Usate la presentazione in modo intenzionale. Scegliete la presentazione quando il focus conta più del mostrare il numero massimo di elementi alla volta.
5. Preservate l’aspetto predefinito quando volete uno stile di fallback. I valori vuoti, trasparenti o con stile predefinito di solito mantengono l’aspetto ereditato, mentre colori espliciti, gradienti o override dei media rendono quell’area più indipendente. Per i dettagli di configurazione nell’editor del tema, vedete documentazione Shopify sulla personalizzazione delle sezioni