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.

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 
• 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 

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. 

Scopri di più sulle 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. 

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. 

<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. 

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. 

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. 

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. 

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. 

Risorse aggiuntive

• Riferimento alla personalizzazione del messaggio
• Come creare un modello base
• Corso: Primi passi con l'editor di modelli di e-mail