Come utilizzare i caratteri personalizzati nei moduli d'iscrizione
Cosa imparerai
Scopri come progettare il tuo modulo d'iscrizione con caratteri personalizzati, così chi acquista da te percepisce una forte identità del brand e coerenza con il resto del tuo sito.
Creare un modulo d'iscrizione dal design curato è fondamentale per invogliare le persone a portare a termine l'obiettivo del tuo modulo. Se il tuo brand usa font che non sono disponibili nativamente nell'editor dei moduli d'iscrizione, aggiungere questi font personalizzati è un modo semplice per fare in modo che i tuoi moduli siano coerenti con il resto del tuo sito. Dopo aver aggiunto i tuoi font, puoi usare il font per personalizzare i moduli d'iscrizione come preferisci.
Termini chiave
- Carattere personalizzato
Qualsiasi carattere che non sia fornito di default nell'editor di Klaviyo. Questo include:- Caratteri di Google
- Caratteri di Adobe
- Caratteri importati
- Carattere compatibile con il web
Un carattere memorizzato localmente sulla maggior parte dei dispositivi e che quindi non deve essere caricato da una fonte esterna per essere visualizzato. - Carattere di fallback
Un carattere web-safe che viene utilizzato se una pagina non riesce a caricare il carattere principale.
Aggiungere caratteri personalizzati al tuo account
Dal menu principale sul lato sinistro, vai a Contenuti > Immagini e brand. Da qui, fai clic sulla scheda Font. Puoi aggiungere un font Google, un font Adobe o un font importato.
Se aggiungi a Klaviyo un carattere personalizzato già in uso sul tuo sito, carica lo stile esatto del carattere (ad esempio light, bold o italic) e il peso (ad esempio 400) attualmente utilizzati dal tuo sito. Se carichi un font e selezioni uno stile o un peso leggermente diverso, gli stili selezionati in Klaviyo potrebbero sovrascrivere alcuni degli stili dei font già presenti sul tuo sito.
Aggiungere un carattere di Google
Per aggiungere un carattere di Google:
- Seleziona il menu a discesa Nome carattere per vedere un elenco di tutti i caratteri Google disponibili, ad eccezione dei caratteri che hai già caricato nel tuo account.
- Scegli il font desiderato. Dopo averlo selezionato, vedrai un'anteprima del font sotto il menu a discesa, insieme al numero di varianti possibili (ad esempio grassetto, corsivo, ecc.).
- Se vuoi aggiungere più di 1 variante, fai clic sulla freccia accanto al numero di varianti possibili e scegli i caratteri che vuoi aggiungere.
- Seleziona un carattere di riserva.
- Clicca su Aggiungi carattere. Il carattere che hai aggiunto ora verrà visualizzato nella sezione I tuoi caratteri in fondo alla pagina.
Dalla sezione I tuoi caratteri potrai vedere i caratteri che hai aggiunto al tuo account. Per modificare o eliminare uno qualsiasi dei tuoi caratteri in questa sezione, seleziona i tre puntini sul carattere.
Se scegli di utilizzare Google Fonts, ai fini del GDPR, tieni presente che Google Fonts sono ospitati da Google. Inserendo un carattere di Google nella tua libreria di caratteri, utilizzi il carattere di Google. Klaviyo dispone di una selezione di caratteri personalizzati che utilizziamo nei nostri modelli di modulo d'iscrizione, che puoi importare e utilizzare facilmente. Visualizza l’elenco dei font ospitati da Klaviyo.
Aggiunta di un font Adobe
Devi avere un account Adobe per usare i caratteri Adobe.
Per aggiungere un carattere di Adobe:
- Vai su Adobe Fonts.
- Cerca il link del tuo carattere Adobe, quindi seleziona il tuo carattere.
- Accanto al nome del font, fai clic sull'icona del codice.
- Se necessario, inserisci un nuovo nome del progetto, quindi clicca su Salva.
- Nella finestra modale successiva, copia l'URL https://use.typekit.net del font che vuoi aggiungere. Non includere .css come parte dell'URL quando lo copi.
- Torna a Klaviyo e incolla l'URL nel campo Indirizzo CSS.
- Seleziona Continua, quindi scegli un Font di fallback per il font che vuoi caricare. Tieni presente che, se un font è già disponibile nel tuo account, accanto al font viene visualizzato un segno di spunta verde e viene mostrato il font di fallback esistente.
- Seleziona Aggiungi carattere.
Dopo aver aggiunto il tuo carattere, verrà elencato nella sezione I tuoi caratteri in fondo alla pagina. Per modificare uno qualsiasi dei tuoi caratteri in questa sezione, seleziona i tre puntini sul carattere.
Aggiungi un carattere importato
Se hai acquistato o scaricato un font personalizzato che non è ospitato da una fonte di terze parti, puoi comunque usarlo in un modulo Klaviyo. Per prima cosa, ospita i file dei caratteri in una posizione accessibile a Klaviyo (ad esempio, nelle risorse del tuo sito o su una piattaforma di hosting di caratteri). Assicurati di abilitare la condivisione delle risorse tra origini incrociate (CORS) impostando Access-Control-Allow-Origin header su *, in modo che il carattere possa essere accessibile ai dispositivi dei destinatari.
Per aggiungere un carattere importato:
- Dai un nome al tuo carattere.
- Specifica un peso del carattere, uno stile e un URL di origine. L'URL di origine deve essere un URL valido che termina con WOFF, WOFF2, TTF, EOT o SVG.
- Facoltativo: per aggiungere varianti aggiuntive, seleziona Aggiungi variante del font, quindi ripeti il passaggio 2 per questa variante.
- Seleziona Aggiungi font per aggiungere questo font alla sezione I tuoi font .
Da I tuoi caratteri, potrai vedere i caratteri che hai importato nel tuo account. Puoi anche eliminare o modificare i tuoi caratteri selezionando i 3 puntini sul carattere.
Modifica un carattere
Per modificare un carattere personalizzato esistente:
- Vai su Contenuto > Immagini e marchio > Caratteri.
- Trova il carattere che desideri modificare nella sezione I tuoi caratteri in fondo alla pagina.
- Nella scheda del carattere, clicca sui 3 puntini nell'angolo in alto.
- Scegli Modifica. Ora sarai in grado di:
- Modifica il font di riserva per ogni font personalizzato.
- Solo per i caratteri ospitati da Google e Klaviyo, modifica o aggiungi alle varianti selezionate selezionando N. di varianti di carattere per espandere l'elenco, quindi selezionando i caratteri che desideri aggiungere.
Non puoi aggiungere varianti ai caratteri Adobe dopo averli caricati, poiché le varianti sono integrate nel link di Typekit. Per aggiungere varianti a un carattere Adobe, devi eliminare il carattere esistente e aggiungerlo nuovamente utilizzando un altro link Typekit che contenga tutte le varianti che desideri includere.
- Al termine della modifica del font, seleziona Aggiorna font.
Eliminazione di un carattere
Per eliminare un carattere:
- Vai alla sezione I tuoi font .
- Sul font che vuoi eliminare, clicca sui 3 puntini e poi scegli Elimina. Se scegli di eliminare il tuo font, comparirà una finestra modale che ti avviserà che, se il tuo font è utilizzato in qualsiasi modulo, dopo aver eliminato il font aggiunto verrà mostrato il font di fallback.
- Seleziona Elimina.
Una volta eliminato un carattere personalizzato, tutti i moduli in Klaviyo che attualmente utilizzano il carattere personalizzato passeranno immediatamente al carattere di riserva. Se aggiungi di nuovo il carattere, quei moduli ricominceranno a utilizzarlo.
Utilizzare font personalizzati nello strumento per la creazione di moduli d'iscrizione
Per usare il tuo font personalizzato in un modulo d'iscrizione, ti basta modificare il testo nell'anteprima del modulo:
- Accedi alla scheda Moduli d'iscrizione.
- Trova il modulo che vuoi modificare e clicca sui 3 puntini accanto, quindi seleziona Modifica modulo.
- Nell'anteprima del modulo, seleziona il testo che vuoi modificare.
- Nel menu Testo a destra, evidenzia il testo.
- Usa il menu a tendina dei caratteri in alto per selezionare il tuo carattere personalizzato. Nota che i caratteri della sezione I tuoi caratteri del tuo account appariranno in cima all'elenco.
Durante la modifica, il tuo carattere personalizzato apparirà nell'area di lavoro (ad esempio l'anteprima di modifica), ma non nel pannello sul lato sinistro. Il pannello di sinistra visualizzerà il tuo carattere di riserva invece del carattere personalizzato.
- Quando sei soddisfatto delle modifiche, clicca su Pubblica per renderle attive.
Carattere del sito modificato da Klaviyo.js
Klaviyo tracciamento Active on site attivo (Klaviyo.js), deve essere installato manualmente o tramite l’integrazione del tuo e-commerce per pubblicare i moduli d’iscrizione di Klaviyo sul tuo sito web. Se hai caricato solo alcune varianti di caratteri, Klaviyo.js carica le varianti rimanenti nella libreria quando viene inserito nel tuo sito. Per questo motivo, i caratteri del tuo sito potrebbero essere leggermente modificati durante questo processo, ad esempio con un cambiamento del peso dell'intestazione del sito.
Esistono due opzioni per risolvere le modifiche apportate da Klaviyo.js ai caratteri. Puoi:
- Elimina i caratteri pertinenti dalla libreria di caratteri di Klaviyo.
- Aggiorna il CSS dell'intestazione del sito in modo che non venga sovrascritto quando Klaviyo.js carica le varianti aggiuntive.
Poiché questa opzione richiede una conoscenza approfondita dei CSS, potrebbe essere necessaria l'assistenza di uno sviluppatore. Klaviyo non può offrire assistenza per l'adeguamento del CSS del tuo sito, tuttavia disponiamo di una vasta rete di partner.