Usare tipi di carattere personalizzati nella landing page

Informazioni su come usare tipi di carattere personalizzati nelle landing page di ActiveCampaign. 

Pages è disponibile nei seguenti piani:

  • Plus
  • Professional
  • Enterprise

Con ActiveCampaign, puoi usare tipi di carattere personalizzati per il tuo account in modo da poterli utilizzare nelle tue landing page. In questo modo ti aiuta a creare un'esperienza di marca senza soluzione di continuità per i visitatori e i clienti della tua pagina.

Prendi nota

  • Il caricamento di tipi di carattere personalizzati nell'account ActiveCampaign richiede una conoscenza funzionante dei CSS
  • I tipi di carattere personalizzati possono essere utilizzati solo nelle landing page
  • Per ora, il generatore di pagine non mostrerà  il tipo di carattere personalizzato. Per visualizzare il tipo di carattere personalizzato in azione, è necessario pubblicare e visualizzare il collegamento live della pagina

Caricare tipi di carattere personalizzati nell'account ActiveCampaign

Per utilizzare tipi di carattere personalizzati nella landing page, è necessario prima caricare il file del tipo di carattere nel file manager pagine. Dovrai quindi aggiungere CSS alle impostazioni per ogni pagina che userà tipi di carattere personalizzati.

1. Creare un file dei tipi di carattere personalizzati che si desidera caricare nell'account ActiveCampaign. Questi file sono in genere in .otf o tff. 

2. Caricare e convertire i tipi di carattere sul sito Web Transfonter.

  • Visitare il sito Web Transfonter
  • Per le caselle di controllo sul lato destro, assicurarsi che siano selezionati solo WOFF e WOFF2
  • Fare clic sul pulsante "Aggiungi tipi di carattere" nella parte superiore, quindi selezionare il file dei tipi di carattere
  • Fare clic sul pulsante "Converti" per convertire i tipi di carattere

3. Caricare entrambi i riquadri dei tipi di carattere nel file manager Pagine.

  • Fare clic   su "Sito" scegliere "Pagine" dal menu a sinistra
  • Fare clic sulla scheda "File"
  • Fare clic sul pulsante "Carica"

4. Copiare il percorso di ogni file del tipo di carattere.  

  • In Pages file manager fare clic con il pulsante destro del mouse sul file del tipo di carattere WOFFe scegliere "Ottieni collegamento"
  • Copiare l'URL visualizzato e tenerlo a portata di mano
  • Ripetere questo processo per il file del tipo di carattere WOFF2

5. Individuare la pagina con cui si desidera utilizzare tipi di carattere personalizzati e accedervi.

  • In File Manager fare clic sulla scheda "Pagine"
  • Posizionare il puntatore del mouse sulla pagina di destinazione con cui si vuole lavorare
  • Fare clic su "Visualizza impostazioni pagina"

6. Copiare quindi il codice CSS seguente: 

<style>
    @font faccia {
      Famiglia di caratteri 'Nome carattere';
  src: formato url('') ('woff2'),
    formato url('') ('woff');
      spessore del carattere: normale;
      tipo di carattere: normale;
    }
   
    h1,h2,p {
        Famiglia di caratteri 'Nome carattere', sans-serif !important;
    }
</style>

7. Incollare il codice nella sezione <head> dell'area "Codice personalizzato" delle impostazioni della pagina.

predefinito

8. "Famiglia di caratteri" può essere qualsiasi nome che si desidera utilizzare. Assicurarsi che ciò che è impostato nella prima "famiglia di caratteri" corrisponda esattamente allo stesso nome impostato nell'ultima "famiglia di caratteri".

9. Copiare e incollare gli URL del percorso del file (passaggio 4 precedente) negli slot appropriati all'interno del CSS @font-face. 

10. Il secondo blocco di CSS indica alla pagina quali tag di titolo e testo usare il tipo di carattere personalizzato. È possibile utilizzare h1, h2, h3, h4, h5, h6 e p.

Il tipo di carattere personalizzato sovrascriverà tutto il testo nella landing page che rende il titolo o il tag di testo. Ad esempio, se si imposta il tipo di carattere personalizzato su "p", tutto il testo nella pagina contrassegnato come "Paragrafo" verrà sostituito con il tipo di carattere personalizzato.

11. Al termine, fare clic sul pulsante "Salva". 

Questo articolo ti è stato utile?
Utenti che ritengono sia utile: 1 su 3

Have more questions? Submit a request

Start free trial