Personalizza il modulo

Le impostazioni Appearance di Sami B2B Onboarding cambiano l’aspetto dell’intero modulo: font, dimensione, larghezza, stile dei campi e colori. Valgono per un solo modulo, quindi ogni modulo può avere un aspetto proprio, e non modificano mai il tuo tema.

Apri le impostazioni Appearance

1. Apri il modulo

   Vai su Forms e fai clic su Edit accanto al modulo. Si apre il builder.

2. Apri Appearance

   Nella barra a sinistra, fai clic su Appearance. Il pannello elenca tutte le impostazioni qui sotto e l’anteprima al centro cambia man mano che le modifichi.

   

   Ogni impostazione Appearance modifica subito l’anteprima.

3. Salva

   Quando il modulo ha l’aspetto giusto, fai clic su Save nella barra di salvataggio. Se il modulo è pubblicato, chi acquista vede il nuovo aspetto alla successiva apertura.

Impostazioni di Appearance

Impostazione	Cosa cambia	Valore predefinito
Font	Il carattere dell’intero modulo. Apre il pannello Select font.	Theme default
Font size scale	La dimensione di tutto il testo del modulo, dall’80% al 130% di quella del tuo tema, a passi del 5%.	100%
Width	La dimensione massima del modulo, in px (da 320 a 1200) o % dello spazio in cui si trova (da 30 a 100). Il modulo è centrato e si restringe sugli schermi piccoli.	640 px
Layout	Default dispone i campi direttamente nella pagina. Boxed inserisce il modulo in una scheda a sé, con spaziatura interna e bordo.	Default
Style	L’aspetto di ogni casella dei campi. Vedi Stili dei campi.	Classic
Field spacing	Lo spazio tra i campi: Comfortable o Compact.	Comfortable
Color scheme	I colori di sfondo, testo e pulsanti del modulo. Vedi Colori.	Default
CSS class	Aggiunge al modulo un nome di classe tuo, così gli stili del tuo tema possono usarlo, per esempio wholesale-form.	Vuoto

Quando passi Width da px a % o viceversa, riparte da 640 px o 100%.

Scegli un font

1. Apri l’elenco dei font

   In Appearance, fai clic sulla casella Font. Si apre il pannello Select font.

2. Trova un font

   Digita in Search oppure scorri. L’elenco ha due gruppi:

   • System fonts: Theme default, il font che il tuo tema usa già, poi System UI, Helvetica, Arial, Georgia, Times New Roman e Monospace. Per questi non viene caricato nulla in più.
   • Other fonts: quasi 1.000 font web. Ognuno è mostrato con il proprio carattere. Vengono caricati da Google Fonts nella tua vetrina, il che può rendere la pagina un po’ più lenta da caricare.

3. Scegli il font e lo spessore

   Fai clic su un font. L’anteprima cambia subito. Se il font ha più spessori, scegline uno nell’elenco Weight in fondo al pannello, per esempio Regular, Bold o Italic. Fai clic su Done.

   La nota sotto Font conferma la scelta, per esempio Bold. Loads from Google Fonts on the storefront.

Stili dei campi

Fai clic sulla casella Style per vedere tutti gli otto stili, ciascuno disegnato come campo Company name di esempio. Fai clic su uno per applicarlo a ogni campo del modulo.

Stile	Aspetto di un campo
Material filled	Una casella grigia con l’etichetta all’interno, in alto.
Material outlined	Una casella con bordo e l’etichetta sul bordo superiore.
Classic	Una casella grigio chiaro con un’ombra leggera e angoli arrotondati. È l’impostazione predefinita.
Classic rounded	Classic, con caselle a riga singola completamente arrotondate.
Flat	Una casella grigia con angoli netti e senza ombra.
Flat rounded	Flat, con caselle a riga singola completamente arrotondate.
Line	Solo una linea sotto la risposta.
Line rounded	Ha lo stesso aspetto di Line: una sottolineatura non ha angoli da arrotondare.

Negli stili arrotondati, le caselle con più righe, come Long text, mantengono angoli leggermente arrotondati invece di diventare completamente rotonde.

Ogni scheda mostra l’aspetto di un campo in quello stile.

Colori

La riga Color scheme mostra dieci combinazioni già pronte: Default, Forest Light, Cool Ocean, Matcha Calm, Warm Sand, Blush, Slate, Charcoal, Forest Dark e Midnight. Ogni campione mostra i colori di sfondo, testo e pulsanti. Fai clic su uno per usarlo.

• Default usa i colori della pagina, così il modulo si abbina al tuo tema. Per cambiare quei colori, modifica le impostazioni del tuo tema.
• Qualsiasi altra combinazione applica al modulo uno sfondo proprio. I pulsanti e gli indicatori dei passaggi prendono il colore dei pulsanti della combinazione.

Crea i tuoi colori

1. Apri la combinazione

   Sotto i campioni, fai clic su Edit scheme. Si apre il pannello Editing per la combinazione scelta, per esempio Editing Warm Sand.

2. Cambia i colori

   Fai clic su un colore per aprire il selettore. Trascina nel quadrato e nelle barre dei colori, digita un codice esadecimale o usa il contagocce per prelevare un colore dallo schermo, se il tuo browser lo offre. I colori che puoi impostare:

   Colore	Cosa colora
   Background	Lo sfondo del modulo.
   Text	Etichette, titoli e risposte.
   Solid button background	I pulsanti principali, come Submit application, e gli indicatori dei passaggi.
   Solid button label	Il testo di quei pulsanti.
   Outline button	Il bordo dei pulsanti con contorno, come Back.

   Background, Text e Outline button possono riportare Theme color, il che significa che il modulo usa il colore del tuo tema in quel punto.

   Non appena cambi un colore, la combinazione diventa Custom e nella riga viene aggiunto un campione Custom. Questi colori valgono solo per questo modulo. Le combinazioni di colori del tuo tema non cambiano.

   

   Cambia un colore qualsiasi e il modulo ottiene una combinazione Custom tutta sua.

3. Chiudi o reimposta

   Chiudi il pannello per mantenere i colori. Per tornare ai colori del tuo tema, fai clic su Remove color scheme in fondo al pannello: il modulo torna a Default.

Aggiungi il tuo logo

Il logo si trova nell’intestazione del modulo, sopra il titolo.

1. Apri l’intestazione

   Nella barra, fai clic su Elements, poi su Header in cima all’elenco.

2. Carica il logo

   Attiva Show store logo, poi fai clic su Upload image e scegli il file. Deve essere un’immagine .jpg, .png o .svg di 1 MB o meno. Una dimensione di circa 200×60 px è la più adatta.

   Per cambiarlo in seguito, fai clic su Replace image. Per toglierlo, fai clic su Remove.

3. Salva

   Fai clic su Save nella barra di salvataggio.

Controlla il risultato

L’anteprima nel builder disegna il modulo con lo stesso codice della tua vetrina, quindi layout, stile dei campi, spaziatura e combinazione di colori che vedi sono quelli che ottiene chi acquista.

• Usa i pulsanti Desktop preview e Mobile preview sopra l’anteprima per controllare entrambe le dimensioni dello schermo.
• Le impostazioni che lasci al tuo tema, Theme default per il font e Default per i colori, prendono font e colori del tuo tema nella vetrina. Per vederli, fai clic su Preview (il pulsante a occhio) nella barra degli strumenti. Apre in una nuova scheda la pagina del modulo nel tuo negozio, come è stata salvata l’ultima volta.

Passaggi successivi

• Crea il tuo modulo: imposta larghezza, etichetta e segnaposto di ogni campo.
• Dopo l’invio da parte di chi si candida: scrivi la schermata di ringraziamento che chi si candida vede dopo questo modulo.
• Aggiungi un modulo al tuo negozio: metti il modulo finito in una pagina, in una sezione del tema o ovunque sia accettato l’HTML.