Testo ricco

Link in evidenza

1. Documentazione di Company XYZ sul blocco Rich text
2. Documentazione di Company XYZ sulle icone
3. MDN Web Docs
4. Documentazione di Company XYZ sulle impostazioni degli sfondi delle sezioni
5. Documentazione di Company XYZ sull’utilizzo dei video
6. Documentazione di Company XYZ sulle impostazioni dei colori
7. Documentazione di Company XYZ sulle impostazioni di visibilità
8. Documentazione di Shopify sulle sezioni e i blocchi
9. Documentazione di Shopify sulla personalizzazione dei temi

Video utili

Video di Shopify Academy: personalizzare il tuo negozio

Video di Shopify Academy: personalizzare il tuo negozio

Usi questo blocco per aggiungere un’area messaggio compatta con un’icona opzionale, un’intestazione, testo ricco e un pulsante. È adatto a testi promozionali brevi, dichiarazioni del brand, richiami alle funzionalità e contenuti di supporto tra blocchi più visivi. Per una panoramica delle funzionalità, vedi la Testo ricco.

Impostazioni contenuto

Queste impostazioni controllano il messaggio stesso e il modo in cui viene presentato. Le configurazioni più chiare usano una struttura semplice: didascalia opzionale, intestazione, testo di supporto e una sola azione solo quando il passaggio successivo è evidente.

L’allineamento del testo e la posizione dell’icona determinano l’aspetto del blocco nel layout. I contenuti centrati funzionano bene per messaggi promozionali brevi, mentre i contenuti allineati a sinistra sono in genere più facili da leggere quando il testo è più lungo.

Il campo icona accetta un emoji o il nome di un’icona. Lasciatelo vuoto se il messaggio non necessita di un ulteriore richiamo visivo. Per assistenza sulle icone, veda icone e la libreria dei nomi di icone supportata.

Scegliete il tipo di intestazione in base al ruolo del blocco nella gerarchia della pagina, non solo alla dimensione visiva desiderata. Un livello di intestazione più forte aiuta questo blocco a introdurre una nuova area di contenuto, mentre un livello più leggero funziona meglio quando supporta contenuti vicini.

Il campo rich text supporta i link e la formattazione di base, così potete aggiungere enfasi senza far sembrare il blocco troppo carico. Mantenete uno stile sobrio in modo che il messaggio resti facile da scansionare.

Le impostazioni del pulsante si applicano solo al pulsante integrato di questo blocco. Usatele per un’unica chiamata all’azione chiara e scegliete uno stile che corrisponda all’importanza dell’azione. I layout del pulsante con sola icona funzionano meglio quando il significato è già evidente dal testo vicino.

Aggiungete insieme sia il testo del pulsante sia il link del pulsante. Un pulsante senza un’etichetta o una destinazione chiara è facile da ignorare o fraintendere.

Se la maggior parte dei clic avverrà su schermi più piccoli, l’opzione del pulsante mobile a tutta larghezza può rendere l’azione più facile da individuare e da toccare.

Impostazioni standard del blocco

Impostazioni dello sfondo del blocco

Usate queste impostazioni per dare al blocco una superficie visiva propria con uno sfondo a colore, gradiente, immagine o video. Questo può aiutare il messaggio a risaltare, ma sfondi più marcati possono anche modificare il peso visivo del blocco e lo spaziamento nel layout. Vedi sfondi della sezione. Per una panoramica correlata della struttura Shopify, vedi la documentazione Shopify sulle sezioni e i blocchi

Le impostazioni del gradiente sostituiscono i colori di sfondo piatti, e i gradienti di overlay sostituiscono i colori di overlay piatti. Quando usate uno sfondo immagine o video, gli overlay sono particolarmente utili per mantenere il testo leggibile.

I campi immagine di sfondo mobile e video di sfondo mobile vi consentono di sostituire l’asset con uno diverso per schermi più piccoli. Se lasciati vuoti, su mobile viene usato l’asset di sfondo principale. Verificate entrambe le dimensioni del viewport se impostate media diversi per desktop e mobile, poiché ritaglio, caricamento e leggibilità possono cambiare.

Attenzione

Immagini e video affollati possono ridurre rapidamente la leggibilità. Se questo blocco include testo più lungo o un pulsante, usate overlay o media più semplici per mantenere chiaro il contenuto.

Per indicazioni sulla configurazione video, vedi using video.

Impostazioni colore

Queste impostazioni sostituiscono i colori predefiniti del tema solo per questo blocco. Usatele quando il blocco richiede un contrasto più marcato, un accento di brand o un migliore coordinamento con uno sfondo personalizzato. Vedi impostazioni colore. Per una panoramica più ampia della personalizzazione del tema, vedi la documentazione Shopify sulla personalizzazione dei temi

Regolate insieme intestazione, sottotitolo e testo del corpo in modo che il contenuto continui a essere percepito come un unico sistema. Se stilizzate anche l’icona o il bordo, mantenete questi accenti di supporto e non più evidenti del messaggio stesso.

Valori vuoti, trasparenti o con stile predefinito mantengono in genere il blocco più vicino al look di fallback del tema, mentre colori espliciti, gradienti o override dei media rendono il blocco più autonomo.

Impostazioni di visibilità

Usate i controlli di visibilità per mostrare o nascondere questo blocco in base alla dimensione del dispositivo. È utile quando desiderate una versione più breve per mobile, una versione più spaziosa per desktop o una diversa disposizione dei contenuti tra layout. Vedi impostazioni di visibilità.

Consiglio

Se nascondete questo blocco su una determinata dimensione del dispositivo, assicuratevi che lo stesso messaggio o la stessa azione compaia altrove quando è importante.

Note sull’uso

1. Mantenete il messaggio focalizzato. Usate questo blocco per un’idea principale invece di accumulare più messaggi in competizione in uno spazio ridotto.
2. Abbinate l’intestazione alla struttura della pagina. Scegliete un tipo di intestazione che si adatti alla gerarchia dei contenuti circostanti, non solo allo stile visivo.
3. Usate le icone con parsimonia. Aggiungete un emoji o un’icona solo quando rafforza rapidamente il messaggio e non compete con l’intestazione.
4. Limitate la chiamata all’azione. Usate il pulsante integrato per un unico passaggio successivo chiaro e valutate la visualizzazione mobile a tutta larghezza quando i tocchi su schermi piccoli sono importanti.
5. Controllate il contrasto su ogni dispositivo. Quando usate colori personalizzati, gradienti o media, verificate la leggibilità e la visibilità del pulsante sia su desktop sia su mobile.
6. Esaminate con attenzione i media separati. Se impostate sfondi diversi per desktop e mobile, confermate il ritaglio, il comportamento di caricamento e la leggibilità del testo su ogni viewport.