Impostazioni dello sfondo della sezione

Link in evidenza

1. Documentazione di Shopify sulle sezioni e i blocchi
2. Documentazione di Company XYZ sull’uso dei video

Video utili

Video di Shopify Academy: personalizzare il tuo negozio

Video di Shopify Academy: personalizzare il tuo negozio

Usa questo gruppo di impostazioni per controllare lo sfondo dietro il contenuto di una sezione. Per un contesto di configurazione più ampio, consulta la documentazione di Shopify sulle sezioni e i blocchi. Puoi mantenere uno stile semplice con un colore, aggiungere profondità con i gradienti oppure usare sfondi con immagini e video insieme a sovrapposizioni per creare un impatto visivo maggiore, mantenendo al contempo la leggibilità.

Stile dello sfondo

Scegli lo stile più discreto adatto al ruolo della sezione.

1. Usa background color per sezioni pulite e con poche distrazioni.
2. Usa background gradient quando vuoi aggiungere profondità o applicare lo stile del brand.
3. Usa background image per fotografie, texture o illustrazioni.
4. Usa background video quando il movimento supporta chiaramente il messaggio.

Se viene applicato un gradiente, questo ha la priorità rispetto all’impostazione del colore uniforme corrispondente.

Se un colore di sfondo o un colore di sovrapposizione non sembra aggiornarsi, verifica se è impostato un gradiente. I gradienti sostituiscono il colore uniforme equivalente.

Controlli della sovrapposizione

Le impostazioni della sovrapposizione aiutano a mantenere leggibili testo, pulsanti e altri contenuti sopra gli sfondi con immagini o video. Puoi usare una sovrapposizione uniforme o con gradiente, quindi regolare l’opacità per bilanciare la chiarezza con la quantità di contenuto multimediale ancora visibile.

Un’opacità più bassa lascia visibile una parte maggiore dello sfondo. Un’opacità più alta è generalmente migliore per le sezioni con testo più lungo, caratteri più piccoli o più azioni.

Contenuti multimediali di sfondo

Le immagini sono generalmente il modo più sicuro per aggiungere ricchezza visiva senza rendere la pagina troppo affollata. I video funzionano meglio quando il movimento è discreto e supporta il contenuto invece di competere con esso.

Per gli sfondi video, usa clip brevi che abbiano senso anche senza audio e che non si basino su dettagli minuziosi. Per indicazioni pratiche, consulta la documentazione di Company XYZ sulle best practice per i file video.

Attenzione

Contenuti multimediali di sfondo grandi o molto ricchi di elementi possono rendere più difficile la scansione di una sezione, soprattutto sui dispositivi mobili. Se la leggibilità diventa incoerente, semplifica i contenuti multimediali o rafforza la sovrapposizione.

Contenuti multimediali specifici per dispositivi mobili

Puoi impostare immagini o video di sfondo separati per dispositivi mobili quando l’asset desktop viene ritagliato male o perde il punto focale sugli schermi più piccoli. Se lasci vuota l’impostazione specifica per dispositivi mobili, vengono utilizzati l’immagine o il video di sfondo principale.

Usa un asset specifico per dispositivi mobili quando il soggetto richiede un ritaglio diverso, quando una composizione verticale funziona meglio o quando il video desktop risulta troppo ampio o visivamente denso sui telefoni.

Scelte pratiche per la configurazione

I risultati migliori derivano generalmente dall’abbinamento dello stile dello sfondo alla densità del contenuto della sezione.

1. Scegli color or gradient only per le sezioni con molto contenuto, dove la chiarezza è fondamentale.
2. Scegli image plus overlay per le sezioni promozionali o editoriali che richiedono maggiore atmosfera.
3. Scegli video plus overlay solo quando il movimento aggiunge un valore evidente e la sezione dispone di spazio sufficiente per mostrarlo al meglio.
4. Aggiungi mobile-specific media solo quando l’asset principale crea un problema concreto di ritaglio o leggibilità.

Note sull’uso

1. Start simple. Inizia con un colore o un gradiente prima di aggiungere contenuti multimediali e aumenta la complessità visiva solo quando migliora il messaggio della sezione.
2. Check contrast early. Regola prima la sovrapposizione, prima di modificare gli stili del testo, in modo che titoli, testo del corpo e pulsanti rimangano facili da leggere.
3. Review both viewports. I controlli desktop e mobile possono produrre ritagli, allineamento, visibilità e comportamenti dei contenuti multimediali diversi, quindi verifica entrambi prima della pubblicazione.
4. Expect fallback styling. I valori vuoti, trasparenti o dello stile predefinito generalmente mantengono l’aspetto esistente, mentre colori, gradienti o contenuti multimediali espliciti rendono la sezione più indipendente.
5. Use video selectively. Riserva gli sfondi animati alle aree di maggiore impatto invece di ripeterli in molte sezioni.
6. Preserve hierarchy. Gli stili di sfondo marcati attirano l’attenzione, quindi usali dove vuoi che la sezione risalti maggiormente.