Video con testo

Link in evidenza

1. Documentazione Shopify su sezioni e blocchi
2. Documentazione di Company XYZ sul blocco Rich text
3. Documentazione di Company XYZ sul blocco Video
4. Documentazione di Company XYZ sulle impostazioni degli header
5. Documentazione di Company XYZ sulle impostazioni del padding della sezione
6. Documentazione di Company XYZ sulle impostazioni dello sfondo della sezione
7. Documentazione di Company XYZ sulle impostazioni dei separatori
8. Documentazione di Company XYZ sulle impostazioni di visibilità
9. Documentazione di Company XYZ sulle impostazioni delle larghezze del layout

Video utili

Video di Shopify Academy: personalizzare il tuo negozio

Video di Shopify Academy: personalizzare il tuo negozio

Usi questa sezione per affiancare un video a un testo di supporto in un layout pulito a due parti. Funziona particolarmente bene per spiegazioni di prodotto, storie del brand, tutorial e contenuti di campagna in cui il video ha bisogno di contesto, un titolo e un chiaro passo successivo. Per una panoramica più ampia su come sono organizzati i contenuti del tema, consulta documentazione Shopify sulle sezioni e i blocchi

Impostazioni di base

Queste impostazioni controllano il rapporto complessivo tra il video e i blocchi di testo. Può anche cambiare l’ordine dei blocchi per decidere quale lato appare per primo.

1. Allineamento del contenuto stabilisce come i due lati si allineano verticalmente quando sono mostrati affiancati. L’allineamento in alto è adatto ai contenuti editoriali, quello centrale risulta più bilanciato e quello in basso può aiutare entrambi i lati a terminare su una linea visiva simile.
2. Abilita contenuto sticky mantiene il lato più corto fisso vicino alla parte superiore mentre i visitatori scorrono lungo il lato più alto. È particolarmente utile quando un blocco è molto più lungo dell’altro.
3. Impila su mobile trasforma la sezione in una singola colonna sui display più piccoli. Usatelo quando il contenuto affiancato risulta troppo compresso o quando il video ha bisogno di più spazio.
4. Impila su desktop converte il layout in una sequenza verticale anche sui display più grandi. Funziona meglio quando il contenuto si legge in modo più naturale un elemento dopo l’altro rispetto a due colonne.

Il contenuto sticky funziona solo su desktop e non si applica quando sono attivi layout impilati.

Impostazioni di colore

Questi controlli di colore a livello di sezione consentono di sostituire lo stile predefinito del testo per questa sezione. Sono utili quando la sezione usa uno sfondo personalizzato o quando serve un contrasto più forte attorno ai media.

Usi queste impostazioni con attenzione se il video o lo sfondo della sezione sono già visivamente ricchi. Piccoli cambiamenti di colore possono migliorare la leggibilità in modo più efficace rispetto all’aggiunta di ulteriori stili.

Tipi di blocco supportati

1. Rich text
2. Video

Blocco Rich text

Il blocco Rich text fornisce il lato testuale del layout, inclusi titolo, corpo del testo, icona e un pulsante opzionale. Veda Testo ricco.

1. Usatelo per la spiegazione principale, la storia di supporto o la call to action che dà contesto al video.
2. Mantenete il messaggio focalizzato se è il video a svolgere la maggior parte del lavoro visivo.
3. Questo blocco include anche i propri controlli di sfondo, colore e visibilità, che possono aiutare il lato testuale a sembrare più un pannello di contenuto incorniciato.

Blocco Video

Il blocco Video mostra un video ospitato oppure un link Vimeo o YouTube, con controlli per rapporto d’aspetto, riproduzione, larghezza, sottotitoli, stile dell’overlay e allineamento. Veda documentazione Company XYZ sul blocco Video.

1. Usate un’immagine poster quando necessario, così la sezione appare rifinita prima dell’inizio della riproduzione.
2. Scegliete i rapporti d’aspetto separatamente per schermi grandi e piccoli se l’inquadratura predefinita risulta poco adatta.
3. Impostate una larghezza massima quando la sezione complessiva è ampia ma il video deve restare visivamente contenuto.

Se l’overlay del video è impostato su Mostra sempre, i controlli del lettore video vengono disattivati anche se altrove i controlli sono abilitati.

Impostazioni standard della sezione

Impostazioni dell’header

Usate Impostazioni dell’header per aggiungere un’introduzione opzionale sopra il contenuto affiancato. Quest’area è utile per un titolo della sezione, testo di supporto e un pulsante quando il video richiede più contesto o una call to action più forte.

Impostazioni di padding

Usate Impostazioni di padding per controllare lo spazio sopra e sotto la sezione. Riducete la spaziatura quando questa sezione deve risultare strettamente collegata ai contenuti vicini, oppure aggiungetene di più quando il video ha bisogno di maggiore separazione visiva.

Impostazioni dello sfondo sezione

Usate Impostazioni dello sfondo sezione per aggiungere un colore, un gradiente, un’immagine o un video dietro l’intera sezione. Gli sfondi possono rafforzare l’atmosfera della sezione, ma possono anche entrare in conflitto con il video e il testo se usati in modo eccessivo.

Attenzione

Se la sezione contiene già un video visivamente ricco, un’immagine o un video di sfondo molto marcati possono rendere il layout affollato e ridurre la chiarezza del testo.

Impostazioni dei separatori

Usate Impostazioni dei separatori per aggiungere una linea sopra o sotto la sezione. Questo può aiutare a distinguere la sezione dai contenuti vicini quando la pagina utilizza layout simili uno dopo l’altro.

Impostazioni di visibilità

Usate Impostazioni di visibilità per mostrare o nascondere la sezione in base alla dimensione del dispositivo. È utile quando desiderate un flusso di contenuti diverso su mobile rispetto al desktop.

Impostazioni di larghezza

Usate Impostazioni di larghezza per controllare sia il wrapper della sezione sia la larghezza dei contenuti interni. Impostazioni più ampie danno al video una presenza maggiore, mentre larghezze dei contenuti più ridotte possono rendere il lato testuale più facile da leggere.

Note sull’uso

1. Partite da una priorità. Decidete se il video o il testo è il focus principale, poi mantenete l’altro lato di supporto in modo che la sezione non sembri sovraccarica.
2. Rivedete entrambe le viewport. I controlli per desktop e mobile possono cambiare allineamento, visibilità e comportamento dei media, quindi verificate entrambe le dimensioni prima della pubblicazione.
3. Usate il contenuto dei blocchi con intenzione. L’aggiunta di blocchi può modificare in modo sostanziale la sezione, quindi assicuratevi che i nuovi blocchi video o testo continuino a supportare il messaggio originale.
4. Mantenete semplici i valori predefiniti. Uno stile vuoto o trasparente in genere conserva l’aspetto di fallback, mentre colori forti, gradienti o override dei media rendono la sezione più indipendente.
5. Controllate l’inquadratura dei media. Media separati per desktop e mobile possono essere ritagliati e apparire in modo diverso, quindi confermate che entrambe le versioni restino chiare e leggibili.
6. Testate i layout sticky nel contesto. Il contenuto sticky funziona meglio quando un lato è chiaramente più corto e il layout desktop resta non impilato.