Riuscito
Impostazioni di larghezza
Regola la larghezza del contenuto e della sezione per rifinire leggibilità, spaziatura e impatto visivo.
Usi queste impostazioni per controllare quanto ampio appare complessivamente un’area e quanto può estendersi il suo contenuto all’interno di quello spazio. Sono utili quando si desidera che una parte della pagina risulti più leggibile, più ariosa o più distinta visivamente senza modificare il design generale.
Impostazioni di larghezza
Sezione intitolata “Impostazioni di larghezza”Questo gruppo include un controllo per l’area interna del contenuto e uno per il wrapper esterno della sezione. Insieme, determinano come testo, immagini e sfondi occupano la pagina.
Può anche consultare documentazione Company XYZ su Impostazioni di larghezza per altri esempi di come queste scelte di larghezza funzionano in pratica.
Per una panoramica più ampia di come queste impostazioni si inseriscono nel layout della vetrina, veda documentazione Shopify sulle sezioni e i blocchi
Larghezza del contenuto
Sezione intitolata “Larghezza del contenuto”La larghezza del contenuto definisce la larghezza massima del materiale all’interno dell’area. Di solito è l’impostazione più importante perché influisce direttamente sul comfort di lettura, sulle dimensioni dei media e su quanto il layout appare denso o arioso.
Larghezze più strette sono spesso migliori per i contenuti ricchi di testo, perché lunghezze di riga più brevi sono più facili da scansionare. Larghezze maggiori tendono a essere adatte a layout guidati dalle immagini, griglie di prodotti e contenuti a più colonne che richiedono più spazio orizzontale.
Se mantiene l’impostazione del tema condivisa, l’area resta allineata al resto del sito. Se sceglie una larghezza personalizzata, può rendere quell’area intenzionalmente più raccolta o più ampia.
La larghezza del contenuto si adatta comunque agli schermi più piccoli, quindi questa scelta influisce principalmente sull’aspetto del layout sui viewport più grandi.
Larghezza della sezione
Sezione intitolata “Larghezza della sezione”La larghezza della sezione controlla il wrapper esterno attorno al contenuto. Questo è particolarmente importante quando l’area utilizza un colore di sfondo, un’immagine o un altro trattamento visivo che si estende oltre il contenuto stesso.
Un wrapper che segue la larghezza del contenuto crea un aspetto contenuto. Scelte di wrapper più ampie rendono l’area più estesa e possono dare più presenza ai trattamenti di sfondo.
Valori di sfondo vuoti, trasparenti o in stile predefinito in genere mantengono intatta la stilizzazione del tema circostante. Colori espliciti, gradienti o sfondi basati su media rendono l’area più indipendente e possono separarla visivamente dalle sezioni adiacenti.
Le opzioni full-width e full-bleed sono più utili quando desidera che l’area esterna si estenda maggiormente sulla pagina. In pratica, di solito si tratta di una decisione visiva più che di una decisione sul layout di lettura.
Esamini insieme larghezza del contenuto e larghezza della sezione quando usa trattamenti di sfondo molto marcati. Un’area esterna molto ampia con un contenuto interno stretto può sembrare intenzionale, ma può anche risultare sbilanciata se lo spazio è troppo ridotto o troppo ampio.
Scelta tra larghezze condivise o personalizzate
Sezione intitolata “Scelta tra larghezze condivise o personalizzate”Usi l’impostazione del tema condivisa quando desidera un ritmo della pagina coerente tra aree diverse. Di solito è la scelta più sicura per mantenere un allineamento pulito da un’area alla successiva.
Usi larghezze personalizzate quando un’area specifica necessita di una presentazione diversa. I motivi comuni includono il miglioramento della leggibilità per testi più lunghi, l’offerta di più spazio ai media o la messa in evidenza di un’area in primo piano.
Anteprima delle modifiche in modo accurato
Sezione intitolata “Anteprima delle modifiche in modo accurato”Le modifiche alla larghezza possono apparire diverse nell’editor rispetto alla pagina live, soprattutto con layout più ampi e design da bordo a bordo. Controlli la visualizzazione della vetrina prima di decidere se spaziatura ed equilibrio siano corretti.
Per dettagli su come lavorare nell’editor, veda documentazione Shopify sull’editor del tema
Note sull’uso
Sezione intitolata “Note sull’uso”- Dare priorità alla leggibilità. Usi larghezze del contenuto più strette per testi lunghi, in modo che la lunghezza delle righe resti comoda da leggere.
- Lasci spazio ai media quando serve. Scelga larghezze del contenuto più ampie per layout ricchi di immagini o a più colonne che necessitano di più spazio orizzontale.
- Usi la larghezza esterna per l’impatto visivo. Modifichi la larghezza della sezione quando sfondi o styling da bordo a bordo devono avere più peso sulla pagina.
- Mantenga coerente lo stile dello sfondo. Lasci vuoti i valori di sfondo o mantenga quelli predefiniti quando desidera che la stilizzazione del tema circostante continui; usi colori espliciti, gradienti o media quando vuole che l’area si distingua.
- Mantenga intenzionale l’allineamento. Usi l’impostazione del tema condivisa quando desidera che le aree siano allineate in modo coerente in tutto il sito.
- Anteprima fuori dall’editor. Controlli la visualizzazione della pagina live prima di finalizzare layout ampi, full-width o full-bleed.