Salta ai contenuti

Impostazioni di layout

Controlli le larghezze globali del negozio e lo stile degli angoli per un layout più pulito e coerente.

Queste impostazioni controllano la struttura complessiva della vetrina, incluso quanto possono espandersi le aree di contenuto, quanto si estendono gli sfondi delle sezioni e quanto arrotondati appaiono molti elementi dell’interfaccia. Poiché incidono sul tema a livello globale, è meglio usarle per definire una direzione di design chiara prima di perfezionare le singole sezioni nell’editor del tema

Tutte le sezioni possono comunque offrire le proprie impostazioni di larghezza, quindi consideri questo gruppo come la base predefinita del layout. Può anche consultare il riferimento correlato Layout per ulteriori indicazioni.

Il raggio di arrotondamento aggiunge angoli arrotondati alla maggior parte degli elementi del frontend. Valori più bassi creano un aspetto più netto e pulito, mentre valori più alti rendono la vetrina più morbida ed espressiva.

Usi questa impostazione come parte del suo stile complessivo del brand, non solo come ritocco decorativo. Il risultato migliore di solito deriva dalla scelta di un raggio che risulti naturale su pulsanti, schede, campi di input e cornici dei media.

La larghezza dei contenuti imposta la larghezza massima principale dei contenuti del tema su schermi più ampi. Questa è la principale impostazione di layout e ha il maggiore impatto su quanto le pagine risultano spaziose o concentrate.

Una larghezza più stretta può migliorare la leggibilità e creare un aspetto più editoriale. Una larghezza maggiore offre più spazio alle griglie prodotto, alle sezioni con immagini e ai contenuti promozionali, ma layout molto ampi possono rendere più difficile la scansione delle aree ricche di testo.

L’editor può far apparire le modifiche alla larghezza più contenute di quanto non siano nella vetrina effettiva. Controlli l’anteprima live dopo aver apportato modifiche al layout, soprattutto su desktop.

La larghezza della sezione influisce principalmente sulle sezioni che usano uno sfondo. Controlla se questi sfondi restano allineati alla larghezza principale dei contenuti oppure si estendono di più per una presentazione più immersiva.

Mantenere gli sfondi delle sezioni allineati ai contenuti crea una cornice ordinata e coerente. Trattamenti di sfondo più ampi possono aiutare le promozioni in evidenza o le sezioni guidate dalle immagini a distinguersi, ma usarli troppo spesso può rendere la pagina meno strutturata. Quando lascia uno sfondo nel suo stile predefinito o trasparente, di solito mantiene lo stile di fallback circostante; aggiungere un colore pieno, un gradiente o uno sfondo basato sui media rende quell’area più indipendente dal resto della pagina.

Questi controlli funzionano meglio come un unico sistema. La larghezza dei contenuti definisce la cornice principale per la lettura e la navigazione, la larghezza della sezione modella il rapporto tra le aree di sfondo e quella cornice, e il raggio di arrotondamento definisce il tono dell’interfaccia. Per una panoramica più ampia su come sono organizzate le aree del tema, consulti la documentazione Shopify sulle sezioni e i blocchi

Una larghezza dei contenuti contenuta abbinata a sfondi occasionalmente più ampi crea spesso un layout equilibrato che resta comunque dinamico. Se preferisce un aspetto più ampio, si assicuri che le immagini, gli spazi e la lunghezza del testo possano sostenere questa maggiore scala.

  1. Imposti prima la cornice globale. Scelga la direzione generale della larghezza prima di regolare le singole sezioni, in modo che il tema rimanga visivamente coerente.
  2. Anteprima nella vetrina. Riveda le modifiche al layout fuori dall’editor per valutare con maggiore precisione spaziatura e larghezza.
  3. Preservi la leggibilità. Eviti layout dei contenuti molto ampi se le sue pagine dipendono molto da titoli lunghi, rich text o informazioni dettagliate sui prodotti.
  4. Usi gli sfondi ampi con intenzione. Riservi trattamenti di sezione più ampi alle aree che beneficiano di un maggiore accento visivo. Mantenga sfondi predefiniti o trasparenti quando desidera che la sezione si integri nel layout circostante.
  5. Mantenga uno stile coerente. Scelga un raggio di arrotondamento che corrisponda al suo brand, in modo che gli elementi comuni dell’interfaccia appaiano unificati.