Personalizzare i blocchi modulo

Personalizza i moduli di contatto del sito per adattarli al tuo marchio.

Ultimo aggiornamento 11 settembre 2024

Usa gli stili del sito per modificare l'aspetto dei blocchi modulo sul tuo sito. Puoi modificare i tipi di carattere e i colori del testo e dei pulsanti del modulo, così come lo stile e la forma degli altri elementi del modulo, come i campi di testo e le caselle di controllo.

Tutti i blocchi modulo del sito seguono queste impostazioni di stile, per cui è un ottimo modo per conferire uno stile unico ai tuoi moduli, pur mantenendoli coerenti.

Accesso a questa funzionalità

Gran parte di questa guida è dedicata soprattutto alle opzioni di stile dei moduli disponibili solo per i siti in versione 7.1. Se il tuo sito è in versione 7.0, consulta la sezione Personalizzare i blocchi modulo nella versione 7.0.

Guarda un video

Aprire le impostazioni di stile del blocco modulo

Per aprire le impostazioni di stile del blocco modulo:

  1. Apri il pannello Pagine e clicca su una pagina che contiene un blocco modulo, in modo da poter rivedere le modifiche nell'anteprima del sito man mano che le effettui.
  2. Apri il pannello Stili sito, quindi fai clic su > accanto a Moduli.
  3. Clicca su Cambia per scegliere un pacchetto di moduli predefiniti.
  4. Clicca su Effetti per personalizzare il campo modulo e le animazioni dei pulsanti di invio. 
  5. Clicca su Opzioni campo per personalizzare gli stili delle caselle di controllo, dei pulsanti di opzione e dei campi di sondaggio.
  6. Clicca su Tipi di carattere per personalizzare gli stili dei blocchi di testo del modulo.
  7. Clicca su Colori per personalizzare gli stili di colore dei blocchi modulo.
  8. Clicca su Spaziatura modulo per personalizzare la quantità di spazio bianco contenuta nel modulo.
  9. Dopo aver apportato le modifiche, fai clic su Salva.

Considera che queste impostazioni di stile riguardano tutti i blocchi modulo del tuo sito. Non è possibile dare ai diversi blocchi modulo impostazioni di stile diverse, a parte i colori, che possono essere diversi da un blocco all'altro nel caso in cui i blocchi si trovino in sezioni con temi cromatici diversi.

Gli altri tipi di moduli, come i blocchi newsletter, i moduli per le pagine di copertina e i moduli per i prodotti, hanno impostazioni di stile specifiche. Per maggiori informazioni sugli altri tipi di moduli, visita la sezione Aggiungere moduli al tuo sito.

Scegliere e personalizzare un pacchetto di moduli

I pacchetti di moduli sono degli stili di moduli preimpostati che puoi scegliere come punto di partenza per il tuo stile. Se dopo aver selezionato un pacchetto di moduli modifichi le tue impostazioni e poi passi a un altro pacchetto di moduli, le modifiche apportate al pacchetto di moduli iniziale non verranno salvate.

Ogni pacchetto di moduli include dei preset per le opzioni di stile che appaiono nel pannello dei moduli:

  • Forma del campo - Imposta la forma dei campi del modulo. Scegli tra Quadrato, Rettangolo arrotondato, Angoli arrotondati o Angoli personalizzati.
  • Riempimento campo - Attiva questa opzione per aggiungere un colore di sfondo al campo del modulo. Quando l'opzione è disattivata, i campi del modulo corrispondono al colore del blocco modulo.
  • Bordo - Scegli Nessuno per non avere bordi o Tutti per far apparire il bordo su tutti i lati. A seconda delle altre impostazioni, l'opzione Nessuno potrebbe non essere disponibile. Se la forma è impostata su Quadrato, è possibile scegliere anche In basso, per un bordo che corre solo lungo il lato inferiore del campo, come una sottolineatura.
  • Spessore bordo - Imposta lo spessore delle linee del bordo intorno ai campi del modulo. Questa opzione non appare se è stata selezionata l'opzione Nessuno per il bordo.
  • Padding - Scegli la quantità di padding che appare intorno al testo nel campo. Scegli S, M o L, oppure clicca su ... per impostare un padding personalizzato.
  • Opzioni campo - Personalizza l'aspetto degli elementi Casella di spunta, Pulsante di opzione e Sondaggio per alcuni campi.

Dopo aver selezionato un pacchetto di moduli, è possibile personalizzare ulteriormente queste impostazioni di stile nel pannello Moduli.

Modificare i tipi di carattere

Nel pannello di personalizzazione Moduli, clicca su Tipo di carattere per modificare il carattere di ciascun campo:

  • Titolo - Il testo sopra ogni campo
  • Input - Il testo che i visitatori inseriscono in ogni campo
  • Descrizione - Il testo sotto ogni campo
  • Didascalia - Il testo sotto la descrizione, come "Nome" e "Cognome" nei campi del nome.
  • Segnaposto - Il testo che è possibile visualizzare in ogni campo
  • Opzione - Il testo per le opzioni selezionabili in caselle di controllo, pulsanti opzione e campi sondaggio
  • Titolo del sondaggio - Il testo della domanda del sondaggio
  • Selezione elenco a discesa - Il testo del menu a discesa

Il testo del pulsante Invia segue gli stili dei pulsanti primari, secondari o terziari del sito, a seconda di quanto selezionato nella scheda Progettazione del blocco modulo.

Messaggio di conferma

Se aggiungi un messaggio post-invio, il testo segue queste opzioni di stile negli stili globali del sito:

  • Tipo di carattere - Impostazioni Paragrafo nel pannello Tipi di carattere
  • Dimensione: cursore del Paragrafo 2 nella sezione Paragrafi del pannello Tipi di carattere
  • ColoreParagrafo (medio) colore nel tema di sezione scelto, oppure Paragrafo (medio) su sfondo se hai abilitato uno sfondo sul blocco.

Modificare i colori

Per impostazione predefinita, i blocchi modulo utilizzano i colori della tavolozza del sito. Nel pannello di stile Moduli, clicca su Colori, quindi attiva l'opzioni Usa colori del tema per personalizzare manualmente i colori degli elementi dei blocchi modulo in base al tema cromatico della sezione.

Se la modifica include su Sfondo, si applicherà solo ai blocchi modulo con il colore di sfondo abilitato o ai blocchi modulo impostati per aprirsi in una lightbox. Le modifiche senza su Sfondo si applicano ai blocchi modulo senza colore di sfondo o lightbox abilitato.

Personalizzare i blocchi modulo nella versione 7.0

Nella versione 7.0, gli stili dei blocchi modulo seguono generalmente le modifiche del corpo del testo e dei pulsanti del tuo modello, tuttavia le opzioni variano a seconda del modello e alcune etichette dei campi modulo hanno una dimensione fissa. Ad esempio, non è possibile modificare le dimensioni delle etichette "Nome" e "Cognome" che appaiono sotto i campi "Nome". Inoltre, potrebbe non essere possibile modificare il colore del testo segnaposto nei campi.

Il modulo lightbox ha uno stile fisso. Non è possibile modificare la maggior parte delle impostazioni relative a tipo di carattere o colore. Per maggiori informazioni sul come definire lo stile del tuo sito, visita Apportare modifiche di stile.

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.