Collage

Link in evidenza

1. Documentazione Company XYZ sulla sezione collage
2. Documentazione Shopify sulle sezioni e i blocchi
3. Documentazione Company XYZ sul blocco banner
4. Documentazione Company XYZ sul blocco articolo del blog
5. Documentazione Company XYZ sul blocco modulo di contatto
6. Documentazione Company XYZ sul blocco immagine
7. Documentazione Company XYZ sul blocco prodotto
8. Documentazione Company XYZ sul blocco Rich text
9. Documentazione Company XYZ sul blocco testimonianza
10. Documentazione Company XYZ sul blocco video
11. Documentazione Company XYZ sulle impostazioni degli header
12. Documentazione Company XYZ sulle impostazioni degli sfondi della sezione
13. Documentazione Company XYZ sulle impostazioni del padding della sezione
14. Documentazione Company XYZ sulle impostazioni dei separatori
15. Documentazione Company XYZ sulle impostazioni di visibilità
16. Documentazione Company XYZ sulle impostazioni delle larghezze del layout

Video utili

Video Shopify Academy: personalizzare il tuo negozio

Video Shopify Academy: personalizzare il tuo negozio

Usa Collage per creare un layout a due colonne con contenuti misti e un aspetto più editoriale, in stile bento. È una scelta valida per landing page e layout narrativi in cui si desidera combinare promozioni, media, prodotti, testimonianze e testo di supporto in un’unica sezione strutturata. Per il modello di sezione più ampio alla base di questo tipo di layout, consulta documentazione Shopify sulle sezioni e i blocchi

Il layout presenta automaticamente il primo blocco come blocco grande. È possibile saperne di più su comportamento della sezione Collage.

Impostazioni principali

I controlli principali del layout definiscono il modo in cui il collage si distribuisce tra desktop e mobile. Queste impostazioni sono particolarmente importanti quando si combinano diversi tipi di blocchi e si cerca di creare una chiara gerarchia visiva.

1. Collage style controlla se il blocco grande in evidenza appare per primo a sinistra oppure per ultimo a destra su desktop. Su mobile, la stessa scelta determina anche se il primo blocco appare in alto o in basso.
2. Stack on mobile converte la sezione in un layout mobile a colonna singola. Usalo quando i blocchi affiancati risultano troppo compressi o quando vuoi un flusso di lettura più semplice.
3. Stretch content vertically fa sì che i blocchi nella stessa riga abbiano l’altezza del blocco più alto. In genere crea una griglia più pulita quando combini testo, schede e media con altezze naturali diverse.

Il primo blocco è sempre il blocco grande. Se un elemento specifico deve guidare il layout, inserisci quel blocco per primo.

Nota

I controlli della larghezza del blocco non modificano la larghezza della colonna in questa sezione. Ogni blocco si estende per riempire la propria colonna, quindi usa l’ordine dei blocchi, il rapporto d’aspetto e la lunghezza del contenuto per definire invece il layout.

Impostazioni colore

Questo gruppo consente di sovrascrivere i colori del testo, del sottotitolo e dell’icona della sezione senza modificare la palette più ampia del tema. È particolarmente utile quando si aggiunge uno sfondo personalizzato alla sezione o si desidera che questa sezione abbia un aspetto visivamente distinto.

Controlla attentamente il contrasto se usi un’immagine, una sfumatura o un video dietro il contenuto. Una rapida sovrascrittura del colore qui è spesso sufficiente per mantenere leggibili titoli e testo di supporto.

Tipi di blocco supportati

1. Banner
2. Articolo del blog
3. Modulo di contatto
4. Immagine
5. Prodotto
6. Rich text
7. Testimonianza
8. Video

Banner

Usa Banner per promozioni, messaggi di campagna o un riquadro in evidenza ricco dal punto di vista visivo. Supporta media di sfondo propri, contenuto in primo piano, immagine in primo piano opzionale e comportamento del link, rendendolo uno dei blocchi più flessibili di questa sezione. Scopri di più sul Banner block.

1. Usa Banner per primo quando vuoi un blocco di apertura in stile hero.
2. Mantieni il testo conciso se vuoi che il blocco mantenga una forma più controllata.
3. Gli stili di link per l’intero blocco funzionano meglio quando il banner ha una sola destinazione chiara.

Articolo del blog

Usa Articolo del blog per mettere in evidenza contenuti editoriali all’interno del collage. Recupera un articolo selezionato e ti permette di regolare la presentazione della scheda in modo che si adatti al resto del layout. Scopri di più sul Articolo del blog.

1. Usa impostazioni di testo compatte quando l’articolo è un elemento di supporto e non il focus principale.
2. Le schede in stile Banner conferiscono all’immagine in evidenza un maggiore peso visivo.

Modulo di contatto

Usa Modulo di contatto quando vuoi un blocco orientato alla risposta all’interno del collage, come richieste, prompt di supporto o acquisizione di lead. Include controlli propri per intestazione, pulsante, sfondo e colori. Scopri di più sul Modulo di contatto.

1. Mantieni breve il testo introduttivo in modo che il modulo resti facile da scansionare.
2. Uno sfondo personalizzato del blocco può aiutare il modulo a distinguersi dai blocchi di contenuto vicini.

Immagine

Usa Immagine per fotografie, asset di brand, elementi visivi di supporto o riquadri visivi collegati. Include controlli per rapporto d’aspetto, didascalia, overlay, allineamento e colore per una presentazione flessibile. Scopri di più sul Immagine.

1. Scegli con attenzione i rapporti d’aspetto quando posizioni blocchi immagine accanto a contenuti con molto testo.
2. Usa le didascalie solo quando l’immagine ha bisogno di contesto o di un significato aggiuntivo.

Prodotto

Usa Prodotto per aggiungere merchandising selezionato al collage senza passare a una sezione prodotto dedicata. Funziona bene per merchandising guidato da una storia, guide regalo e pagine di campagna. Scopri di più sul Prodotto.

1. Mantieni coerenti gli stili delle schede prodotto tra più blocchi prodotto per un layout più pulito.
2. Abilita i selettori di variante solo quando questa interazione aggiuntiva aggiunge chiaramente valore.

Testo ricco

Usa Rich text per testo di supporto, narrazione, istruzioni o brevi richiami tra blocchi più visivi. Offre un riquadro testuale compatto con icona, titolo, corpo del testo, pulsante, sfondo e controlli colore opzionali. Scopri di più sul Testo ricco.

1. In questo layout, un testo più breve di solito funziona meglio di paragrafi lunghi.
2. Le impostazioni di sfondo e colore possono aiutare il blocco a sembrare una scheda progettata, invece di semplice testo.

Testimonianza

Usa Testimonianza per aggiungere prova sociale accanto a prodotti, media o contenuti promozionali. Puoi includere una citazione, una valutazione, la fonte, un prodotto correlato e immagini o video opzionali. Scopri di più sul Testimonianza.

1. Le citazioni brevi sono più facili da bilanciare all’interno della griglia.
2. Collegare la testimonianza a un prodotto aiuta a supportare sia la fiducia sia la conversione.

Video

Usa Video per contenuti video incorporati o ospitati all’interno del collage. Supporta rapporto d’aspetto, immagine poster, comportamento di riproduzione automatica, overlay, didascalie e opzioni di allineamento. Scopri di più sul Video block.

1. Aggiungi un’immagine poster quando vuoi una prima impressione più pulita prima dell’avvio della riproduzione.
2. Esamina insieme le scelte di riproduzione automatica e overlay, in modo che il comportamento di riproduzione risulti intenzionale.

Consiglio

Il collage più equilibrato combina di solito un blocco visivo dominante con blocchi di supporto più semplici, come un Banner principale abbinato a blocchi Prodotto, Rich text o Immagine.

Impostazioni standard della sezione

Impostazioni dell’header

Usa Impostazioni dell’header per aggiungere un’eventuale didascalia, un titolo, testo di supporto, un’icona e un pulsante sopra il collage. Questo aiuta a incorniciare il contenuto e offre alla sezione una struttura più chiara nelle pagine lunghe.

Mantieni il titolo conciso in modo che introduca la sezione senza competere con i blocchi in evidenza. Se aggiungi un pulsante della sezione, consideralo l’azione principale a livello di sezione.

Impostazioni dello sfondo sezione

Usa Impostazioni dello sfondo sezione per aggiungere un colore, una sfumatura, un’immagine o un video dietro l’intera sezione. È utile quando vuoi che il collage si distingua dal contenuto circostante.

I media di sfondo possono rendere la sezione più scenografica, ma possono anche influire sulla leggibilità e sulla percezione dello spazio. Usa gli overlay quando ti serve un contrasto più forte senza perdere il trattamento di sfondo.

Impostazioni di padding

Usa Impostazioni di padding per controllare lo spazio sopra e sotto il collage. Piccole modifiche qui possono rendere la sezione più compatta e orientata all’utilità oppure più ampia e premium.

Un padding più ampio funziona spesso meglio quando la sezione ha uno sfondo proprio. Un padding più ridotto può essere utile quando questa sezione si trova in un flusso di pagina denso.

Impostazioni dei separatori

Usa Impostazioni dei separatori per aggiungere una linea nella parte superiore o inferiore della sezione. Questo conferisce al collage un confine più chiaro senza modificarne lo spazio o lo sfondo.

Di solito basta un separatore discreto. Se il colore del separatore è trasparente, la sezione usa il colore predefinito del bordo dalle impostazioni del tema.

Impostazioni di visibilità

Usa Impostazioni di visibilità per mostrare o nascondere la sezione in base alle dimensioni del dispositivo. È utile quando desideri una diversa disposizione dei contenuti su schermi più piccoli.

Usa con attenzione la visibilità specifica per dispositivo, in modo da non creare contenuti duplicati non necessari. Se crei versioni separate, mantieni allineati messaggi e link.

Impostazioni di larghezza

Usa Impostazioni di larghezza per controllare sia la larghezza del contenuto sia la larghezza esterna della sezione. In Collage, le modifiche alla larghezza possono influire in modo significativo sulla percezione di apertura, densità o stile editoriale del layout.

La larghezza del contenuto è il vincolo principale del layout, mentre la larghezza della sezione è più importante quando usi un trattamento di sfondo. Se possibile, visualizza in anteprima le modifiche di larghezza sulla vetrina live, poiché l’editor può far sembrare gli spazi più contenuti di quanto saranno sulla pagina.

Note sull’uso

1. Inizia con un’intenzione chiara. Metti per primo il blocco più importante o più visivo, perché diventerà sempre il blocco principale in evidenza.
2. Pianifica l’ordine su mobile. Se il flusso su mobile è importante, prova entrambe le opzioni di collage style e decidi se l’impilamento offre una storia dall’alto verso il basso più pulita.
3. Bilancia blocchi pesanti e leggeri. Mescola blocchi ricchi di testo con blocchi visivi più semplici, in modo che un lato del layout non sembri sovraffollato.
4. Usa le altezze uguali in modo selettivo. L’allungamento verticale aiuta a creare una griglia più ordinata, ma verificane l’effetto se un blocco contiene molto più contenuto degli altri.
5. Controlla il contrasto dopo lo styling. Ogni volta che aggiungi sfondi personalizzati o sovrascritture di colore, ricontrolla la leggibilità sia su desktop sia su mobile.
6. Verifica entrambi i breakpoint. I controlli per desktop e mobile possono produrre layout, allineamento, visibilità o comportamento dei media diversi, quindi conferma la sezione su entrambe le dimensioni della viewport.
7. Tratta moduli e prodotti come interattivi. I blocchi contatto e prodotto possono cambiare in base all’input del cliente, agli stati di convalida, alle varianti selezionate, alla quantità e alla disponibilità, quindi verifica anche gli stati vuoto, di successo ed errore oltre alle azioni di commercio.
8. Usa con parsimonia le sovrascritture dei media. I valori vuoti o in stile predefinito di solito mantengono lo stile di fallback, mentre colori espliciti, sfumature o scelte separate di media per desktop e mobile rendono l’area locale più indipendente e possono influire su ritaglio, caricamento e leggibilità.