Immagine

Link in evidenza

1. Documentazione Shopify sulle sezioni e i blocchi
2. Documentazione Company XYZ sulle impostazioni dell’header
3. Documentazione Company XYZ sulle impostazioni del padding della sezione
4. Documentazione Company XYZ sulle impostazioni dello sfondo della sezione
5. Documentazione Company XYZ sulle impostazioni dei separatori
6. Documentazione Company XYZ sulle impostazioni di visibilità
7. Documentazione Company XYZ sulle impostazioni della larghezza del layout

Video utili

Video Shopify Academy: personalizzare il proprio negozio

Video Shopify Academy: personalizzare il proprio negozio

Usa questa sezione per mettere in evidenza un’immagine con controlli di visualizzazione flessibili e contenuti di supporto opzionali. Per una panoramica più ampia dei contenuti del tema basati sulle sezioni, consulta la documentazione Shopify sulle sezioni e i blocchi. È ideale per fotografie editoriali, banner semplici, richiami promozionali e separatori visivi collegati tra altre sezioni.

Impostazioni dell’immagine

Queste impostazioni controllano l’immagine stessa, inclusi forma, larghezza, comportamento del ritaglio e collegamento opzionale. In genere, le scelte più importanti sono larghezza e proporzioni, poiché influiscono maggiormente sulla rilevanza visiva dell’immagine nel layout.

Usa l’impostazione della larghezza massima dell’immagine per decidere se l’immagine deve avere un effetto immersivo o contenuto. Un’immagine a larghezza completa crea un impatto maggiore, mentre una larghezza limitata spesso risulta più pulita e facile da abbinare ai contenuti circostanti.

Le impostazioni delle proporzioni consentono di mantenere una forma coerente anche quando le immagini originali variano. Scegli le proporzioni naturali quando la composizione è l’aspetto più importante e usa proporzioni fisse quando desideri un layout più uniforme nella pagina. Le proporzioni mobili separate sono particolarmente utili quando un ritaglio desktop risulta troppo largo o troppo stretto sugli schermi più piccoli.

Lo stile dell’immagine offre un trattamento visivo rapido senza modificare il file. Gli angoli arrotondati sono generalmente adatti ai layout editoriali più delicati, mentre un ritaglio circolare funziona meglio quando l’immagine caricata è già quasi quadrata.

Le proporzioni forzate possono ritagliare l’immagine. Controlla sia la visualizzazione desktop sia quella mobile, in modo che le parti importanti dell’immagine rimangano visibili.

Se aggiungi un link, mantienilo strettamente correlato all’immagine, così la sezione risulterà intenzionale anziché puramente decorativa.

Impostazioni delle didascalie

Usa l’area della didascalia per aggiungere una breve nota sopra o sotto l’immagine. È utile per i crediti fotografici, una breve descrizione o un piccolo contesto di supporto che deve rimanere associato al contenuto multimediale.

Le didascalie in alto aiutano a introdurre l’immagine prima che venga visualizzata, mentre quelle in basso sono generalmente più adatte ai crediti o ai dettagli secondari. Mantieni breve il testo della didascalia, così supporterà l’immagine senza competere con essa.

Impostazioni della sovrapposizione

Le impostazioni della sovrapposizione aggiungono un colore pieno o un gradiente sopra l’immagine. Sono utili per attenuare un’immagine ricca di dettagli, aggiungere atmosfera o migliorare il contrasto quando l’immagine si trova vicino ad altri elementi visivi.

Una sovrapposizione discreta spesso produce il massimo effetto con il minimo impatto visivo. Le sovrapposizioni marcate possono essere efficaci per immagini drammatiche, ma possono anche nascondere i dettagli se utilizzate in modo eccessivo.

Impostazioni standard della sezione

Impostazioni dell’header

Usa le Impostazioni dell’header condivise per aggiungere una didascalia, un titolo, un sottotitolo, un’icona e un pulsante opzionale sopra l’area dell’immagine. In questa sezione, l’header è utile quando l’immagine richiede un contesto o quando desideri trasformare la sezione in un semplice richiamo visivo con un’azione chiara.

Mantieni il pulsante strettamente collegato al messaggio dell’immagine o del titolo. Sui dispositivi mobili, la posizione del pulsante e il comportamento a larghezza completa possono rendere più facile notare e toccare l’invito all’azione.

Impostazioni di padding

Usa le Impostazioni di padding condivise per controllare lo spazio sopra e sotto la sezione. Un padding maggiore aiuta un’immagine in evidenza a risaltare, mentre una spaziatura più stretta la fa apparire più collegata ai contenuti vicini.

Spesso vale la pena regolare separatamente la spaziatura desktop e mobile, poiché le immagini grandi possono risultare equilibrate su desktop ma eccessivamente alte sugli schermi più piccoli.

Impostazioni dello sfondo della sezione

Usa le Impostazioni dello sfondo della sezione condivise per aggiungere colore, gradienti, immagini o video dietro la sezione. Questo può aiutare a presentare l’immagine come un blocco di contenuto progettato anziché come una risorsa indipendente.

Le scelte di sfondo vuoto o trasparente generalmente preservano lo stile del tema circostante. Colori di sfondo, gradienti o contenuti multimediali più espliciti fanno apparire la sezione più autonoma.

Se l’immagine principale è già ricca di dettagli, usa con moderazione gli effetti di sfondo, così la sezione non risulterà sovraccarica.

Impostazioni dei separatori

Usa le Impostazioni dei separatori condivise per inserire una linea nella parte superiore o inferiore della sezione. È un modo semplice per distinguere l’immagine dai contenuti circostanti senza aggiungere peso visivo.

Gli stili di separatore discreti sono generalmente i più adatti quando l’immagine stessa è il punto focale principale.

Impostazioni di visibilità

Usa le Impostazioni di visibilità condivise per mostrare o nascondere la sezione in base al dispositivo. È utile quando desideri un trattamento dell’immagine per desktop e un ritaglio o una sezione sostitutiva diversa per i dispositivi mobili.

La visibilità e le scelte multimediali specifiche per dispositivo possono modificare layout, allineamento e leggibilità. Controlla quindi entrambe le dimensioni della finestra prima di pubblicare.

Nascondi la sezione su un dispositivo solo quando un’altra sezione o scelta di layout svolge chiaramente meglio la stessa funzione.

Impostazioni di larghezza

Usa le Impostazioni di larghezza condivise per controllare la larghezza del contenuto e quella esterna della sezione. In questa sezione, la larghezza del contenuto determina quanto possono apparire estesi l’immagine e i contenuti dell’header, mentre la larghezza della sezione è soprattutto importante quando aggiungi uno sfondo o desideri estendere maggiormente il contenitore della sezione.

Una larghezza più stretta può dare alla sezione un aspetto più editoriale, mentre impostazioni più ampie creano una presentazione più immersiva. Quando possibile, visualizza le modifiche alla larghezza nella pagina attiva, poiché l’editor potrebbe non riflettere sempre con precisione il layout finale.

Note sull’uso

1. Proteggi la composizione. Controlla i ritagli su desktop e dispositivi mobili ogni volta che usi proporzioni forzate.
2. Adatta la larghezza allo scopo. Usa larghezze maggiori per creare impatto e larghezze minori per un aspetto più contenuto ed editoriale.
3. Mantieni brevi le didascalie. Le didascalie brevi aggiungono contesto senza distogliere l’attenzione dall’immagine.
4. Usa con attenzione le sovrapposizioni. Aggiungi solo la quantità necessaria per migliorare atmosfera o chiarezza senza appiattire l’immagine.
5. Semplifica gli elementi in competizione. Se immagine, header, pulsante e sfondo richiedono tutti attenzione, riduci uno o due elementi, così la sezione avrà un punto focale chiaro.