Impostazioni immagine

Link in evidenza

1. Documentazione di Company XYZ sulle impostazioni delle immagini
2. documentazione Shopify sull’editor del tema

Video utili

Video di Shopify Academy: personalizzare il tuo negozio

Video di Shopify Academy: personalizzare il tuo negozio

Usate queste impostazioni per controllare l’aspetto, l’adattamento e il comportamento di un’immagine ovunque sia disponibile questo gruppo di immagini. Potete scegliere l’immagine, regolarne la forma e la larghezza, impostare il modo in cui viene ritagliata su desktop e su mobile e, facoltativamente, renderla cliccabile. Per una panoramica più ampia di come vengono modificati gli impostazioni del tema, consultate la documentazione Shopify sull’editor del tema

Per un riepilogo visivo di questi controlli, consultate la reference delle impostazioni immagine.

Selezione dell’immagine

Iniziate scegliendo un’immagine che sia già adatta allo spazio che andrà a occupare. Un file più largo è più adatto per banner e layout orizzontali, mentre le immagini quadrate o verticali in genere risultano più naturali in aree di contenuto più strette.

Se l’immagine include testo, loghi o un soggetto inquadrato da vicino, controllatela di nuovo dopo aver modificato le impostazioni del rapporto d’aspetto. Il ritaglio può rimuovere dettagli importanti vicino ai bordi.

Forma e larghezza

Lo stile dell’immagine modifica la presentazione complessiva dell’immagine. Usate lo stile predefinito per un aspetto neutro, gli angoli arrotondati per un trattamento visivo più morbido oppure un cerchio quando l’immagine è centrata ed è abbastanza semplice da funzionare dentro una cornice circolare.

La larghezza massima dell’immagine controlla quanto grande può apparire l’immagine all’interno del suo spazio disponibile. Impostarla su 0 consente all’immagine di espandersi fino alla larghezza massima disponibile, il che è utile per aree visive ampie. Valori inferiori aiutano a mantenere le immagini più compatte ed equilibrate accanto al testo o ad altri contenuti.

Consiglio

Se un’immagine risulta troppo dominante, riducetene la larghezza massima prima di forzare un ritaglio diverso. In genere questo mantiene la composizione più naturale.

Rapporto d’aspetto

Il rapporto d’aspetto controlla la forma della cornice dell’immagine. Mantenerlo su Default preserva le proporzioni naturali dell’immagine, mentre i rapporti fissi creano un layout più coerente tra immagini diverse.

Usate rapporti fissi quando volete che più immagini si allineino in modo ordinato o quando desiderate un ritmo visivo più intenzionale. I rapporti orizzontali e widescreen sono adatti a immagini ampie, mentre i rapporti quadrati e verticali possono dare alle aree di contenuto più piccole un aspetto più strutturato.

I rapporti d’aspetto fissi possono ritagliare l’immagine su qualsiasi lato. Se il punto focale si trova vicino a un bordo, visualizzate l’anteprima del risultato prima della pubblicazione.

Rapporto su mobile

Il rapporto d’aspetto su mobile consente di regolare la forma dell’immagine per schermi più piccoli senza modificare la presentazione su desktop. È utile quando un ritaglio ampio su desktop diventa troppo basso o poco adatto sui telefoni.

Lasciando l’opzione mobile su Default si usa il rapporto d’aspetto principale. Scegliete un rapporto mobile separato quando l’immagine necessita di più spazio verticale o di un ritaglio più semplice su schermi più piccoli.

Link immagine

Potete aggiungere un link per rendere l’immagine cliccabile, il che è utile per grafiche promozionali, contenuti in evidenza o elementi visivi del brand che devono portare a una destinazione specifica. Le immagini collegate funzionano meglio quando la destinazione appare evidente dal contenuto circostante.

Usate l’opzione di apertura in una nuova scheda solo quando migliora l’esperienza di navigazione, ad esempio per destinazioni esterne. Per la maggior parte della navigazione interna, aprire nella stessa scheda risulta più naturale.

Note sull’uso

1. Scegliete l’immagine sorgente giusta. Partite da un’immagine che corrisponda già al layout previsto, così avrete bisogno di un ritaglio meno aggressivo.
2. Bilanciate le dimensioni con i controlli di larghezza. Regolate la larghezza massima quando un’immagine appare troppo grande invece di fare affidamento solo sulle modifiche del rapporto d’aspetto.
3. Controllate i ritagli su mobile. Rivedete separatamente gli schermi più piccoli, soprattutto quando l’immagine su desktop è ampia o contiene dettagli focali importanti.
4. Confrontate le impostazioni di desktop e mobile. Rivedete entrambe le dimensioni del viewport quando modificate ritaglio, allineamento, visibilità o opzioni media, perché possono produrre risultati diversi sullo schermo.
5. Preservate lo stile di fallback quando necessario. Lasciate vuoti, trasparenti o con stile predefinito i valori in atto quando volete che l’area immagine mantenga l’aspetto e il comportamento integrati nel tema.
6. Usate le sostituzioni in modo intenzionale. Scegliete colori espliciti, gradienti o media alternativi solo quando volete che l’area immagine locale si distingua dai contenuti circostanti.
7. Proteggete i contenuti chiave. Evitate rapporti fissi per immagini con testo da bordo a bordo, loghi o inquadrature strette, a meno che non abbiate verificato che il ritaglio funzioni bene.