Pulsanti

Link in evidenza

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

Video utili

Video Shopify Academy: personalizzare il tuo negozio

Video Shopify Academy: personalizzare il tuo negozio

Usa Buttons per inserire una o più azioni chiare ovunque i clienti abbiano bisogno di un passo successivo evidente. Funziona bene per call to action di landing page, gruppi di link rapidi, inviti promozionali o semplici scorciatoie di navigazione. Per una panoramica più ampia su come funzionano sezioni e blocchi nell’editor, consulta documentazione Shopify sulle sezioni e i blocchi

Impostazioni principali

I controlli principali della sezione determinano come il gruppo di pulsanti è disposto su desktop e mobile. Le impostazioni di allineamento separate consentono di mantenere una presentazione desktop più ampia, restringendo il layout per schermi più piccoli.

Layout alterna il gruppo tra una riga orizzontale e una colonna verticale. Le righe funzionano meglio per un piccolo insieme di etichette brevi, mentre le colonne sono più facili da scansionare quando le etichette sono più lunghe o ogni azione richiede più spazio.

Quando aggiungi più di un pulsante, Larghezza del pulsante aiuta a controllare il ritmo visivo. Mantieni larghezze miste quando le etichette variano sensibilmente in lunghezza e usa larghezze uguali quando desideri un gruppo di pulsanti più pulito e uniforme.

Consiglio

Se i pulsanti risultano troppo ravvicinati su mobile, prova un layout a colonna prima di ridurre il testo dei pulsanti. Le azioni impilate sono spesso più facili da scansionare e toccare.

Tipi di blocco supportati

1. Button

Blocco Button

Un blocco Button aggiunge un’altra azione alla sezione con il proprio testo, link, stile, icona, comportamento della larghezza su mobile e visibilità del dispositivo. Scopri di più sul Pulsante.

Usa i blocchi Button quando desideri più azioni nello stesso gruppo, come call to action primarie e secondarie o un breve elenco di link di destinazione. Puoi anche nascondere i singoli pulsanti in base al dispositivo, il che è utile quando mobile e desktop richiedono insiemi di azioni leggermente diversi.

Se usi insieme più blocchi Button, mantieni evidente la gerarchia visiva. In genere un’azione primaria forte e una o due azioni di supporto funzionano meglio di diversi pulsanti ugualmente in evidenza.

Impostazioni specifiche della sezione

Impostazioni di colore

Le impostazioni di colore sostituiscono i colori predefiniti di icona, testo e sottotitolo solo per questa sezione. Sono particolarmente utili quando aggiungi uno sfondo personalizzato e hai bisogno di un contrasto più forte o di una resa cromatica più intenzionale.

Regola questi colori insieme invece che uno alla volta. Se l’area dell’intestazione diventa più difficile da leggere sullo sfondo, aggiorna prima i colori del testo e del sottotitolo prima di modificare gli stili dei pulsanti.

Se usi uno sfondo o un overlay personalizzati, verifica sempre che il testo dell’intestazione, le icone e i pulsanti restino facilmente leggibili a colpo d’occhio.

Impostazioni standard della sezione

Impostazioni dell’header

Impostazioni dell’header controllano il contenuto introduttivo opzionale sopra il gruppo di pulsanti. In questa sezione, possono includere anche un pulsante integrato, utile quando desideri un semplice layout con intestazione e azione senza affidarti solo ai blocchi Button.

Usa l’area dell’intestazione quando i pulsanti hanno bisogno di contesto, ad esempio un breve messaggio promozionale o un’istruzione. Il pulsante integrato ha uno stile, un’icona, un link, una posizione e controlli di larghezza per mobile propri, e queste impostazioni si applicano solo a quel pulsante a livello di sezione.

Se combini il pulsante integrato con i blocchi Button, decidi quale azione deve essere prioritaria. Mantieni un pulsante visivamente dominante in modo che la sezione non sembri un elenco di scelte in competizione.

Nota

I pulsanti con sola icona sono più adatti ai casi in cui il significato è inequivocabile. Le etichette testuali sono in genere più chiare e più facili da scansionare.

Impostazioni dello sfondo sezione

Impostazioni dello sfondo sezione consentono di posizionare il gruppo di pulsanti sopra un colore, un gradiente, un’immagine o un video. Questo può trasformare una semplice area di azione in una sezione promozionale più forte, ma gli sfondi influiscono anche su leggibilità e spaziatura.

Usa sfondi più chiari per introduzioni con molto testo, oppure aumenta l’intensità dell’overlay quando l’immagine di sfondo compete con i pulsanti. I media di sfondo specifici per mobile possono aiutare a mantenere la sezione più pulita su schermi più piccoli.

Impostazioni di padding

Impostazioni di padding controllano lo spazio sopra e sotto la sezione. Riduci il padding quando Buttons supporta contenuti vicini, oppure aumentalo quando vuoi che le azioni si distinguano come destinazione autonoma.

Impostazioni dei separatori

Impostazioni dei separatori aggiungono una linea opzionale sopra o sotto la sezione. Usa i separatori quando desideri una separazione visiva delicata senza introdurre un trattamento di sfondo completo.

Impostazioni di visibilità

Impostazioni di visibilità controllano se l’intera sezione appare su desktop, mobile o entrambi. Questo è utile quando desideri una sezione di azione dedicata per mobile invece di cercare di far funzionare ovunque un unico layout.

Impostazioni di larghezza

Impostazioni di larghezza controllano la larghezza del contenuto e la larghezza esterna della sezione. Larghezze del contenuto più strette possono rendere un piccolo gruppo di pulsanti più intenzionale, mentre larghezze della sezione più ampie sono più efficaci quando abbini la sezione a uno sfondo forte.

Attenzione

Le modifiche alla larghezza possono apparire diverse nell’editor rispetto alla pagina live, soprattutto con layout a tutta larghezza o full-bleed. Visualizza l’anteprima della pagina prima di finalizzare spaziatura e allineamento.

Note sull’uso

1. Mantieni breve l’elenco. Usa questa sezione per un insieme mirato di azioni invece che per un lungo menu di link.
2. Abbina il layout alla lunghezza dell’etichetta. Scegli una riga per testi brevi dei pulsanti e una colonna quando i pulsanti necessitano di più spazio.
3. Metti in primo piano un’azione prioritaria. Rendi il pulsante più importante visivamente il più forte e mantieni più contenute le azioni secondarie.
4. Rivedi separatamente desktop e mobile. Allineamento, larghezza, visibilità e scelta dei media possono modificare il layout della sezione e la leggibilità tra le diverse viewport.
5. Usa in modo intenzionale lo stile predefinito. Valori vuoti, trasparenti o altrimenti neutri di solito preservano lo stile di fallback, mentre colori o media espliciti rendono la sezione più autonoma.
6. Controlla il comportamento dei media prima della pubblicazione. Se usi media diversi per desktop e mobile, verifica il ritaglio, il caricamento e la leggibilità del testo su entrambe le dimensioni.