Riuscito
Immagine
Aggiungi un’immagine singola con controlli flessibili per dimensioni, ritaglio, didascalia, overlay e layout mobile.
Usa questo blocco per aggiungere un’immagine singola con controlli di visualizzazione flessibili. Puoi regolarne forma, larghezza, comportamento di ritaglio, didascalia, trattamento dell’overlay, allineamento e comportamento del link per adattarla al layout circostante. Per una panoramica più ampia su come questo si inserisce nei contenuti del tema, consulta la documentazione Shopify sulle sezioni e i blocchi
Impostazioni immagine
Sezione intitolata “Impostazioni immagine”Questo gruppo controlla l’immagine stessa e il modo in cui viene visualizzata. Per indicazioni più generali sui controlli relativi alle immagini, consulta la documentazione delle impostazioni delle immagini.
Scegli prima l’immagine, poi perfeziona il modo in cui viene mostrata. Lo stile dell’immagine cambia la forma visiva, mentre la larghezza massima dell’immagine ti consente di mantenerla contenuta o di estenderla sull’intero spazio disponibile. Impostare la larghezza massima dell’immagine su 0 fa sì che l’immagine utilizzi tutta la larghezza disponibile.
Il rapporto d’aspetto è utile quando desideri un layout più uniforme, soprattutto se più immagini compaiono insieme. Il rapporto predefinito mantiene le proporzioni naturali dell’immagine, mentre i rapporti fissi creano una griglia più ordinata ma possono ritagliare l’immagine visibile.
Il rapporto d’aspetto mobile può seguire il rapporto principale oppure usare una propria impostazione. Questo è utile quando un ritaglio ampio su desktop risulta troppo corto o troppo stretto su schermi più piccoli.
Se aggiungi un link, l’immagine diventa cliccabile. Aprirla in una nuova scheda è più utile per destinazioni esterne o download.
I rapporti d’aspetto fissi possono ritagliare i bordi dell’immagine. Controlla sia desktop sia mobile se l’immagine include volti, dettagli del prodotto o testo.
Impostazioni didascalia
Sezione intitolata “Impostazioni didascalia”Usa la didascalia quando l’immagine necessita di un’etichetta, una breve spiegazione o una riga di credito. Puoi posizionarla sopra o sotto l’immagine, quindi regolare allineamento e dimensione del testo in base al suo ruolo.
Le didascalie brevi in genere funzionano meglio. Se la didascalia richiede un’enfasi maggiore, aumenta la dimensione del testo, ma mantienila breve così che l’immagine resti il punto focale.
Impostazioni dell’overlay
Sezione intitolata “Impostazioni dell’overlay”Le impostazioni dell’overlay aggiungono un colore pieno o un gradiente sopra l’immagine. Questo può aiutare a creare uno stile visivo più marcato o migliorare il contrasto della didascalia su fotografie molto cariche.
L’opacità controlla quanto fortemente l’overlay influisce sull’immagine. Un’opacità più bassa preserva più dettagli dell’immagine, mentre un’opacità più alta crea un effetto tonalizzato più drammatico.
Impostazioni di allineamento
Sezione intitolata “Impostazioni di allineamento”Queste impostazioni controllano come il blocco si posiziona nello spazio disponibile su desktop e mobile. Sono più importanti quando l’immagine non occupa tutta la larghezza.
L’allineamento centrato è spesso la scelta più sicura per le immagini singole. L’allineamento a sinistra o a destra può funzionare bene quando l’immagine fa parte di un layout più editoriale o è abbinata a contenuti vicini.
Impostazioni standard del blocco
Sezione intitolata “Impostazioni standard del blocco”Impostazioni colore
Sezione intitolata “Impostazioni colore”Questi controlli consentono di sovrascrivere i colori abituali per questo blocco, inclusi bordo e colore del testo. Usali quando questa immagine deve distinguersi dal layout circostante o quando la didascalia necessita di un trattamento di contrasto più chiaro. Consulta la Impostazioni colore.
Impostazioni di visibilità
Sezione intitolata “Impostazioni di visibilità”Usa i controlli di visibilità per mostrare o nascondere questo blocco in base al dispositivo. È utile quando desideri trattamenti dell’immagine separati per layout desktop e mobile. Consulta la documentazione delle impostazioni di visibilità.
Impostazioni dell’editor
Sezione intitolata “Impostazioni dell’editor”Le impostazioni dell’editor ti aiutano a etichettare chiaramente il blocco nella barra laterale dell’editor. Un titolo editor personalizzato è particolarmente utile quando hai più blocchi immagine nella stessa area. Per l’interfaccia di modifica del blocco, consulta la documentazione Shopify sull’editor del tema
Note sull’uso
Sezione intitolata “Note sull’uso”- Esamina separatamente desktop e mobile. Layout, allineamento, visibilità e comportamento dei media possono variare in base al viewport, quindi verifica entrambe le visualizzazioni prima della pubblicazione.
- Mantieni lo stile di fallback quando puoi. Scelte di colore vuote o predefinite in genere preservano l’aspetto circostante, mentre colori espliciti, gradienti o sovrascritture dei media rendono il blocco più indipendente.
- Considera i media separati come una scelta deliberata. Immagini diverse per desktop e mobile possono migliorare l’adattamento, ma possono anche modificare ritaglio, caricamento, comportamento di fallback e leggibilità.
- Controlla i contenuti importanti dell’immagine. Se l’immagine include volti, dettagli del prodotto o testo, conferma che il ritaglio scelto mantenga leggibile il soggetto su entrambe le dimensioni dello schermo.