Come aggiungere un pulsante personalizzato a Squarespace

Il pulsante call-to-action è l’elemento di maggior valore su una landing page, poiché ogni visitatore che indirizzi verso il checkout, un modulo di contatto o una risorsa scaricabile deve cliccarne uno per arrivarci. E un pulsante che risalta rispetto alla sezione circostante — con un colore proprio, un’icona o un effetto hover — ottiene un tasso di clic sensibilmente migliore rispetto a uno che si confonde con il resto.

Squarespace dispone di un Blocco Pulsante nativo, ma lo stile si definisce dal pannello globale Stili del sito anziché selezionando il pulsante stesso. I pulsanti sono disponibili in tre tipi: primario, secondario e terziario. Ogni tipo viene stilizzato su tutto il sito, quindi in totale hai a disposizione tre design per i pulsanti. Modificare lo stile di un pulsante primario si applica a ogni pulsante primario presente, e lo stesso vale per i tipi secondario e terziario. Le impostazioni sono inoltre limitate di per sé, senza opzioni per icone, effetti hover o gradienti.

Esistono due modi per dare a un singolo pulsante un design proprio senza modificare tutti gli altri pulsanti del sito. Puoi scrivere o acquistare CSS personalizzato e incollarlo nel pannello CSS personalizzato per intervenire su quel blocco specifico, oppure puoi usare un widget gratuito in hosting, stilizzare il pulsante in un builder visuale e incollare il codice embed in un blocco codice.

Se sei proprietario di un sito Squarespace, un marketer o un designer e desideri un pulsante CTA personalizzato su Squarespace senza scrivere CSS o pagare uno sviluppatore per uno snippet, questa guida ti spiega come aggiungere un pulsante personalizzato a Squarespace con entrambi i metodi — partendo dal metodo CSS per poi passare al widget.

Opzione 1: Usare i blocchi nativi con snippet CSS personalizzati

Il modo standard per ottenere un design unico per un pulsante su una pagina Squarespace è aggiungere il blocco pulsante nativo e poi sovrascriverne lo stile con il proprio CSS. Squarespace mette a disposizione un pannello CSS personalizzato a questo scopo, e puntare un singolo blocco tramite il suo ID limita la modifica a quel pulsante anziché applicarla a tutti i pulsanti dello stesso tipo.

Ecco come aggiungere un pulsante su Squarespace con CSS personalizzato:

1. Apri la pagina nell’editor, passa il mouse sulla sezione in cui vuoi aggiungere il pulsante, clicca su Aggiungi Blocco e scegli Pulsante.

2. Clicca sull’icona della matita o fai doppio clic sul pulsante per impostare il testo e il link. Scegli primario, secondario o terziario, quindi clicca su Salva nell’angolo in alto a sinistra.

3. Ora trova l’ID del blocco. Ogni blocco su una pagina Squarespace ha un ID univoco, e inserirlo prima del CSS limita la modifica a quel singolo pulsante anziché applicarla a tutti i pulsanti dello stesso tipo. Puoi trovarlo ispezionando la pagina nel browser, cliccando con il tasto destro sul blocco e selezionando Ispeziona, oppure utilizzando una delle estensioni gratuite del browser per trovare gli ID di Squarespace. 

4. Al di fuori dell’editor, vai su Sito web nella barra laterale, clicca su Pagine, poi su Codice personalizzato e seleziona CSS personalizzato.

5. Scrivi e salva le tue regole — punta quell’ID del blocco, quindi clicca su Salva. Gli stili nativi di Squarespace sono abbastanza specifici da richiedere spesso l’aggiunta di !important affinché i tuoi abbiano effetto. Una volta salvato, quel singolo pulsante avrà l’aspetto desiderato mentre tutti gli altri pulsanti del sito resteranno invariati.

L’errore più comune riguarda il targeting: uno snippet scritto per “.sqs-block-button-element” senza un ID del blocco davanti modifica lo stile di ogni pulsante nativo del sito, incluso il CTA nell’header e i pulsanti del checkout. Un altro problema frequente è la resa su mobile — larghezze fisse e dimensioni del font elevate che sembrano perfette su desktop possono spingere il pulsante fuori dallo schermo del telefono o spezzare il testo in righe di una sola lettera.

Gli snippet sono abbastanza facili da trovare, e i designer di Squarespace ne pubblicano molti gratuitamente sui loro blog, anche se gli effetti hover e le animazioni più elaborati tendono a essere venduti come componenti aggiuntivi a pagamento. In ogni caso, stai incollando del codice che non hai scritto in un pannello che influisce su tutto il sito, e sei da solo quando si tratta di fare il debug se qualcosa non funziona come previsto.

Opzione 2: Aggiungere un widget pulsante gratuito e personalizzabile (consigliato)

Creare il pulsante in uno strumento separato è l’alternativa al CSS personalizzato su Squarespace, poiché stai inserendo un nuovo pulsante nella pagina anziché sovrascrivere lo stile di uno nativo. In questo caso, configuri il pulsante in un builder visuale, copi il codice embed e lo incolli in un blocco codice sulla tua pagina.

Prima di iniziare, verifica il tuo piano Squarespace. Aggiungere un codice embed a un blocco codice è una funzionalità premium che richiede il piano Core o superiore. Con il piano base, il codice resta nel blocco ma non funziona.

Per quanto riguarda quale widget scegliere, il Widget Pulsante di Jotform è un widget pulsante gratuito per Squarespace che offre un controllo visivo superiore rispetto al blocco nativo. Puoi personalizzare in modo indipendente lo sfondo, il testo e i colori hover, aggiungere un’icona prima o dopo l’etichetta e regolare il raggio degli angoli, l’altezza, il padding, la dimensione del testo e l’ombra. 

Ecco come aggiungere un pulsante su Squarespace utilizzando il widget:

1. Nella pagina del tuo Workspace Jotform, clicca su Crea, seleziona Widget per siti web, cerca “Button” e poi clicca su Usa Widget.

2. Nella scheda Generale, scegli cosa fa il pulsante — se aprire una pagina web, avviare un’email o aprire una chat WhatsApp — e poi inserisci l’URL del link e l’etichetta del pulsante. Passa alla scheda Stile per colori, icone e forme, poi alla scheda Layout per scegliere se il pulsante è inline o flottante e se appare su desktop, mobile o entrambi.

3. Clicca su Pubblica, poi clicca su Copia Codice nella sezione Embed. 

4. Nel tuo editor Squarespace, clicca su Aggiungi Blocco, scegli Codice, imposta la modalità del blocco su HTML, elimina il testo segnaposto, incolla il codice e clicca su Salva.

Poiché il pulsante è stilizzato in Jotform anziché nel pannello CSS personalizzato, non entrerà in conflitto con gli Stili del sito globali e le tue modifiche non influiranno sugli altri pulsanti del sito. Testare un colore o un’etichetta diversi significa modificare il widget invece di cercare un ID del blocco e riscrivere uno snippet.

Potenzia il tuo sito Squarespace con widget intelligenti e serverless

Come marketer, proprietario di un sito o designer, il tuo tempo è troppo prezioso per spenderlo a rintracciare un ID del blocco solo perché un CTA abbia un aspetto diverso dal resto del sito. Un widget pulsante risolve il problema in pochi minuti, e puoi modificarne lo stile in seguito senza dover toccare di nuovo il pannello CSS personalizzato.

Un pulsante è solo uno dei tanti elementi che puoi aggiungere a una pagina Squarespace senza uno snippet di codice o un plug-in a pagamento. La directory dei widget gratuiti per siti web di Jotform offre più di 150 opzioni, tra cui

• Un timer per il conto alla rovescia per un lancio o una scadenza di iscrizione, che crea un senso di urgenza impossibile da ottenere con un pulsante statico
• Un popup per l’offerta di iscrizione che altrimenti richiederebbe un plug-in premium
• Un feed social che mantiene i tuoi ultimi post sulla pagina, così un sito che aggiorni di rado continua a sembrare attuale

Ognuno di questi si incorpora tramite un blocco codice nello stesso modo del pulsante. Ciò significa che non devi acquistare un altro snippet o plug-in ogni volta che vuoi aggiungere un elemento in più a una pagina.

Se stai ancora creando un sito web o pianificando una riprogettazione, vale la pena sapere quali elementi puoi aggiungere in seguito senza bisogno di uno sviluppatore. L’integrazione Jotform-Squarespace incorpora i moduli nel tuo sito nello stesso modo, così un pulsante che indirizza le persone a una pagina di iscrizione può passare il testimone al modulo che raccoglie le loro informazioni.

Indipendentemente dall’alternativa scelta per la call-to-action su Squarespace, un pulsante che si distingue vale più di uno che si confonde con tutto il resto della pagina. Il widget è semplicemente un modo più veloce e conveniente per ottenere quel clic.