Definire lo stile dei pulsanti

Personalizza i pulsanti del sito per adattarli al tuo brand.

Ultimo aggiornamento 31 gennaio 2025

Utilizza Stili sito per modificare l'aspetto dei pulsanti del sito. Puoi modificare il colore, la forma e lo stile del testo, un ottimo modo per abbinare le call to action (CTA) alla progettazione visiva del sito. Per facilitare la creazione di un look coerente, qualsiasi modifica di stile influisce sulla maggior parte dei pulsanti presenti nel sito.

Guarda un video

Accesso a questa funzionalità

Questa guida si concentra sulle opzioni di stile dei pulsanti nella versione 7.1. Per lo stile dei pulsanti nella versione 7.0, rivedi Stile dei pulsanti nella versione 7.0.

Forma e tipi di carattere dei pulsanti

Per definire lo stile dei pulsanti, ti consigliamo di aprire una pagina con un pulsante in modo da poter rivedere le modifiche nell'anteprima del sito mentre le apporti. Per definire lo stile dei pulsanti sul tuo sito:

  1. Apri il pannello Stili sito, quindi fai clic su > accanto a Pulsanti.
  2. Clicca sul tipo di pulsante di cui desideri definire lo stile: PrincipaleSecondarioTerziario. Per maggiori informazioni, dai un'occhiata a Tipi di pulsanti.

Puoi impostare i seguenti tweak per ciascun tipo:

  • Testo: il tipo di carattere e i relativi stili per i pulsanti di quel livello.
  • Forma: la forma e gli eventuali colori di riempimento del pulsante (Riempimento) o di un contorno (Nessun riempimento).
  • Contorno: lo spessore del contorno del pulsante per i pulsanti Nessun riempimento. Sui pulsanti Riempimento, modificando il cursore del contorno si modifica il padding all'esterno del pulsante.
  • Padding orizzontale: il padding a sinistra e a destra del testo del pulsante.
  • Padding verticale: il padding sopra e sotto il testo del pulsante. Questa modifica non influisce sui blocchi pulsante impostati su Riempimento nelle sezioni dell'Editor fluido. Ridimensiona i blocchi per aggiungere un padding verticale.

Le modifiche vengono salvate automaticamente. Per applicare le impostazioni di un tipo agli altri tipi, clicca su Applica a tutti i tipi di pulsante. Per ripristinare gli stili di un tipo alle impostazioni predefinite, clicca su Ripristina stili pulsanti.

Considera che, sebbene sia possibile impostare stili generali di forma e dimensione, tutti i pulsanti aumentano di dimensioni e cambiano forma per adattarsi al testo. Se includi molto testo in un pulsante, questo potrebbe apparire diverso dal previsto. Per garantire il massimo controllo sull'aspetto dei pulsanti, ti consigliamo di mantenere il testo del pulsante sotto i 25 caratteri.

Colori pulsante

Per garantire che i pulsanti si adattino al design del sito, i pulsanti seguono i colori globali del sito.

  • Imposta i colori di sfondo del pulsante e del testo del pulsante nel pannello Colori cliccando sull'icona della matita sul tuo tema.
  • Ogni tipo di pulsante ha i propri tweak per i colori di sfondo e di testo in ciascuna combinazione di colori e i blocchi hanno i propri tweak di colore dei pulsanti.
  • Quando i pulsanti sono impostati su Riempimento, il colore di sfondo del pulsante riempie il pulsante. Quando i pulsanti sono impostati su Nessun riempimento, il colore di sfondo del pulsante si applica al contorno e al testo e riempie il pulsante al passaggio del mouse.
  • Quando utilizzi la forma Sottolineatura, imposta il colore del testo del pulsante con la modifica dello sfondo del pulsante. Imposta il colore di sfondo del pulsante con la modifica del testo del pulsante.
  • È possibile utilizzare colori diversi per i pulsanti in altre sezioni cambiando il tema cromatico per le sezioni con pulsanti.

Per maggiori informazioni, visita Modificare i colori.

Tipi di pulsanti

Il pannello Pulsanti divide gli stili dei pulsanti in tre tipi: PrincipaleSecondarioTerziario. A parte i pulsanti dell'intestazione, i blocchi modulo e i pulsanti di invio dei blocchi modulo, non è possibile modificare il tipo di pulsante. La maggior parte dei pulsanti segue le impostazioni dello stile principale, ma puoi variare gli stili dei Blocchi pulsante in tutto il sito con le impostazioni secondarie e terziarie.  

Questo è un ottimo modo per evidenziare le call-to-action più importanti per i visitatori o per distinguere tra diversi tipi di link. Usa la tabella seguente per capire quali tipi di link si applicano a quali pulsanti.

Tipo di pulsante Pulsanti interessati
Principale
  • Pulsanti Aggiungi al carrello
  • Pulsanti con layout intelligenti
  • Pulsanti di intestazione, blocchi pulsante e pulsanti di invio in blocchi modulo impostati su Principale
  • Pulsante Pagamento
  • Pulsante Accetta tutto sul banner dei cookie 
  • Pulsanti Blocco donazione
  • Pulsante del Blocco di iscrizione membri
  • Pulsanti Blocco newsletter
Secondario
Terziario
  • Pulsanti di intestazione, blocchi pulsante e blocco modulo
    pulsanti di invio impostati su terziario
  • Pulsante Gestisci cookie sul banner dei cookie 

In qualche caso, alcuni tweak non influiranno su alcuni pulsanti del tuo sito che altrimenti potrebbero alterare il design del sito stesso. Ad esempio, per mantenere il layout del blocco newsletter, i tweak per il padding non avranno effetto sui pulsanti del blocco newsletter.

Per informazioni su come impostare un tipo di Blocco pulsante, visita Blocchi pulsante.

Pulsanti di stile nella versione 7.0

Se il tuo sito è nella versione 7,0, utilizza questi tweak a livello di sito per modificare l'aspetto della maggior parte dei pulsanti sul sito:

  1. Vai a una pagina che utilizza i pulsanti.
  2. Torna al pannello Sito web, clicca su Progettazione, quindi su Stili sito.
  3. Scorri fino a Pulsanti. Per i blocchi dei pulsanti, la sezione è chiamata Blocco pulsante (piccolo), (medio) o (grande).

Utilizza i seguenti tweak:

  • Stile pulsante - Scegli tra Opaco, Bordato o In rilievo. Per lo stile bordato, il testo viene visualizzato automaticamente come bianco o nero al passaggio del mouse, a seconda del colore del pulsante.
  • Forma pulsante - Scegli quadrato, arrotondato o angoli arrotondati.
  • Colore pulsante - Cambia il colore di sfondo del pulsante.
  • Colore testo pulsante - Cambia il colore del testo.
  • Font - Cambia il tipo di carattere. Non è possibile modificare la dimensione del testo dei pulsanti del blocco modulo e del blocco newsletter.
  • Alternato o (Sovrapposizione) - Disponibile in alcuni modelli, imposta colori alternativi per far risaltare i pulsanti sulle immagini di sfondo o i colori.

I tweak a livello di sito influiscono sui seguenti pulsanti:

  • Pulsanti Aggiungi al carrello
  • Blocchi Pulsante
  • Pulsanti Blocco donazione
  • Pulsanti di invio del Blocco modulo
  • Pulsanti Blocco newsletter
  • Pulsante del Blocco di iscrizione membri

Vi sono alcuni tipi di pulsanti che presentano opzioni di stile diverse:

  • I pulsanti del Carrello presentano opzioni separate in alcuni modelli.
  • I pulsanti della Pagina di copertina presentano opzioni separate.
  • I Blocchi immagine presentano opzioni separate.
  • Lo stile dei pulsanti relativo ai banner della Bedford family può essere definito nella sezione Banner.
  • Lo stile dei pulsanti di navigazione nell'intestazione della Bedford family può essere definito nella sezione Navigazione sito.
  • Lo stile dei pulsanti di navigazione nell'intestazione della Brine family può essere definito in Intestazione: Navigazione principale e Intestazione: Navigazione secondaria.
Footer Image
  • Ricevi assistenza dalla nostra community

  • Ricevi assistenza dalla nostra community in merito alle personalizzazioni avanzate.

  • Affidati a uno Squarespace Expert

  • Fatti notare online con l'aiuto di un designer o di uno sviluppatore esperto.