Come utilizzare i font personalizzati nei moduli di iscrizione

Tempo di lettura stimato 9 in minuti
|
Ultimo aggiornamento: 29 ago 2024, 16:58 EST
Imparerai

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

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

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.

Se aggiunge a Klaviyo un font personalizzato che è già in uso sul suo sito, carichi lo stile esatto del font (ad esempio, light, bold o italic) e il peso (ad esempio, 400) che il suo sito utilizza attualmente. Se carica un font e seleziona uno stile o un peso leggermente diverso, gli stili selezionati in Klaviyo potrebbero sovrastare alcuni degli stili di font esistenti nel suo sito.

Il menu Font della scheda Immagini e marchio all'interno di Klaviyo, dove può aggiungere un nuovo font Google, Adobe o importato.

Aggiungere un font Google

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.

La sezione I suoi font della scheda Immagini e marchio mostra il menu a 3 punti selezionato su un font di esempio.

Se sceglie di utilizzare i font di Google, ai fini del GDPR, tenga presente che i font di Google sono ospitati da Google. Includendo un font di Google nella sua libreria di font, utilizza il font di Google. Klaviyo dispone di una selezione di font personalizzati che utilizziamo nei nostri modelli di moduli di iscrizione, che lei può facilmente importare e utilizzare. Visualizza l'elenco dei font ospitati da Klaviyo.

Aggiunta di un font Adobe

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.

La sezione I tuoi font della scheda Immagini e marchio in un esempio di account Klaviyo mostra il menu a 3 punti selezionato su uno dei font.

Aggiunta di un font importato

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.

La sezione I tuoi font della scheda Immagini e marchio in un esempio di account Klaviyo mostra il menu a 3 punti selezionato su uno dei font.

Modificare un 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.
      Il menu Modifica carattere in Klaviyo che mostra ulteriori varianti di carattere selezionate da aggiungere ai Google Font esistenti di un account.

      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

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.
    La maschera di conferma di Elimina font che appare quando sceglie di eliminare un font.
  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

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

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 

Risorse aggiuntive 

Questo articolo è stato utile?
Usa questo modulo solo per il feedback sull'articolo. Scopri come contattare l'assistenza.

Esplora altri contenuti di Klaviyo

Community
Connettiti con altre aziende simili, partner ed esperti di Klaviyo per trovare ispirazione, condividere approfondimenti e ottenere risposte a tutte le tue domande.
Formazione dal vivo
Partecipa a una sessione dal vivo con gli esperti di Klaviyo per conoscere le linee guida consigliate, scoprire come configurare le funzionalità chiave e altro ancora.
Assistenza

Accedi all'assistenza tramite il tuo account.

Assistenza via e-mail (prova gratuita e account a pagamento) Disponibile 24 ore su 24, 7 giorni su 7

Chat/assistente virtuale
La disponibilità può variare in base alla località e al tipo di piano