Multicolumn

Link in evidenza

1. Documentazione Shopify sulle sezioni e i blocchi
2. Documentazione Company XYZ sulle impostazioni dei controlli della presentazione
3. Documentazione Company XYZ sul blocco Banner
4. Documentazione Company XYZ sul blocco Blog post
5. Documentazione Company XYZ sul blocco Product
6. Documentazione Company XYZ sul blocco Image
7. Documentazione Company XYZ sul blocco Video
8. Documentazione Company XYZ sul blocco Rich text
9. Documentazione Company XYZ sul blocco Testimonial
10. Documentazione Company XYZ sul blocco Contact form
11. Documentazione Company XYZ sul blocco Breadcrumbs
12. Documentazione Company XYZ sulle impostazioni degli header
13. Documentazione Company XYZ sulle impostazioni del padding della sezione
14. Documentazione Company XYZ sulle impostazioni degli sfondi della sezione
15. Documentazione Shopify sulla personalizzazione delle sezioni
16. Documentazione Company XYZ sulle impostazioni dei separatori
17. Documentazione Company XYZ sulle impostazioni di visibilità
18. Documentazione Company XYZ sulle impostazioni delle larghezze del layout

Video utili

Video Shopify Academy: personalizzare il proprio negozio

Video Shopify Academy: personalizzare il proprio negozio

Usa Multicolumn per creare layout flessibili con contenuti misti in un’unica sezione. Puoi combinare testo, media, contenuti promozionali, card e blocchi di utilità, quindi controllare quante colonne compaiono su ogni dispositivo e se i visitatori da mobile vedono una presentazione a scorrimento invece di una griglia standard. Per una panoramica più ampia sul funzionamento di sezioni e blocchi nell’editor del tema, consulta la documentazione Shopify su sezioni e blocchi

Impostazioni principali

Queste impostazioni definiscono il layout generale prima che si perfezionino i singoli blocchi. Parti da qui per decidere quanto la sezione debba sembrare densa, spaziosa o interattiva.

Layout e allineamento

Usa l’allineamento dei contenuti per controllare come i blocchi si dispongono all’interno di ogni riga quando hanno altezze diverse. Questo è particolarmente utile quando si combinano blocchi di testo brevi con banner, immagini o video più alti.

Il numero di colonne per desktop, tablet e mobile definisce la griglia per ogni dimensione dello schermo. Il tablet può ereditare il valore desktop quando viene lasciato a 0, il che è utile quando si desiderano meno regolazioni specifiche per dispositivo.

Comportamento della presentazione su mobile

Attiva Mostra come presentazione su mobile quando la sezione risulta troppo alta o affollata su schermi più piccoli. Questo cambia l’esperienza su mobile da una griglia da scorrere a una sequenza scorrevole.

Se attivi la presentazione su mobile, controlla con attenzione l’ordine dei blocchi. I visitatori vedranno la sezione una slide alla volta invece di vedere l’intero layout in una sola volta.

Righe della stessa altezza

Usa Estendi il contenuto verticalmente quando desideri una griglia più pulita e uniforme. I blocchi si estenderanno per adattarsi al blocco più alto nella stessa riga, il che funziona particolarmente bene per card, testimonianze e banner.

Lascialo disattivato se vuoi che ogni blocco mantenga la propria altezza naturale.

Impostazioni della presentazione

Quando il comportamento della presentazione è attivo, queste impostazioni controllano come i visitatori si muovono attraverso i contenuti. Per maggiori dettagli, consulta il riferimento ai controlli della presentazione.

Lo stile dell’animazione ha il maggiore impatto visivo. Lo stile predefinito mantiene un layout più simile a quello di una carousel, mentre Fade crea una presentazione alla volta.

Nota

L’animazione Fade forza un layout a singola slide. Disattiva anche le anteprime della slide successiva e gli stili di paginazione che dipendono da più slide visibili.

Riproduzione automatica, ritardo, ripetizione e pausa al passaggio del mouse aiutano a decidere se la sezione debba sembrare più un slider promozionale passivo o una galleria di contenuti manuale. La pausa al passaggio del mouse si applica solo su desktop, quindi la riproduzione automatica dovrebbe comunque risultare comoda sui dispositivi touch.

La posizione della navigazione, i controlli di navigazione e le impostazioni di paginazione aiutano i visitatori a capire che sono disponibili altri contenuti. L’anteprima delle slide successive è utile quando si vuole suggerire contenuti aggiuntivi, ma è meno adatta a layout più compatti o più centrati.

Impostazioni dei colori

Questo gruppo consente di sovrascrivere i colori del testo e delle icone della sezione senza modificare lo stile generale del tema. È particolarmente utile quando lo sfondo della sezione o la combinazione dei blocchi richiede un contrasto diverso per restare leggibile.

Se anche i singoli blocchi usano le proprie impostazioni dei colori, punta a una gerarchia chiara. I colori a livello di sezione funzionano meglio quando l’intera sezione deve condividere un tono coerente.

Tipi di blocco supportati

1. Banner
2. Articolo del blog
3. Breadcrumb
4. Modulo di contatto
5. Heading
6. Image
7. Product
8. Rich text
9. Testimonial
10. Video

Banner

Usa i blocchi Banner per promozioni, messaggi in evidenza o call to action visive. Supportano media di sfondo propri, contenuti in primo piano, immagine in primo piano facoltativa e span di colonna personalizzati.

Consulta il blocco Banner per ulteriori dettagli sui blocchi.

1. Usa span più ampi quando il banner include sia media sia testo.
2. I rapporti d’aspetto fissi aiutano a creare una griglia più ordinata.
3. Gli stili di collegamento dell’intero blocco funzionano meglio quando l’intero banner deve agire come un unico target di clic.

Articolo del blog e Product

Questi blocchi aggiungono articoli curati e card prodotto al layout. Entrambi supportano span personalizzati e styling della card a livello di blocco, quindi funzionano bene quando si desidera una sezione mista editoriale e commerciale.

Consulta il blocco Articolo del blog e il Prodotto per i dettagli di configurazione.

1. Mantieni coerenti gli stili delle card quando vuoi che la sezione venga letta come un’unica raccolta.
2. Usa span più grandi in modo selettivo per mettere in evidenza un singolo elemento.
3. In modalità presentazione su mobile, l’ordine dei blocchi è più importante della larghezza dei blocchi.

Image e Video

Usa i blocchi media per aggiungere elementi visivi tra contenuti ricchi di testo o di card. Entrambi supportano rapporti d’aspetto, didascalie, overlay, controlli di allineamento e span personalizzati.

Consulta il Immagine e il blocco Video per le opzioni specifiche dei media.

1. Abbina i rapporti d’aspetto tra i blocchi media vicini per un layout più pulito.
2. Usa gli overlay solo quando migliorano la leggibilità o la coerenza.
3. Aggiungi un’immagine poster quando un video ospitato necessita di un primo frame più efficace.

Rich text e Heading

Questi blocchi aiutano a strutturare layout più lunghi e a introdurre gruppi di contenuti. Usali per spezzare griglie dense, aggiungere brevi contenuti editoriali o inserire call to action mirate all’interno della sezione.

Consulta il Testo ricco per le opzioni di formattazione dei contenuti.

1. Usa i blocchi Heading per creare una struttura interna nelle sezioni più lunghe.
2. Mantieni selettivo l’uso dei pulsanti, così le azioni non competono tra loro.
3. Evita di usare più heading H1 nella stessa pagina.

Testimonianza

I blocchi Testimonial combinano contenuti di citazione con contesto prodotto facoltativo e media di supporto facoltativi. Funzionano bene quando desideri una prova sociale all’interno di un layout promozionale misto.

Consulta il Testimonianza per le impostazioni di citazione e media.

1. Mantieni brevi le citazioni così il blocco resta bilanciato.
2. Collega un prodotto correlato quando la testimonianza supporta un articolo specifico.
3. Se aggiungi un video, mantieni visivamente più semplici i blocchi vicini.

Modulo di contatto e Breadcrumb

Questi blocchi di utilità consentono a Multicolumn di gestire più dei soli contenuti promozionali. Usa Modulo di contatto per layout flessibili di landing page e Breadcrumb quando hai bisogno di un contesto di navigazione all’interno di una composizione personalizzata.

Consulta il blocco Modulo di contatto e il blocco Breadcrumb per le opzioni dei blocchi di utilità.

1. Assegna ai blocchi funzionali una larghezza sufficiente per renderli facili da usare.
2. Posiziona i breadcrumb vicino all’inizio del flusso dei contenuti.
3. Evita di inserire troppi blocchi di utilità in una sezione piccola.

Impostazioni standard della sezione

Impostazioni dell’header

Usa le Impostazioni dell’header condivise per introdurre la sezione con un heading, una caption, testo di supporto, un’icona e un pulsante facoltativo. In Multicolumn, questo è particolarmente utile quando il layout mescola diversi tipi di contenuto e richiede un’introduzione o un’azione chiara.

Impostazioni di padding

Usa le Impostazioni di padding condivise per controllare lo spazio sopra e sotto la sezione. Aumenta lo spazio quando il layout ha bisogno di più respiro e riducilo quando la pagina deve sembrare più densa.

Impostazioni dello sfondo sezione

Usa le Impostazioni dello sfondo sezione condivise per aggiungere colore, gradiente, immagine o video dietro l’intera sezione. Sfondo forti possono modificare il contrasto e la spaziatura percepita, quindi valutali insieme ai colori del testo e dei blocchi. Se hai bisogno di indicazioni di configurazione nell’editor del tema, consulta la documentazione Shopify su come personalizzare le sezioni

Impostazioni dei separatori

Usa le Impostazioni dei separatori condivise per aggiungere una linea sopra o sotto la sezione. Questo è utile quando Multicolumn si trova tra sezioni visivamente simili e ha bisogno di un confine più chiaro.

Impostazioni di visibilità

Usa le Impostazioni di visibilità condivise per mostrare o nascondere la sezione in base al dispositivo. Questo è utile quando desideri un layout per schermi più grandi e una configurazione diversa della sezione per mobile.

Impostazioni di larghezza

Usa le Impostazioni di larghezza condivise per controllare sia la larghezza del contenuto sia la larghezza esterna della sezione. In Multicolumn, le impostazioni di larghezza influenzano molto quanto la griglia sembri densa, soprattutto quando usi molte colonne o aggiungi uno sfondo di sezione.

Note sull’uso

1. Rivedi la sezione dopo aver aggiunto i blocchi. I nuovi blocchi possono modificare l’equilibrio e l’aspetto dell’intero layout, quindi controlla di nuovo la composizione dopo ogni cambiamento importante dei contenuti.
2. Testa entrambe le esperienze per dispositivo. I controlli per desktop e mobile possono modificare layout, allineamento e navigazione, quindi rivedi la sezione in entrambe le dimensioni prima della pubblicazione.
3. Usa le sovrascritture con intenzione. Valori vuoti o con stile predefinito di solito mantengono lo stile di fallback del tema, mentre colori espliciti, gradienti o media separati rendono la sezione più indipendente.
4. Controlla la leggibilità dei media su ogni dispositivo. Quando i media per desktop e mobile sono configurati separatamente, ritaglio e overlay possono cambiare, quindi verifica che didascalie, punti focali e testo restino chiari.
5. Mantieni i moduli facili da scansionare. Se usi un blocco modulo di contatto, assicurati che i messaggi di successo ed errore restino leggibili rispetto ai contenuti circostanti.
6. Tratta la modalità presentazione su mobile come una sequenza. Disponi i blocchi nell’ordine in cui i visitatori dovrebbero scorrerli, poiché il layout non verrà più vissuto come una griglia completa.