Rich text

Link in evidenza

1. Documentazione Shopify sulle sezioni e i blocchi
2. Documentazione Company XYZ sulle icone
3. Documentazione Company XYZ sulle impostazioni dei colori
4. Documentazione Company XYZ sul blocco Button
5. Documentazione Company XYZ sulle impostazioni del padding della sezione
6. Documentazione Company XYZ sulle impostazioni degli sfondi della sezione
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 di Shopify Academy: personalizzare il tuo negozio

Video di Shopify Academy: personalizzare il tuo negozio

Usa Rich text per aggiungere un’area di contenuto semplice incentrata sul testo, con icone opzionali, testo di supporto e call to action. Per una panoramica più ampia su come le sezioni vengono create e organizzate in un tema, consulta la documentazione Shopify sulle sezioni e i blocchi. È adatto per introduzioni, promozioni, messaggi del brand, evidenziazioni delle policy o qualsiasi blocco di contenuto breve che richieda un maggiore controllo della presentazione.

Impostazioni del contenuto

Qui costruisci il messaggio principale della sezione. Puoi combinare una caption, una heading, contenuto rich text e un’icona opzionale per creare di tutto, da un annuncio compatto a un blocco di contenuto più editoriale.

L’allineamento del testo definisce la direzione di lettura complessiva della sezione, quindi di solito è la prima scelta di layout da fare. Il tipo di heading aiuta la sezione a integrarsi più naturalmente nella struttura della pagina, sia che tu voglia che il titolo venga letto come una heading principale o come un’etichetta più leggera.

Il campo icona accetta sia un’emoji sia il nome di un’icona. Le posizioni in alto e in basso funzionano bene per layout impilati e centrati, mentre a sinistra e a destra tendono a risultare più pulite per testi più brevi o contenuti orientati all’azione. Per assistenza sulle icone, consulta la guida alle icone.

Il campo rich text supporta link e formattazione di base, il che lo rende utile per testi brevi esplicativi o promozionali. Se includi anche un pulsante, mantieni il testo conciso in modo che la call to action resti chiara.

Pulsante a livello di sezione

Puoi aggiungere direttamente nella sezione un solo pulsante integrato per un’azione principale collegata al messaggio principale. È l’opzione più semplice quando ti serve un solo call to action.

Lo stile del pulsante controlla l’enfasi, mentre il layout del pulsante controlla il modo in cui l’icona e l’etichetta vengono visualizzate insieme. Gli stili pieni sono in genere i migliori per le azioni principali, gli stili più leggeri funzionano meglio per le azioni secondarie, e i layout solo icona sono da riservare alle azioni molto evidenti.

Queste impostazioni del pulsante si applicano solo al pulsante integrato della sezione. Non influenzano eventuali blocchi Button aggiunti.

Un pulsante mobile a larghezza intera può migliorare la facilità di tocco e rendere l’azione più evidente sugli schermi più piccoli. È particolarmente utile per le sezioni promozionali in cui il pulsante deve essere facile da individuare e usare.

Impostazioni dei colori

Queste impostazioni sostituiscono i consueti colori del tema solo per questa sezione. Sono utili quando vuoi che il contenuto risulti più coerente con il brand, più promozionale o più distinto dalle sezioni circostanti. Per un comportamento dei colori più ampio, consulta il Impostazioni colore.

Puoi regolare separatamente i colori di bordi, icone, heading, testo della caption e testo del corpo. Quando combini colori personalizzati del testo con uno sfondo personalizzato, controlla attentamente la leggibilità in modo che la sezione resti chiara ed equilibrata.

Consiglio

Se applichi sia colori personalizzati del testo sia contenuti multimediali di sfondo, rivedi la sezione su mobile e su desktop per assicurarti che il contrasto resti elevato.

Tipi di blocco supportati

1. Button

Pulsante

Usa i blocchi Button quando hai bisogno di call to action aggiuntive oltre al pulsante integrato della sezione. Funziona bene per azioni abbinate, come un percorso di acquisto principale e un link di supporto più leggero. Consulta il Pulsante per le impostazioni specifiche del blocco.

Ogni blocco Button ha i propri controlli per testo, link, stile, icona e visibilità. Questo rende facile alternare l’enfasi dei pulsanti o nascondere un’azione specifica su desktop o mobile senza nascondere l’intera sezione.

Quando usi più pulsanti, mantieni chiara la gerarchia. Di solito un’azione dovrebbe risultare principale, con eventuali azioni di supporto stilizzate in modo più leggero.

Impostazioni standard della sezione

Impostazioni di padding

Impostazioni di padding controllano lo spazio sopra e sotto il contenuto della sezione su desktop e mobile. Usa spaziatura più ridotta per contenuti di utilità e più generosa quando la sezione deve risultare più evidente o più facile da consultare.

Impostazioni dello sfondo sezione

Impostazioni dello sfondo sezione ti consentono di inserire un colore, un gradiente, un’immagine o un video dietro al contenuto. Questo può trasformare Rich text in un’area in evidenza più forte o in un blocco di messaggio più orientato al brand.

I colori e i gradienti di overlay sono particolarmente utili quando i contenuti multimediali di sfondo altrimenti entrerebbero in conflitto con il testo. Immagini o video di sfondo specifici per mobile possono anche aiutarti a evitare ritagli poco armoniosi sugli schermi più piccoli.

Attenzione

I contenuti multimediali di sfondo possono modificare sia la leggibilità sia lo spazio percepito. Dopo aver aggiunto uno sfondo, rivedi insieme contrasto, padding e larghezza.

Impostazioni dei separatori

Impostazioni dei separatori aggiungono una linea nella parte superiore o inferiore della sezione per creare un confine più chiaro rispetto ai contenuti vicini. Sono particolarmente utili quando il contenuto è semplice ma ha comunque bisogno di una separazione visiva.

Se lasci trasparente il colore del separatore, la sezione usa il normale comportamento del colore del bordo. Questo aiuta i separatori a integrarsi più naturalmente con il resto della pagina.

Impostazioni di visibilità

Impostazioni di visibilità controllano se la sezione appare su desktop, mobile o entrambi. Questo è utile quando vuoi messaggi più semplici, spaziature diverse o call to action diverse sugli schermi più piccoli.

Anche i blocchi Button includono il proprio controllo di visibilità, quindi puoi nascondere singole azioni senza nascondere l’intera sezione.

Impostazioni di larghezza

Impostazioni di larghezza controllano la larghezza del contenuto e la larghezza esterna della sezione. La larghezza del contenuto è la scelta principale per la larghezza di lettura, mentre la larghezza della sezione conta di più quando usi un colore di sfondo, un’immagine, un gradiente o un video.

Larghezze del contenuto più strette migliorano in genere la leggibilità dei testi più lunghi. Larghezze della sezione più ampie possono creare un impatto visivo più forte, ma è meglio controllare la pagina live perché l’editor potrebbe non riflettere completamente il layout finale.

Note sull’uso

1. Mantieni il messaggio focalizzato. Usa una heading chiara, un’idea di supporto e un’azione principale in modo che la sezione sia facile da consultare.
2. Abbina il posizionamento dell’icona al layout. Il posizionamento in alto o in basso si adatta a contenuti editoriali centrati, mentre quello a sinistra o a destra di solito funziona meglio per messaggi più brevi e orientati all’azione.
3. Usa chiaramente la gerarchia dei pulsanti. Se combini il pulsante della sezione con blocchi Button, rendi un’azione principale e le altre secondarie.
4. Proteggi il contrasto del testo. Ricontrolla heading, caption e testo del corpo ogni volta che aggiungi colori personalizzati, gradienti, immagini o sfondi video.
5. Anteprima delle modifiche di larghezza nella vetrina. La larghezza di lettura e la larghezza della sezione possono sembrare diverse nell’editor rispetto alla pagina live.
6. Rivedi entrambi i breakpoint. I controlli desktop e mobile possono modificare in modi diversi allineamento, visibilità, scelta dei media e spaziatura.
7. Fai attenzione allo stile di fallback. I valori trasparenti o in stile predefinito in genere preservano l’aspetto del tema circostante, mentre scelte esplicite di colore o media rendono la sezione più autonoma.
8. Scegli i media in modo intenzionale. Se imposti media diversi per desktop e mobile, controlla ritaglio e leggibilità su entrambe le dimensioni prima di pubblicare.