Immagine con testo

Link in evidenza

1. Documentazione Shopify su sezioni e blocchi
2. Documentazione Shopify sulla personalizzazione delle sezioni
3. Documentazione Company XYZ sul blocco Image
4. Documentazione Company XYZ sul blocco Rich text
5. Documentazione Company XYZ sulle impostazioni dell’header
6. Documentazione Company XYZ sulle impostazioni di padding della sezione
7. Documentazione Company XYZ sulle impostazioni dello sfondo della sezione
8. Documentazione Company XYZ sulle impostazioni dei separatori
9. Documentazione Company XYZ sulle impostazioni di visibilità
10. Documentazione Company XYZ sulle impostazioni della larghezza del layout
11. Documentazione Shopify sull’editor del tema

Video utili

Video Shopify Academy: personalizzare il proprio negozio

Video Shopify Academy: personalizzare il proprio negozio

Usa questa sezione per combinare un’immagine e contenuti scritti in un layout diviso e ordinato. Puoi riordinare i blocchi per scegliere quale lato mostrare per primo, quindi regolare allineamento, disposizione, spaziatura e stile dei colori in base ai diversi tipi di contenuto e alle dimensioni dello schermo. Per una panoramica più ampia di come questa sezione si integra nel layout del tuo negozio, consulta la documentazione Shopify su sezioni e blocchi

Impostazioni principali

Queste impostazioni definiscono il comportamento dei due lati come layout prima di applicare lo stile ai singoli blocchi.

1. Allineamento dei contenuti controlla l’allineamento verticale dell’immagine e del testo. L’allineamento in alto è generalmente più adatto ai testi lunghi, mentre quello centrale è indicato per contenuti promozionali più brevi.
2. Contenuto adesivo mantiene visibile il lato più corto durante lo scorrimento su desktop. È particolarmente utile quando un lato è molto più alto dell’altro, ad esempio con un’area di testo lunga accanto a una singola immagine.
3. Disponi in colonna su mobile trasforma il layout in un’unica colonna sugli schermi più piccoli. Usalo quando i contenuti affiancati risultano troppo ravvicinati o quando desideri una sequenza di lettura più chiara.
4. Disponi in colonna su desktop crea un layout verticale anche sugli schermi più grandi. Può essere adatto a presentazioni più editoriali o quando l’immagine deve trovarsi chiaramente sopra o sotto il testo.

Il contenuto adesivo è disponibile solo su desktop e non si applica quando è attiva la disposizione in colonna. Se desideri l’effetto adesivo, mantieni la sezione affiancata su desktop.

Impostazioni specifiche della sezione

Impostazioni dei colori

Queste sostituzioni dei colori consentono alla sezione di usare uno stile di testo personalizzato invece di affidarsi completamente ai colori generali del tema. Sono particolarmente utili quando l’immagine, lo sfondo o il tono dei contenuti richiedono un contrasto più marcato o una presentazione più coerente con il brand.

1. Regola insieme i colori di icone, testo e sottotitolo per mantenere la coerenza visiva della sezione.
2. Verifica nuovamente la leggibilità dopo aver modificato i colori, soprattutto se utilizzi anche sovrapposizioni o un’immagine di sfondo.
3. Usa le sostituzioni in modo selettivo nella pagina, così la sezione si distingue per un motivo preciso e non solo perché ha uno stile diverso.

Tipi di blocco supportati

1. Image
2. Rich text

Questa sezione supporta fino a 4 blocchi, ma generalmente dà il meglio di sé come layout semplice in due parti, con un blocco visivo e uno testuale. Per le nozioni di base sulla modifica, consulta la documentazione Shopify sulla personalizzazione delle sezioni

Blocco Image

Il blocco Image fornisce il lato visivo del layout, con controlli per forma, dimensione e rapporto d’aspetto dell’immagine, didascalie, sovrapposizioni e visibilità. Consulta la documentazione Company XYZ sul blocco Image.

1. Usa insieme larghezza massima dell’immagine e rapporto d’aspetto per controllare l’impatto visivo dell’immagine.
2. Aggiungi una didascalia solo quando fornisce un contesto utile, ad esempio un’etichetta, una nota di supporto o un credito.
3. Usa con moderazione le impostazioni di sovrapposizione se l’immagine deve mantenere un aspetto nitido e dettagliato.

Blocco Rich text

Il blocco Rich text fornisce il lato scritto del layout, inclusi intestazioni, testo principale, icone, un pulsante e uno stile di sfondo opzionale a livello di blocco. Consulta la documentazione Company XYZ sul blocco Rich text.

1. Usa questo blocco per il messaggio principale, i dettagli di supporto e un’azione successiva chiara.
2. Se aggiungi uno sfondo del blocco, assicurati che valorizzi l’immagine invece di competere con essa.
3. Mantieni lo stile del pulsante coerente con l’importanza dell’azione, così il layout non risulta troppo affollato.

Impostazioni standard della sezione

Impostazioni dell’header

Le impostazioni dell’header aggiungono un’introduzione opzionale sopra il layout principale. Usale quando l’immagine e il testo richiedono un’intestazione, una didascalia, un’icona o un’azione a livello di sezione condivisi prima dell’inizio del contenuto dei blocchi.

Impostazioni di padding

Le impostazioni di padding controllano lo spazio sopra e sotto la sezione. Un padding maggiore permette ai layout incentrati sulle immagini di respirare, mentre una spaziatura più compatta funziona meglio quando la sezione si trova all’interno di una sequenza di blocchi di contenuto correlati.

Impostazioni dello sfondo sezione

Le impostazioni dello sfondo sezione consentono di aggiungere un colore, una sfumatura, un’immagine o un video dietro l’intera sezione. Queste impostazioni possono creare un’atmosfera visiva più marcata, ma possono anche influire sul contrasto e sulla percezione di ampiezza del layout.

Attenzione

Se nella sezione è già presente un’immagine importante, un’immagine o un video di sfondo deciso può rendere il layout affollato. Semplifica lo sfondo o i contenuti multimediali in primo piano se diventa più difficile analizzare il contenuto.

Impostazioni dei separatori

Le impostazioni dei separatori aggiungono una linea nella parte superiore o inferiore della sezione. Usale per creare confini più chiari quando questo layout appare tra aree di contenuto simili.

Impostazioni di visibilità

Le impostazioni di visibilità controllano se la sezione viene visualizzata su desktop, mobile o entrambi. Sono particolarmente utili quando desideri una presentazione mobile dedicata invece di affidarti a un unico layout ovunque.

Impostazioni di larghezza

Le impostazioni di larghezza controllano sia la larghezza del contenuto interno sia quella della sezione esterna. Larghezze più ridotte rendono il testo più facile da leggere, mentre impostazioni più ampie danno ai layout incentrati sulle immagini un aspetto più immersivo.

L’anteprima dell’editor può limitare la chiarezza con cui vengono visualizzate le modifiche alla larghezza; esamina quindi gli aggiornamenti importanti sulla pagina live prima di confermarli. Per maggiori dettagli sull’interfaccia di modifica, consulta la documentazione Shopify sull’editor del tema

Note sull’uso

1. Inizia dall’ordine dei blocchi. Posiziona prima l’immagine o il testo in base a quale dei due deve guidare la storia o la promozione.
2. Usa il contenuto adesivo con layout asimmetrici. È più efficace quando un lato è chiaramente più corto dell’altro su desktop.
3. Mantieni chiara la gerarchia visiva. Se usi insieme sovrapposizioni, colori del testo personalizzati e sfondi, riduci uno di questi elementi per preservare la leggibilità.
4. Abbina la larghezza del layout al contenuto. Usa larghezze più ridotte per lo storytelling ricco di testo e layout più ampi per le sezioni incentrate sulle immagini.
5. Controlla i layout disposti in colonna su mobile. Assicurati che l’ordine di lettura, il ritaglio dell’immagine e la posizione del pulsante risultino intenzionali anche sugli schermi più piccoli.
6. Esamina entrambe le dimensioni della viewport. I controlli desktop e mobile possono produrre comportamenti diversi per allineamento, visibilità e contenuti multimediali; testa quindi la sezione su entrambi.
7. Considera i blocchi aggiuntivi come un cambiamento progettuale. L’aggiunta di altri blocchi può modificare abbastanza l’equilibrio della sezione da far perdere centralità all’originario layout semplice diviso.
8. Scegli i contenuti multimediali tenendo conto del ritaglio. Contenuti multimediali separati per desktop e mobile possono migliorare l’adattamento, ma modificano anche inquadratura, caricamento e leggibilità.
9. Mantieni leggibili gli stati dei moduli. Se utilizzi contenuti che dipendono dall’inserimento di dati da parte del cliente, assicurati che gli stati vuoto, di errore e di successo restino facili da leggere.
10. Controlla il contenuto adesivo nel contesto. Esaminalo insieme alle sezioni vicine e su ogni dimensione dello schermo, così durante lo scorrimento non nasconde né sovraffolla contenuti importanti.