Guida all'editor di modelli di e-mail
Cosa imparerai
Scopri l'editor di modelli di e-mail trascina-rilascia di Klaviyo e come utilizzare gli stili di modello e configurare ogni tipo di blocco.
Informazioni su blocchi e layout
Quando apri l'editor di modelli di e-mail di Klaviyo, nella barra laterale verranno visualizzate diverse opzioni di blocchi e sezioni tra cui scegliere. Scegli i blocchi di base, cioè i riquadri vuoti che utilizzerai per creare il layout delle e-mail da zero, e i contenuti universali, ovvero quelli che hai creato in altri modelli e salvato per un utilizzo successivo.
Nella sezione Base troverai diverse opzioni di blocchi e layout. Utilizza i blocchi per aggiungere contenuti, come testo, immagini o pulsanti. Utilizza i layout (cioè sezioni e colonne) per raggruppare i tuoi blocchi e configurarli.
I blocchi e le sezioni possono essere clonati, eliminati o salvati utilizzando le icone che appaiono al passaggio del mouse sul blocco o sulla sezione.
Fai clic su un blocco o una sezione e trascinalo per spostarlo.
Stili dei modelli
La scheda Stili contiene diverse opzioni di stile che puoi applicare all'intero modello. Per accedere alle impostazioni dei principali stili di un modello, esci dai blocchi o dalle sezioni in cui stai lavorando utilizzando il pulsante Fatto, quindi fai clic su Stili.
Qui puoi impostare l'aspetto della tua e-mail. Se hai eseguito la configurazione guidata, quest'area conterrà già alcuni stili del tuo marchio.
Per regolare gli stili del marchio che popoleranno i nuovi modelli, vai a Libreria del marchio > Marchio.
Qui può modificare le seguenti impostazioni:
- E-mail
- Sfondo del modello
Scegli un colore di sfondo per il tuo modello - Immagine di sfondo
Se lo desideri, puoi aggiungere un'immagine di sfondo - Sfondo del contenuto
Imposta un colore di sfondo per il contenuto della tua e-mail; questo colore può essere diverso dallo sfondo del modello e verrà applicato solo alla larghezza del contenuto della tua e-mail - Larghezza
La larghezza del contenuto della tua e-mail (600 px consigliati) - Raggio dell'angolo, margini, spaziatura interna e bordo
Consente di aggiungere spaziatura e bordi al tuo modello
- Sfondo del modello
- Testo e Titoli
Imposta gli stili per il testo normale e quattro stili di titolo, quindi scegli uno stile di testo dal menu a discesa in qualsiasi blocco di testo per applicarlo - Carattere
Seleziona un carattere, la spaziatura dei caratteri, la dimensione, lo spessore e il colore per lo stile del testo - Spaziatura tra lettere
Spaziatura tra ogni lettera in senso orizzontale - Spaziatura tra righe
Spaziatura tra le righe di testo in senso verticale - Allineamento del testo
Scegli l'allineamento a sinistra, al centro o a destra - Mobile
Scegli se abilitare l'ottimizzazione per dispositivi mobili (consigliato) o visualizzare gli stessi stili e contenuti sia su computer che su dispositivi mobili - Altro
- Valuta
Seleziona una valuta predefinita per il modello, se diversa dalle impostazioni del tuo account
- Valuta
Interazione degli stili di modello con gli stili di blocco e di sezione
Le impostazioni dello stile del modello verranno applicate al modello prima che venga applicata qualsiasi impostazione specifica del blocco o della sezione. Se gli stili di un blocco o di una sezione sono in conflitto con gli stili del tuo modello, verranno utilizzati gli stili del blocco e della sezione. Ad esempio, se imposti un colore di sfondo del contenuto nella sezione Stili principale, quindi imposti un colore di sfondo specifico per il blocco, il colore di sfondo del blocco verrà utilizzato per l'area di quel blocco.
Sezioni e stili di sezione
Tutti i contenuti dell'editor di modelli sono organizzati in sezioni. Quando crei un nuovo modello, per impostazione predefinita il modello conterrà una o più sezioni e potrai aggiungere o eliminare sezioni in base alle tue esigenze.
Per aprire le impostazioni di una sezione, fai clic sull'area a destra o a sinistra del contenuto di quella sezione. Si noti che facendo clic su un blocco si apriranno le impostazioni per quel blocco, piuttosto che la sezione che lo contiene.
Ogni sezione dispone di una scheda Stili e di una scheda Opzioni di visualizzazione. Utilizza gli stili della sezione per aggiungere immagini di sfondo, spaziatura interna e altri stili a tale sezione. Utilizza le opzioni di visualizzazione della sezione per scegliere quali tipi di dispositivo e destinatari visualizzeranno le sezioni.
Le impostazioni dello stile di sezione verranno applicate al modello dopo gli stili del modello, ma prima di qualsiasi stile di blocco. Se gli stili del modello sono in conflitto con gli stili di sezione, verrà utilizzato lo stile di sezione. Se le impostazioni di un blocco sono in conflitto con gli stili di sezione, verrà utilizzato lo stile del blocco.
Blocchi e stili di blocco
All'interno delle sezioni, aggiungi blocchi per popolare la tua e-mail con i contenuti. Per la maggior parte dei blocchi di contenuto è disponibile una scheda Stili in cui è possibile configurare l'aspetto del blocco, e una scheda Opzioni di visualizzazione in cui è possibile scegliere chi deve visualizzare il blocco e su quali tipi di dispositivo deve essere visualizzato. Le impostazioni specifiche degli stili disponibili sono diverse per ogni tipo di blocco, ma per tutti i blocchi sono disponibili le stesse opzioni di visualizzazione.
Le sezioni sullo stile con opzioni relative al colore presentano lo strumento di selezione del colore, con cui è possibile svolgere questa azione in vari modi:
- usando il campo della sfumatura per selezionare un colore e una tonalità;
- copiando e incollando un codice HEX o RGB;
- scegliendo tra i colori usati di recente o tra quelli già presenti in questo modello;
- usando lo strumento contagocce per scegliere un colore da qualsiasi punto dell'area di lavoro dell'e-mail (al momento non è disponibile per il testo, lo split o i blocchi tabella).
Scopri le opzioni di visualizzazione o continua a leggere per saperne di più sui tipi di blocco e su come utilizzarli.
Testo
Utilizza un blocco testo per aggiungere testo alle tue e-mail. Scegli uno stile di testo (Normale o Titolo 1 - 4) per applicare le impostazioni di stile dagli stili del modello principale oppure personalizza il contenuto del testo con le impostazioni dell'editor di testo.
L'editor e-mail di Klaviyo utilizza lo standard di codifica UTF-8, il che significa che supporta caratteri latini, emoji, caratteri a doppio byte e altro ancora.
Puoi aggiungere contenuti dinamici al tuo blocco testo per personalizzare il messaggio per ogni destinatario. Scopri di più sulla personalizzazione dei messaggi.
Per aggiungere testo in una lingua che utilizza uno script da destra a sinistra (RTL) (ad esempio, l'ebraico), aggiungi il seguente snippet di codice al codice sorgente di un blocco di testo nella parte superiore del modello:
<style type="text/css">
p, h1, h2, h3, h4, ol, li, ul { direction: rtl; }
</style> Comprimi la sezione Contenuto o scorri oltre per regolare gli stili del blocco. Scegli un colore di sfondo per il blocco o l'area del contenuto del testo e aggiungi la spaziatura interna.
Se redigi il testo al di fuori dell'editor Klaviyo (ad esempio, in Google Docs o Microsoft Word) assicurati di incollarlo nell'editor come testo normale. Utilizza Command+Maiusc+V o Ctrl+Maiusc+V per incollare come testo normale, altrimenti alcuni tag di stile verranno incollati insieme al testo, causando possibili problemi di progettazione.
Immagine
Utilizza un blocco immagine per aggiungere un'immagine alla tua e-mail. È possibile aggiungere immagini dalle seguenti fonti:
- Libreria di immagini
Aggiungi un'immagine che hai caricato in passato cercandola nella tua libreria di immagini - Carica immagine
Carica un file JPEG, PNG o GIF dal tuo dispositivo - Importa immagine
Importa un'immagine utilizzando l'URL dell'immagine - Immagine dinamica
Visualizza un'immagine personalizzata per ogni destinatario utilizzando una variabile immagine dinamica (ad esempio, facendo riferimento a un URL immagine memorizzato nei dati evento di un destinatario o come proprietà del profilo)
Una volta selezionata l'immagine, regola le impostazioni dell'immagine, incluso il testo alternativo (una descrizione dell'immagine), un indirizzo di collegamento in modo che l'immagine sia cliccabile, la larghezza dell'immagine, l'allineamento e altri stili.
Scopri di più sull'inserimento di immagini nei modelli.
Split
Utilizza un blocco suddiviso per visualizzare il contenuto in due colonne di qualsiasi larghezza. Il contenuto su entrambi i lati di un blocco suddiviso deve essere un'immagine o un contenuto testuale. Per impostazione predefinita, il blocco suddiviso utilizzerà una divisione 50/50; vai alla scheda Impostazioni split per regolare questo rapporto. In alternativa, puoi utilizzare il layout Colonne per dividere il contenuto in due o più colonne.
Pulsante
I blocchi pulsante creano link di grandi dimensioni che sono più evidenti dei normali link testuali, ideali per enfatizzare call-to-action importanti. Poiché utilizzati per le call-to-action, è preferibile usarne solo alcuni in ogni e-mail.
Compila almeno i campi Testo e URL. Il testo è ciò che il destinatario vedrà scritto nel pulsante, mentre l'URL è la destinazione a cui il visitatore verrà indirizzato quando farà clic sul pulsante. Regola l'aspetto, la forma e le dimensioni del pulsante utilizzando il colore, il raggio dell'angolo e le opzioni di spaziatura interna. Puoi anche regolare il carattere del blocco e altri stili, riportati di seguito.
Intestazione/barra dei collegamenti
Utilizza il blocco intestazione/barra dei collegamenti per aggiungere un logo e link di navigazione che reindirizzano a contenuti diversi del tuo sito.
Se trascini il blocco, ti verranno presentati alcuni layout comuni di intestazione/barra dei collegamenti tra cui scegliere. Sono disponibili diversi layout specifici per computer e dispositivi mobili che puoi scegliere a seconda delle dimensioni di ciascun dispositivo.
A causa degli esclusivi motori di rendering HTML di Outlook, è possibile che venga aggiunto un bordo agli elementi di intestazione/barra dei collegamenti per i destinatari che utilizzano Outlook per la posta elettronica. Per evitare che ciò accada, crea un'intestazione utilizzando un blocco immagine per il tuo logo e una tabella per i tuoi link.
Aggiungi alla barra dei collegamenti tutti i link che desideri. Puoi configurare le impostazioni di visualizzazione del dispositivo per ciascun link e sui dispositivi mobili è preferibile mostrare solo i link principali, poiché le dimensioni del dispositivo sono inferiori.
Dopo aver aggiunto i link e il logo, procedi con gli ultimi ritocchi utilizzando le opzioni di stile riportate di seguito. Puoi modificare il carattere, i colori e la spaziatura del blocco. Una volta completata l'operazione, visualizza l'anteprima sia su computer che su dispositivo mobile per vedere il risultato finale.
Ombreggiatura
Utilizza l''ombreggiatura per aggiungere profondità al tuo messaggio o enfatizzare una determinata area. Le opzioni di colore per l'ombreggiatura includono chiaro, scuro e più scuro, e puoi impostare un colore di sfondo e di riempimento per il blocco.
Divisore
Aggiunge una semplice riga tra altri blocchi di contenuto. Scegli tra linee continue, tratteggiate o punteggiate. Il colore, le dimensioni e il riempimento sono completamente personalizzabili. In precedenza questa opzione si chiamava Riga orizzontale.
Link ai social
Il blocco link ai social è un modo semplice per aggiungere le icone per i tuoi siti social Instagram, Pinterest, Facebook, X (Twitter) e altro ancora. Klaviyo offre le icone standard a colori per diversi siti, oltre a opzioni semplificate in nero, bianco o grigio.
Se preferisci utilizzare icone social completamente personalizzate, utilizza l'opzione personalizzata e carica i tuoi file immagine. In tal caso, è preferibile utilizzare immagini quadrate di 96 px. Per mantenere la spaziatura e l'allineamento tra le icone social di Klaviyo e le tue immagini personalizzate, utilizza icone larghe 50 px e centrate sia verticalmente che orizzontalmente nel file immagine.
Trascina le etichette delle icone nella barra laterale per riordinare le icone. Puoi utilizzare il pulsante Aggiungi spaziatore per un controllo più granulare dello spazio tra ogni icona.
Spaziatore
Il blocco spaziatore aggiunge una quantità personalizzabile di spazio tra i blocchi disposti verticalmente. Per personalizzare lo spazio tra i blocchi affiancati (ad esempio, in una colonna), utilizza la spaziatura interna sinistra/destra.
Prodotti
Utilizza un blocco prodotti per aggiungere gli articoli consigliati dal catalogo del tuo negozio online. Se aggiungi un blocco prodotti, avrai due opzioni: dinamico o statico.
Un feed dinamico si aggiorna automaticamente e si configura tramite un feed dei prodotti. Per saperne di più sull'impostazione di un feed dei prodotti, leggi il nostro articolo Come utilizzare i feed e i consigli sui prodotti.
Un blocco di prodotti statico mostra solo gli articoli del catalogo selezionati manualmente nell'editor di modelli e non verrà aggiornato automaticamente o indirizzato a singoli destinatari.
Con entrambe le opzioni, una volta selezionato il feed o gli oggetti, puoi personalizzare l'aspetto del blocco. I blocchi di prodotti possono mostrare solo immagini o includere il nome e il prezzo di ciascun articolo. Scorri tutte le opzioni nella scheda degli stili del blocco prodotti per personalizzare completamente il blocco.
Coupon
Utilizza un blocco coupon per visualizzare un codice coupon nella tua e-mail. Quando trascini un blocco coupon nell'area di disegno, clicca sul pulsante + per scegliere un coupon dal tuo account. Puoi effettuare una ricerca per nome o filtrare per categoria.
Il codice coupon selezionato verrà visualizzato da tutti i destinatari. Se a un destinatario non è già stato assegnato il coupon, verrà assegnato automaticamente all'ora di invio. Ciò equivale all'inserimento di un coupon utilizzando un tag modello, ma con opzioni di stile integrate.
Puoi aggiungere il testo dell'intestazione per fornire il contesto del coupon e personalizzare l'aspetto del blocco, compresi lo stile del testo del coupon, il colore di sfondo e il bordo.
Tabella
I blocchi tabella possono aiutarti a strutturare immagini e testo all'interno di un modello di e-mail. Il blocco tabella ti dà la flessibilità di aggiungere tutte le colonne o le righe che desideri (che si spazieranno automaticamente o specificando un valore nell'impostazione Larghezza della scheda Colonne ).
Un blocco tabella che viene trascinato per la prima volta nel modello presenta una sola riga con due colonne. Utilizza la scheda Impostazioni tabella per aggiungere ulteriori righe e colonne, quindi torna alla scheda Contenuto per configurare il contenuto della tabella.
Utilizza la sezione Selettore celle per aprire il contenuto di una cella specifica. Utilizza la sezione Contenuto cella per scegliere tra il contenuto Testo o Immagine , quindi aggiungi il contenuto. Tieni presente che se passi da un contenuto di tipo testuale a uno di tipo immagine e viceversa, è possibile che si perda il contenuto precedentemente presente in quella cella; utilizza il pulsante Annulla per annullare le modifiche.
Per modificare i colori, i caratteri, i bordi e il layout della tabella, apri la scheda Impostazioni tabella .
I blocchi tabella vengono utilizzati anche per visualizzare dei contenuti dinamici, come i dettagli di un elenco di articoli presenti nel carrello del destinatario. Scopri di più sui blocchi tabella dinamici.
HTML
Aggiungi del codice personalizzato al tuo modello utilizzando il blocco HTML. Utilizza questo tipo di blocco per l'aggiunta di elementi personalizzati, funzionalità di terze parti come i timer per il conto alla rovescia o CSS personalizzati. Se riscontri problemi con il codice personalizzato nella tua e-mail, scopri come risolvere i problemi relativi al codice personalizzato nei modelli.
Citazione di recensioni
Se utilizzi Klaviyo Reviews, puoi inserire le recensioni di clienti reali per dimostrare sui social il valore del tuo marchio e aumentare il coinvolgimento.
Il blocco citazione di recensioni offre varie recensioni che puoi scegliere di inserire nei tuoi messaggi. Se non sono ancora disponibili recensioni da inserire, potrebbe essere per i seguenti motivi:
- Nel tuo account non ci sono abbastanza recensioni di alta qualità tra cui scegliere. Controlla la disponibilità di recensioni in un secondo momento.
- Le tue recensioni non sono ancora state elaborate. Se desideri inserire una recensione appena inviata, attendi qualche ora prima di riprovare.
- Le recensioni presenti nel tuo account non sono verificate. Per essere verificata, una recensione deve essere inviata tramite un link personalizzato in un flusso di richiesta di recensione di Klaviyo o contrassegnata come verificata in un file CSV di recensioni caricato da un'altra piattaforma. Le recensioni non verificate, incluse quelle inviate direttamente al tuo sito, non possono essere inserite in un blocco di citazione di recensioni.
Colonne
Sono disponibili due diversi blocchi che puoi utilizzare per trascinare le colonne nei tuoi modelli e-mail: il blocco Split e il layout Colonne. Con un blocco split, puoi inserire solo contenuti di testo e immagini in due colonne, ma puoi regolare con precisione la larghezza di ciascuna colonna.
Con un layout a colonne, puoi aggiungere qualsiasi tipo di contenuto a ciascuna colonna, ma le opzioni di larghezza delle colonne preselezionate sono limitate. Tuttavia, il layout a colonne consente di avere da una a quattro colonne disponibili.
Una volta aggiunte le colonne al modello, rilascia i blocchi di contenuto in ogni colonna per popolarla. Non c'è un limite di un solo blocco di contenuti per colonna: puoi aggiungere tutti i blocchi di contenuti che desideri, impilati l'uno sull'altro.
Video
I blocchi video creano l'aspetto di un video incorporato in un'e-mail. Quando un destinatario clicca sul pulsante play, si apre una nuova scheda e il video viene riprodotto.
Per aggiungere un blocco video, copia l'URL del video da Youtube, Vimeo, TikTok o la tua piattaforma di hosting video preferita. Se il video proviene da Youtube, Klaviyo selezionerà automaticamente un'immagine di anteprima.
Se utilizzi un video proveniente da qualsiasi altra fonte, dovrai anche caricare un'immagine miniaturizzata del video. Un pulsante di riproduzione verrà sovrapposto alla miniatura del video, che potrai disattivare nelle impostazioni del blocco.
Perché il video non viene riprodotto direttamente nell'e-mail?
La maggior parte dei principali client di posta elettronica (come Gmail) considera i contenuti incorporati (quali i video) come una minaccia alla sicurezza. Questi client di posta elettronica spesso eliminano completamente il codice incorporato: aprendo l'e-mail, i tuoi destinatari non vedranno quindi il tuo contenuto.
Klaviyo si impegna a garantire il successo di ogni cliente. Poiché i nostri test dimostrano che il video non viene visualizzato in modo affidabile da tutti i principali client di posta elettronica, non supportiamo i video incorporati direttamente.
Contenuto universale
Puoi salvare blocchi o sezioni in modelli per utilizzarli in qualsiasi altro modello utilizzando l'icona a forma di stella. Se salvi un blocco o una sezione, questa apparirà nella scheda Universale dei blocchi del modello di e-mail. Quando apporti modifiche a un blocco o a una sezione universale, è possibile scegliere di applicare tali modifiche a tutte le istanze del contenuto salvato.
Scopri di più sull'utilizzo dei contenuti universali salvati.
Annullare e rifare
Se commetti un errore durante la modifica del modello, usa il pulsante Annulla per ripristinarlo. È inoltre possibile utilizzare il pulsante Ripeti per annullare la modifica. Il tuo modello sarà salvato automaticamente durante la sessione di modifica e i pulsanti Annulla/Ripeti registreranno le tue modifiche per tutto il tempo in cui stai modificando il modello. Tuttavia, le modifiche passate saranno memorizzate solo durante la sessione di editing. Se esci dal modello e ritorni in un secondo momento, il pulsante Annulla sarà disabilitato fino a quando non si apportano modifiche future.
Anteprima e-mail
Utilizza il pulsante Anteprima e test per visualizzare in anteprima l'aspetto della tua e-mail nella casella di posta del destinatario. Se stai creando un'e-mail nella scheda Modelli di e-mail, assicurati di visualizzare l'anteprima dell'e-mail in base a come verrà inviata. Utilizza la tabella seguente per identificare il modo migliore per visualizzare l'anteprima.
Tipo di messaggio | Anteprima delle procedure consigliate |
Campagna Flusso attivato da elenco Flusso attivato da segmento Flusso riduzione prezzi Flusso attivato da data | Utilizza il campo Cerca un profilo per cercare qualcuno che fa parte dell'elenco/del segmento a cui intendi inviare o che potrebbe essere idoneo a ricevere l'e-mail (per i flussi). Seleziona un profilo. |
Flusso attivato da metrica | Passa a Evento in Anteprima origine dati, quindi seleziona l'evento che attiverà il flusso. Se selezioni un evento diverso o esegui l'anteprima in base al profilo, il rendering dei dati dinamici potrebbe non essere corretto. |
Risorse aggiuntive
- Documentazione sulla personalizzazione dei messaggi
Scopri come utilizzare le variabili di personalizzazione (o tag) di Klaviyo per personalizzare l'esperienza dei clienti.
- Come creare un modello base
Scopra come creare un modello di email di base in Klaviyo. Una volta creato un modello di base, può utilizzarlo in tutte le sue campagne e flussi per accelerare il processo di creazione e garantire che il suo marchio sia coerente tra i messaggi.
- Primi passi con l'editor di modelli di e-mail