Comprendere gli stili per un modulo di iscrizione

Imparerai

Impari ad utilizzare il costruttore di moduli di iscrizione di Klaviyo per progettare il suo modulo, modificando le impostazioni di design disponibili nella sezione Stili. Le impostazioni di stile si applicano a tutto il suo modulo di iscrizione, compresi tutti i passaggi del modulo e il messaggio di successo. 

Mantenga un design semplice del suo modulo di iscrizione. Deve essere chiaro, ordinato e avere uno scopo principale. Inoltre, dovrà renderlo facile da leggere e da seguire. 

Prima di iniziare

Prima di creare il suo modulo di iscrizione, si rechi nella scheda Moduli di iscrizione > Crea modulo di iscrizione .Può personalizzare un modello precostituito dalla libreria dei moduli, oppure creare un nuovo modello di modulo di iscrizione. Aggiunga i blocchi di contenuto e di input che desidera includere prima dello stile. 

Se sta costruendo un modulo di iscrizione solo per dispositivi mobili, veda le nozioni di base: progettazione di moduli per dispositivi mobili.

Tipi di forme

Nella parte superiore della sezione Stili, può scegliere un tipo di modulo: popup, pagina intera, flyout o embed:

• I popup appaiono al centro della finestra del browser. Un popup attira l'attenzione e viene utilizzato al meglio per offerte importanti o messaggi critici. I popup hanno il tasso di conversione più alto di qualsiasi altro tipo di modulo. 
• I flyout scorrono nella finestra del browser da qualsiasi direzione selezionata. Questi, come i popup, possono essere utilizzati per indurre qualcuno a compiere qualcosa o per reindirizzarlo, ma poiché si tratta di un'opzione meno invasiva, può utilizzarli per raccogliere informazioni sui suoi browser in modo passivo.
• I moduli incorporati appaiono dove lei incolla lo snippet di codice fornito sul suo sito. I moduli incorporati sono il modulo di iscrizione meno invasivo e sono tipicamente utilizzati nel footer di un sito per raccogliere indirizzi e-mail. 
• I moduli a pagina intera vengono visualizzati sull'intera finestra del browser, catturando la piena attenzione dei suoi acquirenti. Si tratta di moduli ad alta conversione, poiché non possono essere facilmente trascurati, ma questo li rende anche più invadenti, poiché gli acquirenti devono interagire con il modulo per chiuderlo.
  • Prenda in considerazione l'utilizzo di un modulo a pagina intera come landing page per far crescere la sua lista di abbonati. 
• I banner appaiono come una barra nella parte superiore o inferiore di una pagina web. Sono meno invadenti dei popup o dei moduli a pagina intera, offrendo una visibilità continua e un design mobile-friendly che si integra perfettamente con il suo sito web. Può impostare il banner in modo che scorra con la pagina o che rimanga fisso, aggiungere blocchi di contenuto o campi di input direttamente al banner, oppure configurare il banner in modo che quando qualcuno lo clicca si apra un modulo diverso del suo account. 
  • Per far apparire un modulo diverso quando un acquirente clicca sul banner, clicchi sul pulsante nell'anteprima e imposti l'Azione su Apri un altro modulo, quindi scelga il modulo live che desidera visualizzare. Notare che questo non è possibile per i moduli incorporati.

Immagini di sfondo e immagini laterali 

Per aggiungere immagini personalizzate al suo modulo di iscrizione, utilizzi un'immagine laterale o di sfondo. Le immagini laterali appaiono a sinistra o a destra del contenuto del modulo, mentre le immagini di sfondo vengono visualizzate dietro i campi del modulo. 

Quando utilizza un'immagine in un modulo, ci sono alcune cose da tenere a mente:

• Ci sono molti tipi di formati di immagine tra cui scegliere. I JPEG bilanciano bene la qualità e le dimensioni per le immagini colorate, mentre i PNG possono mantenere nitide le immagini trasparenti o i loghi. 
  • Puntate a una dimensione di 50-100 KB per le immagini laterali e a meno di 200 KB per le immagini di sfondo, per garantire immagini di alta qualità senza rallentare i tempi di caricamento del vostro sito.
• Come per tutte le immagini visualizzate sul web, i file di dimensioni maggiori comportano tempi di caricamento più lenti.
  • Si noti che un'immagine a tutta larghezza a 72dpi sarà spesso più grande di 1MB, e la riduzione delle dimensioni dell'immagine può ridurne la qualità. Consideri il compromesso tra la qualità dell'immagine e il tempo di caricamento quando sceglie le immagini.
• Si assicuri di utilizzare un'immagine di qualità ragionevole per ottenere i migliori risultati. 
  
  • In tutto il web, la risoluzione di 72 dpi è la prassi migliore. Per bilanciare la qualità dell'immagine e la velocità di caricamento, cerchi di mantenere le sue immagini tra 600 e 1000 px in larghezza e meno di 2000px in altezza per le immagini a tutta larghezza. Le immagini che sono inferiori all'intera larghezza dell'e-mail possono essere più piccole di 600px.
    
    • Tenga presente che se utilizza un modulo d'iscrizione a pagina intera, avrà bisogno di un'immagine più grande e ad alta risoluzione (ad esempio, una larghezza minima di 1980px) per adattarsi al modulo di dimensioni maggiori. Tenga presente, però, che questo può avere un impatto sul tempo di caricamento.
• Aggiunga un testo alt alla sua immagine per promuovere l'accessibilità per tutti gli utenti che interagiscono con i suoi moduli. 

Poiché i moduli d'iscrizione vengono visualizzati sui browser (a differenza delle e-mail, che vengono visualizzate sugli ESP), ci sono meno raccomandazioni su come formattarli e adattarli. I browser possono riprodurre immagini di tutti i tipi e dimensioni, quindi in generale si attenga a immagini ad alta risoluzione, a file di dimensioni gestibili e verifichi l'aspetto su ogni tipo di dispositivo. 

Aggiungere un'immagine laterale

Per aggiungere un'immagine laterale:

1. Si rechi nella sezione Stili e scorra fino alle impostazioni dell'Immagine laterale.
2. Selezioni Immagine sinistra o Immagine destra, a seconda della posizione in cui desidera che l'immagine appaia.
   
3. Selezionare un'immagine. Per impostazione predefinita, i moduli con immagini laterali sono impostati a 780px di larghezza e di dimensioni medie; tuttavia, questo valore può essere regolato nella sezione Immagine laterale della scheda Stili, a seconda delle dimensioni del modulo o se desidera che l'immagine appaia più piccola o più grande.

Si noti che le immagini laterali sono impostate a livello di passo, quindi può impostare immagini separate per ogni passo del suo modulo. Per maggiori informazioni sulle opzioni di visualizzazione delle immagini laterali, consulti il nostro articolo Come aggiungere immagini laterali nei moduli di iscrizione. 

Aggiungere un'immagine di sfondo

Per aggiungere un'immagine di sfondo:

1. Attivare l'impostazione Immagine di sfondo sotto Sfondo del modulo.
2. Carichi la sua immagine utilizzando il pulsante Sfoglia.
3. Regoli le impostazioni del display a suo piacimento.
   

Se aggiunge un'immagine laterale o di sfondo al suo modulo, può visualizzare l'anteprima di tutti i passaggi del modulo, compreso il messaggio di successo, selezionando ciascun passaggio nella barra dei menu superiore. Per impostazione predefinita, l'altezza del suo modulo si regola in base al contenuto e ai campi del modulo di ciascun passo, quindi alcuni passi possono essere più alti o più bassi di altri. Quando il suo modulo include un'immagine, alcuni contenuti dell'immagine possono essere tagliati nei passaggi di dimensioni più piccole. Per evitarlo, imposti un'altezza minima alla voce Tipo di modulo nella sezione Stili. 

Opzioni di colore e spaziatura

Utilizzi le impostazioni Stili modulo e Stili campo di input per impostare i colori, i colori dei bordi, il padding e i margini. Queste impostazioni saranno applicate a tutti i passi del suo modulo, a meno che non applichi impostazioni contrastanti (ad esempio, per il testo o i colori) all'interno delle impostazioni di stile di un blocco di contenuto specifico.

Caratteri e stili di testo

Modifichi il testo (ad esempio, font, dimensione, colore, ecc.) per i suoi blocchi di contenuto (ad esempio, un campo e-mail o numero di telefono) sotto Stili di testo dei campi di input.

Modifichi il testo per un blocco di contenuto specifico cliccando sul blocco nell'anteprima del modulo e utilizzando il menu Opzioni testo che appare. KlaviyoL'editor di moduli utilizza lo standard di codifica UTF-8, il che significa che assiste i caratteri latini, le emoji, i caratteri a doppio byte e altro ancora.

Il suo modulo di iscrizione può utilizzare i font web-safe nativi degli editor di Klaviyo, uno dei nostri font personalizzati ospitati da Klaviyo, oppure può aggiungere i suoi font personalizzati. Scopra come utilizzare i font personalizzati nei suoi moduli di iscrizione. 

Icone di chiusura

Può regolare le dimensioni, il colore e lo stile dell'icona di chiusura del suo modulo (la X nell'angolo in alto a destra). Clicchi sull'icona X nell'editor di moduli, quindi regoli le impostazioni nell'editor a sinistra. Per saperne di più sullo stile dell'icona di chiusura di un modulo. 

Se ha scelto di utilizzare un modulo a pagina intera, l'unico modo in cui i suoi clienti possono chiudere il modulo è cliccando sull'icona di chiusura. Questo è utile per catturare la loro attenzione; ma si assicuri che l'icona di chiusura sia chiara e visibile, in modo che gli acquirenti non siano frustrati dall'interruzione del suo modulo a pagina intera.

HTML e CSS personalizzati

L'editor del modulo di iscrizione di Klaviyo non supporta attualmente contenuti HTML o CSS personalizzati. Per suggerimenti e ispirazioni sulla personalizzazione del suo modulo utilizzando l'editor di Klaviyo, visiti il forum della Community. 

Risultato

Ora hai imparato a regolare le varie impostazioni di stile nell'editor di moduli per progettare il tuo modulo d'iscrizione.

I prossimi passaggi

Una volta creato il suo modulo di iscrizione, impari a impostare i comportamenti del modulo, compresi i visitatori che devono vedere il modulo e quando deve apparire. Consulti il nostro articolo su come scegliere il targeting dei moduli e le impostazioni di comportamento.

Una volta pubblicato il modulo di iscrizione, personalizzi l'e-mail di conferma dell'opt-in, se il doppio opt-in è attivato per la sua lista. Quindi, costruisca una serie di benvenuto per consegnare l'offerta del suo modulo (ad esempio, uno sconto o la spedizione gratuita sul primo ordine) e introdurre i nuovi abbonati al suo marchio.

Risorse aggiuntive

• Come iniziare a usare i moduli di iscrizione
• Come fare il test A/B di un modulo di iscrizione
• Corso: Come creare moduli di iscrizione strategici