Come utilizzare i font personalizzati nei moduli di iscrizione

Imparerai

Impari a progettare i suoi moduli di iscrizione con font personalizzati, in modo che i suoi clienti sperimentino una forte identità del marchio e una coerenza con il resto del suo sito.

Creare un modulo d'iscrizione dal design accattivante è fondamentale per convincerli a seguire l'obiettivo del suo modulo. Se il suo marchio utilizza dei font che non sono disponibili in modo nativo nell'editor del modulo d'iscrizione, l'aggiunta di questi font personalizzati è un modo semplice per rendere i suoi moduli coesi con il resto del sito. Dopo aver aggiunto i suoi font, può utilizzarli per personalizzare il modulo d'iscrizione come meglio crede.

Termini chiave

• Font personalizzato
  Qualsiasi font che non è fornito di default nell'editor di Klaviyo. Questo include:
  • Caratteri di Google
  • Caratteri di Adobe
  • Caratteri importati
• Font sicuro per il web
  Un font che viene negoziato localmente sulla maggior parte dei dispositivi e che quindi non deve essere caricato da una fonte esterna per essere visualizzato.
• Font di riserva
  Un font sicuro per il web che viene utilizzato se una pagina non è in grado di caricare il font primario.

Aggiungere font personalizzati al suo account

Dal menu principale sul lato sinistro, navighi su Contenuto > Immagini & Marchio. Da lì, faccia clic sulla scheda Caratteri. Può aggiungere un font Google, un font Adobe o un font importato.

Aggiungere un font Google

Per aggiungere un font Google:

1. Selezioni il menu a tendina Nome del font per visualizzare un elenco di tutti i font Google disponibili, ad eccezione dei font che ha già caricato nel suo account.
2. Scelga il carattere desiderato. Al momento della selezione, vedrà un'anteprima del font sotto il menu a tendina, oltre al numero di varianti possibili (ad esempio, grassetto, corsivo, ecc.).
   • Se desidera aggiungere più di una variante, clicchi sulla freccia accanto al numero di varianti possibili e scelga i font che desidera aggiungere.
3. Selezionare un font di ripiego.
4. Clicchi su Aggiungi font. Il font aggiunto verrà ora visualizzato nella sezione I suoi font in fondo alla pagina.

Dalla sezione I suoi font , potrà vedere i font che ha aggiunto al suo account. Per modificare o eliminare uno dei suoi font in questa sezione, selezioni i tre punti sul font.

Aggiunta di un font Adobe

Per aggiungere un font Adobe:

1. Si diriga verso Adobe Fonts.
2. Cerchi il link del suo font Adobe, quindi selezioni il suo font.
3. Accanto al nome del font, clicchi sull'icona del codice.
4. Se necessario, inserisca un nuovo nome del progetto, quindi clicchi su Salva.
5. Nel modal successivo, copi l'URL https://use.typekit.net per il font che desidera aggiungere. Non includa il file .css come parte dell'URL quando lo copia.
   
6. Ritorni a Klaviyo e incolli l'URL nel campo Indirizzo CSS.
7. Selezioni Continua, quindi scelga un font di Fallback per il font che desidera caricare. Si noti che se un font è già disponibile nel suo account, viene visualizzato un segno di spunta verde accanto al font e viene mostrato il suo font di riserva esistente.
   
8. Selezionare Aggiungi font.

Una volta aggiunto il suo font, sarà elencato nella sezione I suoi font in fondo alla pagina. Per modificare uno qualsiasi dei suoi font in questa sezione, selezioni i tre punti sul font.

Aggiunta di un font importato

Se ha acquistato o scaricato un font personalizzato che non è ospitato da una fonte terza, può comunque utilizzarlo in un modulo Klaviyo. Per prima cosa, ospita i file dei font in una posizione che sarà accessibile a Klaviyo (ad esempio, nelle risorse del suo sito o su una piattaforma di hosting di font). Si assicuri di attivare la condivisione delle risorse cross-origine (CORS) impostando l'intestazione Access-Control-Allow-Origin su *, in modo che il font sia accessibile dai dispositivi dei suoi destinatari.

Per aggiungere un font importato:

1. Dia un nome al suo font.
2. 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.
3. Opzionale: Per aggiungere ulteriori varianti, selezioni Aggiungi variante font, quindi ripeta il passaggio 2 per questa variante.
4. Selezioni Aggiungi font per aggiungere questo font alla sezione I suoi font .

Da I tuoi font, potrà vedere i font che ha importato nel suo account. Può anche eliminare o modificare i suoi font selezionando i 3 punti sul font.

Modificare un font

Per modificare un carattere personalizzato esistente:

1. Vai su Contenuto > Immagini e marchio > Caratteri.
2. Trova il carattere che desideri modificare nella sezione I tuoi caratteri in fondo alla pagina.
3. Nella scheda del carattere, clicca sui 3 puntini nell'angolo in alto.
4. Scegli Modifica. Ora sarai in grado di:
   • Modifica il carattere di riserva per ogni carattere personalizzato. 
   • Esclusivamente per i caratteri ospitati da Google e Klaviyo, fai modifiche o aggiunte ai caratteri scelti selezionando # 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.

5. Quando ha finito di modificare il font, selezioni Aggiorna font.

Cancellare un font

Per eliminare un font:

1. Si rechi nella sezione I suoi font.
2. Sul font che desidera eliminare, clicchi sui 3 puntini e scelga Elimina. Se sceglie di eliminare il suo font, si aprirà un modal che la informerà che, se il suo font viene utilizzato in qualche modulo, il suo font di riserva verrà visualizzato dopo aver eliminato il font aggiunto.
   
3. Selezioni Elimina.

Una volta eliminato un font personalizzato, tutti i moduli di Klaviyo che attualmente utilizzano il font personalizzato passeranno immediatamente al font di riserva. Se aggiunge nuovamente il font, questi moduli inizieranno a utilizzarlo di nuovo. 

Utilizzo di font personalizzati nel costruttore di moduli d'iscrizione

Per utilizzare il suo font personalizzato in un modulo d'iscrizione, è sufficiente modificare il testo nell'anteprima del modulo:

1. Passa alla scheda Modulo d'iscrizione.
2. Trovi il modulo che desidera modificare e clicchi sui 3 puntini accanto ad esso, quindi selezioni Modifica modulo.
3. Nell'anteprima del modulo, selezioni il testo che desidera modificare. 
4. Nel menu Testo sulla destra, evidenzi il testo.
5. Utilizzi il menu a tendina dei font in alto per selezionare il suo font personalizzato. Si noti che i font della sezione I tuoi font del suo account appariranno in cima all'elenco. 
   

   Durante la modifica, il font personalizzato apparirà nell'area di disegno (ad esempio, l'anteprima di modifica), ma non nel pannello sul lato sinistro. Il pannello di sinistra visualizzerà il suo font di riserva invece del font personalizzato.

6. Quando è soddisfatto delle sue modifiche, clicchi su Pubblica per renderle effettive.

Font del sito impattati da Klaviyo.js

Klaviyo attivo Tracciamento sul sito (Klaviyo.js), deve essere installato manualmente o attraverso l'integrazione del suo ecommerce per poter pubblicare i moduli di iscrizione di Klaviyo sul suo sito web. Se ha caricato solo alcune varianti di font, Klaviyo.js carica le varianti rimanenti nella sua libreria quando viene iniettato nel suo sito. Per questo motivo, i caratteri del suo sito potrebbero essere leggermente modificati in questo processo, come ad esempio un cambiamento nel peso dell'intestazione del sito. 

Ci sono 2 opzioni per risolvere le modifiche apportate ai suoi font da Klaviyo.js. Può scegliere tra:

• Cancelli i font interessati dalla libreria di font di Klaviyo. 
• Aggiorni il CSS dell'intestazione del suo sito in modo che non venga sovrascritto quando Klaviyo.js carica le varianti aggiuntive. 
  

  Poiché questa opzione richiede una conoscenza approfondita dei CSS, potrebbe richiedere l'assistenza di uno sviluppatore. Klaviyo non può offrire assistenza per la regolazione del CSS del suo sito, tuttavia disponiamo di una vasta rete di partner.

Risorse aggiuntive 

• Corso: Come creare una strategia di acquisizione efficace utilizzando i moduli di iscrizione
• Come ospitare un font personalizzato sul suo sito