Riprendere il design da BrandStudio
Ogni nuovo modulo adotta i colori e il carattere del tuo marchio da BrandStudio — anche quelli creati da un modello o da Kenji. Per questo, nel passaggio “Design”, in alto c'è la scheda “Marchio” con l'interruttore “Riprendere il design da BrandStudio”. Finché è attivo, i controlli sottostanti sono bloccati; se modifichi qualcosa in BrandStudio, il modulo si adegua da solo.
Se disattivi l'interruttore, il modulo mantiene l'aspetto che ha in quel momento e da lì in poi lo personalizzi tu; la scheda mostra “design proprio”. Se lo riattivi, il modulo segue di nuovo il marchio: il tuo design viene messo da parte e “Annulla: design proprio del …” lo ripristina. Se il tuo marchio non ha ancora colori, fino ad allora vale il tema semplice con il carattere del marchio.
La scheda “Marchio” compare solo se il tuo account ha un marchio. L'interruttore ha effetto subito, senza “Salva”.
- Apri il modulo nel passaggio “Design”.
- Disattiva “Riprendere il design da BrandStudio” se vuoi personalizzare tu l'aspetto.
- Imposta colori, carattere e campi e fai clic su “Salva”.
Logo e dati aziendali
Con “Mostra il logo e i dati aziendali del marchio” nella stessa scheda, sopra il modulo compaiono il logo e il nome del tuo marchio e, sotto, la ragione sociale, l'e-mail, il telefono, il sito web e le icone dei canali social che hai salvato in SocialStudio. Gli stessi dati compaiono nella notifica, nella copia e nella copia PDF, e il titolo della pagina nel browser diventa ad esempio “Prenota un tavolo · Café Lumen”.
L'interruttore è attivo per impostazione predefinita e non dipende dal design: anche chi personalizza l'aspetto mostra comunque il proprio logo. Se al marchio mancano i dati aziendali, il modulo usa il mittente di Invoice. Ha effetto dopo “Salva”; “Anteprima nel browser” mostra come appare.
- Apri il passaggio “Design”.
- Nella scheda “Marchio” attiva o disattiva “Mostra il logo e i dati aziendali del marchio”.
- Fai clic su “Salva” e controlla con “Anteprima nel browser”.
Atmosfere e colori
Se personalizzi tu l'aspetto, un clic in “Atmosfere” imposta tutto in una volta: Essenziale, Mezzanotte, Salvia, Sabbia, Rosa, Oceano, Inchiostro o Cielo. Poi rifinisci uno per uno in “Colori”: “Sfondo”, “Scheda” — la superficie su cui stanno i campi —, “Colore del testo” e “Pulsanti e accento”.
Per “Sfondo” e “Scheda” c'è anche il cursore “Opacità”, così un'immagine di sfondo può trasparire. Testo e accento restano completamente opachi: un testo semitrasparente dipenderebbe da ciò che c'è sotto e potrebbe diventare illeggibile senza che nessuno se ne accorga. Scegli colori del testo e della scheda ben distinti tra loro: sono loro a garantire la leggibilità del tuo modulo.
- Nel passaggio “Design” disattiva l'adozione del design da BrandStudio.
- Fai clic su un'atmosfera, ad esempio “Sabbia”.
- Regola i singoli colori e l'opacità e fai clic su “Salva”.
Carattere
In “Carattere” scegli uno di undici caratteri liberi — “Sistema”, Inter, DM Sans, Poppins, Space Grotesk, Karla, Lora, Playfair Display, Fraunces, Manrope o IBM Plex Mono. L'anteprima lo mostra subito.
Un carattere tuo lo carichi come file: “Carica il tuo file di carattere (woff2, max 2 MB)”. Il nome del file diventa il suo nome e “Rimuovi” lo rimuove di nuovo. Se il tuo carattere è ospitato da un servizio di caratteri web, apri “Carattere personalizzato tramite link” e inserisci il link al file CSS (https) e il nome della famiglia di caratteri: l'anteprima mostra se i due corrispondono. Il carattere viene poi caricato dal punto a cui rimanda il link. Un file caricato ha la precedenza sul link e sulla selezione.
- Nel passaggio “Design” disattiva l'adozione del design da BrandStudio.
- Scegli un carattere in “Carattere”, oppure carica un file woff2.
- Fai clic su «Salva».
Stile dei campi e arrotondamento
In “Campi” decidi l'aspetto dei campi di inserimento: “Bordo” con un contorno sottile, “Superficie” con uno sfondo leggermente colorato o “Linea” con una sola linea di base — la forma più sobria. Il cursore “Arrotondamento” rende scheda, campi e pulsanti più squadrati o più arrotondati.
Come tutti i controlli di questo passaggio, funziona solo se hai disattivato l'adozione del design da BrandStudio e ha effetto dopo “Salva”.
Immagine di sfondo
Dietro la scheda può esserci un'immagine. In “Immagine di sfondo” trovi tre fonti: un tuo file (PNG, JPEG o WebP fino a 3 MB), la ricerca “Oppure cerca immagini libere …” e “Oppure scegli dalle mie immagini” dal tuo MediaStudio. In ogni caso l'immagine viene copiata nel tuo modulo e servita dal tuo indirizzo: non è coinvolto alcun servizio esterno.
La scheda con i campi resta leggibile sopra l'immagine; quanto l'immagine traspare lo regoli con l'opacità di “Scheda”. “Rimuovi immagine” la toglie di nuovo. Un'immagine scelta viene salvata subito. Caricamento, ricerca e la tua libreria sono bloccati finché il modulo segue il tuo marchio.
- Nel passaggio “Design” disattiva l'adozione del design da BrandStudio.
- In “Immagine di sfondo” digita una parola come “café” e fai clic su “Cerca”.
- Fai clic su un'immagine: compare subito dietro il modulo.
Anteprima e prova
Al centro di “Design” il tuo modulo appare così come lo vedono i tuoi ospiti — con gli stessi colori, caratteri e righe della pagina del modulo. Con “Desktop”, “Tablet” e “Smartphone” cambi la larghezza; nella larghezza da smartphone le righe si dispongono una sotto l'altra, proprio come per l'ospite. A sinistra c'è la struttura: un clic su un campo ti porta a “Costruisci”, con quel campo già selezionato.
“Prova” rende compilabile l'anteprima: le condizioni hanno effetto e non viene salvato nulla. “Anteprima” torna alla visualizzazione precedente. “Anteprima nel browser” prima salva e poi apre la vera pagina del modulo in una nuova scheda del browser — lì vedi anche logo e dati aziendali, prezzo indicativo e totale dell'ordine. Funziona anche mentre il modulo è ancora chiuso; una fascia in alto indica “Anteprima” e da lì non viene inviato nulla.
Nel passaggio “Costruisci” il modulo appare volutamente in uno stile neutro; l'aspetto lo vedi in questo passaggio.
- Apri il passaggio “Design” e scegli “Smartphone”.
- Fai clic su “Prova” e compila il modulo a titolo di prova.
- Fai clic su “Anteprima nel browser” per vedere la pagina reale.