Impostazioni di layout del blocco

Link in evidenza

1. Documentazione Shopify sulle sezioni e i blocchi
2. Documentazione Shopify sull’editor del tema

Video utili

Video di Shopify Academy: personalizzare il tuo negozio

Video di Shopify Academy: personalizzare il tuo negozio

Usate questo gruppo di impostazioni per controllare quanto spazio orizzontale occupa un elemento di contenuto all’interno della griglia padre. Vi aiuta a creare una gerarchia visiva più forte, a inserire più elementi in una riga o a dare più spazio ai contenuti in evidenza.

Ampiezza colonne

La scelta principale è quante colonne il contenuto deve occupare per ciascuna dimensione del dispositivo. Ampiezze maggiori rendono un elemento più evidente e offrono più spazio a testo, media o azioni. Ampiezze minori sono utili per contenuti di supporto compatti e layout multi-colonna più stretti.

L’ampiezza su desktop di solito definisce l’intenzione generale del layout. Le ampiezze su tablet e mobile vi consentono di mantenere leggibile questa struttura man mano che lo spazio sullo schermo si riduce, senza obbligare ogni dispositivo a usare la stessa larghezza.

Per una panoramica più ampia sul funzionamento di questi layout, consultate documentazione Shopify su sezioni e blocchi

Comportamento su tablet e mobile

Il tablet può usare la propria ampiezza oppure seguire l’ampiezza desktop. Questo fallback è utile quando il layout desktop si adatta già bene e non richiede una regolazione separata per il tablet.

Il mobile dovrebbe essere impostato dando priorità alla leggibilità. Se il testo va a capo in modo scomodo, i pulsanti risultano troppo compressi o il contenuto si impila in modo irregolare, l’ampiezza mobile è spesso la prima impostazione da rivedere.

Verificate tablet e mobile separatamente, anche quando il layout desktop sembra corretto. Un’ampiezza che appare equilibrata su uno schermo grande può comportarsi diversamente quando la larghezza disponibile diminuisce.

Consiglio

Se i layout tablet risultano troppo affollati, riducete l’ampiezza tablet invece di replicare esattamente il desktop. Un layout tablet leggermente più semplice è spesso più facile da scansionare.

Limiti della griglia padre

Questo gruppo di impostazioni funziona all’interno della struttura a colonne del layout padre. Se l’ampiezza scelta è maggiore del numero di colonne disponibile nel layout padre, il contenuto si estende sull’intera riga.

Questo comportamento è utile per la flessibilità, ma può anche cambiare il modo in cui gli elementi vanno a capo. Se qualcosa si sposta inaspettatamente su una riga propria, confrontate la sua ampiezza con le colonne disponibili del layout padre prima di modificare la spaziatura o il contenuto.

Se l’ampiezza selezionata è maggiore del numero di colonne del layout padre, il contenuto occuperà l’intera riga.

Comportamento della presentazione su mobile

Quando il layout padre è impostato per essere visualizzato come presentazione su mobile, la normale ampiezza mobile di questo gruppo di impostazioni non controlla la larghezza finale su mobile nel modo consueto. Il comportamento del layout mobile segue invece l’impostazione di colonna mobile del layout padre.

Se i layout telefono non corrispondono alle vostre aspettative, controllate prima le impostazioni del layout mobile del layout padre. Questo è particolarmente importante quando vi aspettate una presentazione mobile più stretta o più ampia, ma vedete invece una dimensione basata sulla presentazione.

Se avete bisogno di aiuto per individuare queste impostazioni nell’editor, consultate documentazione Shopify sull’editor del tema

Note sull’uso

1. Abbinate la larghezza all’importanza. Assegnate ai contenuti in evidenza un’ampiezza maggiore e mantenete più stretti gli elementi di supporto per una gerarchia visiva più chiara.
2. Controllate prima le colonne del layout padre. Se un elemento continua a spostarsi su una riga propria, la sua ampiezza potrebbe essere maggiore di quanto consentito dal layout padre.
3. Usate le sovrascritture del tablet in modo selettivo. Mantenete il tablet allineato al desktop, a meno che leggibilità o spaziatura non richiedano chiaramente una regolazione separata.
4. Date priorità alla chiarezza su mobile. Scegliete ampiezze mobile che evitino testo compresso, pulsanti irregolari e a capo scomodi.
5. Testate ogni viewport. Esaminate desktop, tablet e mobile separatamente perché la stessa ampiezza può creare allineamenti o spaziature diverse a ogni dimensione.
6. Testate separatamente i layout di presentazione. Quando la presentazione su mobile è attiva, controllate l’impostazione di colonna mobile del layout padre prima di analizzare il comportamento della larghezza.