Presentazione in evidenza

Link in evidenza

1. Documentazione Shopify su sezioni e blocchi
2. MDN Web Docs
3. Documentazione Company XYZ sul blocco slide
4. Documentazione Company XYZ sulle impostazioni degli header
5. Documentazione Company XYZ sulle impostazioni del padding della sezione
6. Documentazione Company XYZ sulle impostazioni degli sfondi delle sezioni
7. Documentazione Company XYZ sulle impostazioni dei separatori
8. Documentazione Company XYZ sulle impostazioni di visibilità
9. 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

Usate questa sezione per trasformare un elenco di funzionalità, dettagli o punti di forza in una presentazione guidata. Funziona meglio quando ogni slide si concentra su una sola idea, supportata da una breve intestazione, testo conciso e media opzionali. Per una panoramica più ampia su come funzionano sezioni e blocchi nell’editor, consultate documentazione Shopify sulle sezioni e i blocchi

Impostazioni principali

Impostazioni della presentazione

Queste impostazioni controllano come si muove la presentazione, quanto della slide successiva è visibile e come i visitatori navigano tra le slide. Partite da qui prima di regolare lo stile, perché lo stile di animazione cambia il comportamento dell’intera sezione.

Lo stile di animazione predefinito supporta un layout più simile a una carosello, incluse anteprime parziali delle slide successive. Fade trasforma la sezione in una presentazione a singola slide, che è migliore quando volete che i visitatori si concentrino su un messaggio alla volta.

Fade impone un layout a singola slide e rimuove le anteprime delle slide successive. La paginazione inoltre non viene mostrata quando fade è attivo.

La velocità di animazione influisce su quanto la sezione sembri rifinita o dinamica. Transizioni più rapide sono adatte a slide brevi e visive, mentre transizioni più lente sono in genere più facili da seguire quando le slide includono più testo.

L’aspect ratio controlla la forma dell’area media della slide. Usate un rapporto fisso per un layout più pulito e coerente tra le slide, oppure lasciatelo su Default se i vostri media devono mantenere le proporzioni naturali. Il rapporto mobile separato è utile quando il ritaglio desktop appare troppo largo o troppo stretto su schermi più piccoli.

L’autoplay può essere utile quando le slide raccontano una storia breve e semplice. Se le slide includono testo più lungo, mantenete l’autoplay più lento o disattivatelo, così i visitatori possono leggere senza sentirsi frettolosi. Pausa al passaggio del mouse si applica solo su desktop, quindi gli utenti mobile continueranno a fare affidamento sul ritardo e sui controlli manuali.

Navigazione e paginazione influiscono su quanto chiaramente la presentazione comunica la sequenza. La navigazione spesso è sufficiente quando le intestazioni o le icone delle slide sono distinte, mentre la paginazione è più utile quando l’ordine delle slide conta.

Le impostazioni di posizione dei controlli vi aiutano a bilanciare l’interfaccia tra i dispositivi. Su desktop, il posizionamento a sinistra o a destra modifica il peso visivo del layout; su mobile, il posizionamento in alto o in basso influisce soprattutto sulla scansione e sulla comodità del tocco.

Impostazioni colore

Queste impostazioni sostituiscono i colori dell’intestazione della sezione usati per l’icona, l’intestazione e il testo di supporto sopra la presentazione. Sono più utili quando la sezione si trova su uno sfondo personalizzato o necessita di un contrasto più forte rispetto agli stili della pagina circostante.

Usate le sostituzioni colore con moderazione. Una semplice combinazione ad alto contrasto è di solito più facile da leggere rispetto a un testo molto stilizzato, soprattutto quando le slide stesse includono immagini o video.

Consiglio

Se aggiungete un’immagine di sfondo o un video alla sezione, verificate il contrasto del testo dell’intestazione sia su desktop sia su mobile prima di pubblicare. Per indicazioni generali sull’accessibilità, consultate MDN Web Docs

Tipi di blocco supportati

1. Slide

Slide

Ogni blocco Slide aggiunge una slide alla sequenza e contribuisce alla navigazione basata su testo o icone. Scoprite di più sul blocco Slide.

Usate ogni slide per un singolo punto chiaro. Le intestazioni brevi funzionano meglio perché rendono l’interfaccia di navigazione facile da leggere.

1. Usate l’intestazione come messaggio principale.
2. Usate il campo contenuto per aggiungere una breve spiegazione, non un secondo titolo.
3. Aggiungete un’icona solo quando aiuta i visitatori a distinguere più rapidamente le slide.

Impostazioni immagine

Una slide può essere solo testo, basata su immagini o basata su video. Se vengono aggiunti sia un’immagine sia un video, il video ha la priorità e viene riprodotto quando quella slide diventa attiva.

Le impostazioni di overlay inattivo aiutano a ridurre la distrazione delle slide vicine quando le anteprime sono visibili. Aumentate l’overlay se le slide adiacenti competono troppo con quella attiva, e riducetelo se la sezione inizia a sembrare troppo scura.

Visibilità del blocco

Potete nascondere singole slide su desktop o mobile. Questo è utile quando una slide è troppo dettagliata per gli schermi più piccoli o quando volete una sequenza mobile più breve senza rimuovere del tutto la slide.

Impostazioni standard della sezione

Impostazioni dell’header

Impostazioni dell’header vi consentono di introdurre la presentazione con una caption, un’intestazione, testo di supporto e un pulsante opzionale. Questo è un buon punto per spiegare cosa copre la presentazione e offrire ai visitatori un passaggio successivo chiaro.

Il pulsante funziona meglio come singola azione di approfondimento, ad esempio per visualizzare un prodotto o una pagina correlata. La posizione del pulsante su mobile e il comportamento a tutta larghezza sono utili quando volete che l’azione resti facile da toccare.

Impostazioni di padding

Impostazioni di padding controllano lo spazio sopra e sotto la sezione. Usatele per separare la presentazione dai contenuti vicini, soprattutto quando la pagina include altre sezioni ricche di media.

Una spaziatura più stretta può far sembrare la sezione più collegata al layout circostante. Una spaziatura maggiore dà alla presentazione più enfasi e respiro.

Impostazioni dello sfondo sezione

Impostazioni dello sfondo sezione vi consentono di aggiungere un colore, un gradiente, un’immagine o un video dietro l’intera sezione. Queste scelte possono rendere la presentazione più immersiva, ma influenzano anche la leggibilità e la profondità percepita del layout.

Gli overlay sono particolarmente utili quando l’header si trova sopra un media di sfondo. Se usate sia media di sfondo sia media all’interno delle slide, mantenete uno dei due livelli visivamente più discreto, così la sezione non risulta affollata.

Impostazioni dei separatori

Impostazioni dei separatori aggiungono una linea nella parte superiore o inferiore della sezione. Questo può aiutare a definire la presentazione quando si trova tra sezioni con sfondi simili.

Di solito funzionano meglio separatori discreti. Usateli come struttura, non come decorazione.

Impostazioni di visibilità

Impostazioni di visibilità controllano se l’intera sezione appare su desktop, mobile o entrambi. Questo è utile quando volete un flusso di pagina diverso su schermi più piccoli.

Se nascondete la sezione su un dispositivo, assicuratevi che lo stesso messaggio chiave compaia altrove, così i dettagli importanti non vanno persi.

Impostazioni di larghezza

Impostazioni di larghezza controllano la larghezza complessiva della sezione e la larghezza massima del contenuto al suo interno. In questa presentazione, la larghezza cambia quanto il media appare spazioso e quanto è facile leggere la navigazione.

Larghezze più strette in genere si adattano a slide incentrate sul testo, mentre layout più ampi danno a immagini e video un impatto maggiore. Controllate le modifiche sulla pagina live quando possibile, perché il riquadro dell’editor può far sembrare la larghezza diversa dal risultato finale.

Note sull’uso

1. Mantenete le slide focalizzate. Date a ogni slide una sola idea principale, così intestazione, icona, testo e media supportano tutti lo stesso messaggio.
2. Scegliete l’animazione con attenzione. Usate lo stile predefinito per un effetto carosello più visivo e usate fade quando volete che i visitatori si concentrino su una slide alla volta.
3. Mantenete coerenti le proporzioni dei media. Far coincidere gli aspect ratio tra le slide in genere crea un layout più pulito e tranquillo.
4. Usate l’autoplay con moderazione. Attivatelo solo quando le slide sono rapide da comprendere e i controlli manuali restano evidenti.
5. Controllate con attenzione il mobile. Verificate ritaglio, posizione dei controlli e contrasto del testo su schermi più piccoli ogni volta che usate colori personalizzati, media di sfondo o aspect ratio specifici per mobile.
6. Rivedete entrambi i layout di viewport. I controlli desktop e mobile possono modificare l’allineamento, la visibilità e quanto di ogni slide viene mostrato, quindi confermate entrambe le versioni prima di pubblicare.
7. Considerate i valori predefiniti come soluzione di riserva. Colori vuoti o trasparenti in genere preservano lo stile circostante, mentre colori espliciti, gradienti o scelte separate di media desktop e mobile rendono l’area della presentazione più autonoma.