Impostazioni di padding della sezione

Link in evidenza

1. Documentazione di Company XYZ sulle impostazioni del padding della sezione
2. Documentazione Shopify sulle sezioni e i blocchi
3. Documentazione Shopify sull’editor del tema

Video utili

Video di Shopify Academy: personalizzare il tuo negozio

Video di Shopify Academy: personalizzare il tuo negozio

Usi queste impostazioni per controllare lo spazio sopra e sotto il contenuto di una sezione. Consentono di regolare con precisione quanto ogni parte di una pagina appaia aperta, compatta o collegata tra loro su diverse dimensioni dello schermo. Per una panoramica più ampia del layout basato sulle sezioni, vedere documentazione Shopify su sezioni e blocchi

Impostazioni di padding

Questo gruppo offre controlli separati di padding superiore e inferiore per desktop e mobile. Ciò rende più semplice creare un ritmo verticale coerente senza imporre lo stesso spazio su ogni dispositivo.

Sui schermi più grandi, il padding ha un forte effetto su quanto un layout appaia rifinito e spazioso. Più spazio può aiutare il contenuto in evidenza a risaltare, mentre uno spazio più ridotto può mantenere più efficienti le pagine ricche di prodotti o informazioni.

Sui schermi più piccoli, spesso è necessario ridurre lo spazio. Un valore che su desktop appare equilibrato può sembrare eccessivo su mobile, soprattutto nella parte superiore di una pagina, dove un padding extra spinge il contenuto importante più in basso.

Per ulteriori indicazioni su come si comportano questi controlli, vedere Impostazioni di padding della sezione o la documentazione Shopify sull’editor del tema

Consiglio

Regolate il padding mentre visualizzate le sezioni sopra e sotto quella che state modificando. Le decisioni sullo spazio sono più facili da valutare nel contesto che su una singola sezione isolata.

Bilanciare lo spazio superiore e inferiore

Il padding superiore e inferiore non deve necessariamente coincidere. Valori diversi possono creare transizioni più fluide tra le aree di contenuto e aiutare una sezione a sembrare più naturalmente collegata a ciò che la precede o la segue.

Per esempio, un padding superiore extra può dare maggiore presenza a una nuova area di contenuto, mentre un padding inferiore ridotto può avvicinare visivamente l’area successiva. Questo è particolarmente utile quando si combinano banner, sezioni di testo, raccolte o contenuti guidati dalle immagini.

Se due sezioni adiacenti usano entrambe un padding generoso, lo spazio tra di esse può sembrare molto più ampio del previsto. Quando lo spazio appare troppo libero, riducete prima un lato prima di modificare entrambe le sezioni.

Strategia di spazio per desktop e mobile

I controlli separati per desktop e mobile vi consentono di mantenere un layout spazioso sugli schermi più grandi, rendendo al tempo stesso quelli più piccoli più facili da scansionare. Nella maggior parte dei casi, è preferibile impostare prima lo spazio per desktop e poi perfezionare i valori mobile solo dove il layout appare troppo alto o troppo compresso.

Il padding a zero può essere utile quando volete che aree adiacenti appaiano collegate visivamente. Usatelo con attenzione, però, perché rimuovere troppo spazio può far sembrare il contenuto affollato o ridurre il contrasto tra diversi tipi di contenuto.

Note sull’uso

1. Abbinate lo spazio al contenuto. Usate un padding maggiore per i contenuti in evidenza e uno minore per le aree più dense e orientate alle attività.
2. Controllate insieme le sezioni. Valutate lo spazio insieme ai contenuti vicini, in modo che l’intera pagina risulti equilibrata e non disomogenea.
3. Perfezionate il mobile in modo indipendente. Riducete il padding su mobile quando il contenuto appare troppo in basso sullo schermo o la pagina sembra eccessivamente allungata.
4. Usate intenzionalmente uno spazio non uniforme. Valori diversi in alto e in basso possono creare transizioni migliori rispetto a uno spazio perfettamente corrispondente.
5. Fate attenzione agli spazi cumulativi. Un padding elevato su sezioni adiacenti può creare spazio vuoto non necessario anche quando ogni sezione, presa singolarmente, sembra corretta.
6. Visualizzate entrambe le viewport. Lo spazio su desktop e mobile può risultare sensibilmente diverso, quindi controllate la sezione in entrambe le dimensioni prima di terminare.