Informazioni sugli stili per un modulo di iscrizione

Cosa imparerai

Scopri come usare il generatore di moduli d'iscrizione di Klaviyo per progettare il tuo modulo modificando le impostazioni di design disponibili nella sezione Stili. Le impostazioni di stile si applicano a tutto il tuo modulo d'iscrizione, anche a tutti i passaggi del modulo e al relativo messaggio di conferma.

Mantieni semplice il design del tuo modulo d'iscrizione. Deve essere chiaro, ordinato e avere 1 scopo principale. Inoltre, dovrai fare in modo che sia facile da leggere e seguire.

Prima di iniziare

Prima di applicare uno stile al tuo modulo d'iscrizione, vai alla scheda Moduli di iscrizione > Crea un modulo d'iscrizione. Puoi personalizzare un modello predefinito dalla libreria dei moduli oppure creare un nuovo modello di modulo d'iscrizione. Aggiungi tutti i blocchi di contenuto e di input che vuoi includere prima di applicare uno stile.

Se stai creando un modulo d'iscrizione solo per dispositivi mobili, consulta nozioni di base: progettazione di moduli per dispositivi mobili.

Tipi di modulo

In alto nella sezione Stili, puoi scegliere un tipo di modulo: popup, pagina intera, flyout o incorporato:

• I pop-up appaiono al centro della finestra del browser. Un pop-up cattura l'attenzione ed è ideale per offerte importanti o messaggi critici. I pop-up hanno il tasso di conversione più alto tra tutti i tipi di modulo.
• Le flyout scorrono nella finestra del browser da qualsiasi direzione tu selezioni. Questi, come i popup, possono essere usati per far sì che qualcuno compia un'azione o per reindirizzarlo, ma poiché è un'opzione meno invasiva, puoi usarla per raccogliere informazioni sui visitatori del tuo sito in modo passivo.
• I moduli incorporati vengono visualizzati dove incolli sul tuo sito lo snippet di codice fornito. I moduli d'iscrizione incorporati sono i moduli d'iscrizione meno invasivi e vengono in genere utilizzati nel footer di un sito per raccogliere indirizzi e-mail.
• I moduli a pagina intera vengono visualizzati sull’intera finestra del browser, catturando tutta l’attenzione dei tuoi acquirenti. Si tratta di moduli ad alta conversione, perché non possono essere facilmente ignorati; tuttavia, questo li rende anche più invadenti, poiché gli acquirenti devono interagire con il modulo per chiuderlo.
  • Valuta di utilizzare un modulo a pagina intera come landing page per far crescere la tua lista di iscritti.
• I banner appaiono come una barra nella parte superiore o inferiore di una pagina web. Sono meno invadenti dei pop-up o dei moduli a pagina intera, offrendo visibilità continua e un design ottimizzato per dispositivi mobili che si integra perfettamente con il tuo sito web. Puoi impostare il banner in modo che scorra con la pagina o resti fisso, aggiungere blocchi di contenuto o campi di inserimento direttamente nel banner oppure configurare il banner in modo che, quando qualcuno ci fa clic, si apra un modulo diverso dal tuo account.
  • Per attivare la visualizzazione di un modulo diverso quando un acquirente fa clic sul banner, fai clic sul pulsante nell'anteprima e imposta Azione su Apri un altro modulo, quindi scegli il modulo attivo che vuoi visualizzare. Tieni presente che non è possibile per i moduli incorporati.

Immagini di sfondo e immagini laterali

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

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

• Ci sono molti tipi di formati immagine tra cui scegliere. I file JPEG offrono un buon equilibrio tra qualità e dimensioni per le immagini ricche di colori, mentre i file PNG possono mantenere nitide le immagini o i loghi con trasparenza.
  • Punta a una dimensione del file di 50-100 KB per le immagini laterali e inferiore a 200 KB per le immagini di sfondo, per garantire immagini di alta qualità senza rallentare i tempi di caricamento del tuo sito.
• Come per tutte le immagini visualizzate sul web, dimensioni dei file più grandi comportano tempi di caricamento più lenti.
  • Tieni presente che un'immagine a larghezza intera a 72 dpi spesso supera 1 MB e ridurre le dimensioni dell'immagine potrebbe ridurne la qualità. Quando scegli le immagini, valuta il compromesso tra qualità dell'immagine e tempo di caricamento.
• Assicurati di usare un'immagine di qualità sufficientemente alta per ottenere i migliori risultati.
  
  • Sul web, utilizzare una risoluzione di 72 dpi è una best practice. Per bilanciare qualità dell'immagine e velocità di caricamento, cerca di mantenere le immagini tra 600 e 1000 px di larghezza e meno di 2000 px di altezza per le immagini a larghezza intera. Le immagini che sono più piccole della larghezza intera dell'e-mail possono essere inferiori a 600 px.
    
    • Tieni presente che, se utilizzi un modulo d'iscrizione a pagina intera, avrai bisogno di un'immagine più grande e ad alta risoluzione (ad esempio con una larghezza minima di 1980px) per adattarsi al modulo di dimensioni maggiori. Tieni presente, però, che questo può comunque influire sul tempo di caricamento.
• Aggiungi il testo alternativo all'immagine per promuovere l'accessibilità per tutte le persone che interagiscono con i tuoi moduli.

Poiché i moduli d'iscrizione vengono renderizzati nei browser (a differenza delle e-mail, che vengono renderizzate negli ESP), ci sono meno raccomandazioni su come formattarli e modificarli. I browser possono renderizzare immagini di tutti i tipi e dimensioni, quindi in generale attieniti a immagini ad alta risoluzione, dimensioni dei file gestibili e testa l'aspetto su ogni tipo di dispositivo.

Aggiungi un’immagine laterale

Per aggiungere un’immagine laterale:

1. Vai alla sezione Stili e scorri fino alle impostazioni Immagine laterale.
2. Seleziona Immagine a sinistra o Immagine a destra, a seconda di dove vuoi che l'immagine venga visualizzata.
   

3. Seleziona un'immagine. Per impostazione predefinita, i moduli con immagini laterali sono impostati su una larghezza di 780 px e una dimensione media; tuttavia, puoi modificarla nella sezione Side Image della scheda Styles in base alle dimensioni del modulo o se vuoi che l'immagine appaia più piccola o più grande.

Tieni presente che le immagini laterali sono impostate a livello di passaggio, quindi puoi impostare immagini diverse per ciascun passaggio del tuo modulo. Per ulteriori informazioni sulle opzioni di visualizzazione per le immagini laterali, consulta il nostro articolo come aggiungere immagini laterali nei moduli d'iscrizione.

Aggiungi un'immagine di sfondo

Per aggiungere un'immagine di sfondo:

1. Attiva l'impostazione Immagine di sfondo in Sfondo del modulo.
2. Carica la tua immagine usando il pulsante Sfoglia.
3. Regola le impostazioni di visualizzazione come preferisci.
   

Se aggiungi un’immagine laterale o di sfondo al modulo, visualizza in anteprima tutti i passaggi del modulo, incluso il messaggio di conferma, selezionando ogni passaggio nella barra del menu in alto. Per impostazione predefinita, l’altezza del modulo si adatta in base al contenuto e ai campi del modulo in ogni passaggio, quindi alcuni passaggi potrebbero essere più alti o più bassi di altri. Quando il modulo include un’immagine, parte del contenuto dell’immagine può essere tagliato nei passaggi di dimensioni più ridotte. Per evitare questo problema, imposta un’altezza minima in Tipo di modulo nella sezione Stili.

Opzioni di colore e spaziatura

Usa le impostazioni Stili modulo e Stili campo di inserimento per impostare colori, colori del bordo, spaziatura interna e margini. Queste impostazioni si applicheranno a tutte le fasi del tuo modulo, a meno che tu non applichi impostazioni in conflitto (ad es. per testo o colori) nelle impostazioni di stile di uno specifico blocco di contenuto.

Caratteri e stili del testo

Modifica il testo (ad es. font, dimensione, colore, ecc.) per i tuoi blocchi di contenuto (ad es. un campo e-mail o numero di telefono) in Stili testo campo di inserimento.

Modifica il testo per uno specifico blocco di contenuti cliccando sul blocco nell'anteprima del modulo e usando il menu delle opzioni Testo che appare. L'editor dei moduli di Klaviyo utilizza lo standard di codifica UTF-8, il che significa che supporta caratteri latini, emoji, caratteri a doppio byte e altro ancora.

Il tuo modulo d'iscrizione può utilizzare i font web-safe nativi degli editor di Klaviyo, uno dei nostri font personalizzati ospitati da Klaviyo oppure puoi aggiungere font personalizzati. Scopri come utilizzare i font personalizzati nei tuoi moduli d'iscrizione.

Icone di chiusura

Puoi regolare le dimensioni, il colore e lo stile dell’icona di chiusura del modulo (la X nell’angolo in alto a destra). Fai clic sull’icona X nell’editor del modulo, quindi regola le impostazioni nell’editor a sinistra. Scopri di più su come definire lo stile dell’icona di chiusura di un modulo.

Se hai scelto di usare un modulo a pagina intera, l'unico modo in cui chi fa acquisti può chiudere il modulo è fare clic sull'icona di chiusura. È utile per catturare la loro attenzione; tuttavia, assicurati che l'icona di chiusura sia chiara e visibile, così chi fa acquisti non si sentirà frustrato dall'interruzione del modulo a pagina intera.

HTML e CSS personalizzati

L'editor dei moduli d'iscrizione di Klaviyo al momento non supporta contenuti HTML o CSS personalizzati. Per suggerimenti e ispirazione su come personalizzare il tuo modulo usando l'editor di Klaviyo, vai al forum della Community.

Risultato

Ora hai imparato come modificare varie impostazioni di stile nell’editor dei moduli per progettare il tuo modulo d'iscrizione.

I prossimi passaggi

Dopo aver definito lo stile del tuo modulo d'iscrizione, scopri come impostare i comportamenti del modulo, inclusi quali persone che visitano il sito dovrebbero vedere il modulo e quando dovrebbe apparire. Vai al nostro articolo come scegliere il targeting dei moduli e le impostazioni di comportamento.

Dopo aver pubblicato il tuo modulo d'iscrizione, personalizza la tua e-mail di conferma di opt-in, se il doppio opt-in è attivato per la tua lista. Quindi, crea una serie di benvenuto per offrire la promozione del modulo (ad esempio, uno sconto o la spedizione gratuita sul primo ordine) e presentare il tuo brand alle nuove persone iscritte.

Risorse aggiuntive