Imparerai
Impari a creare modelli HTML personalizzati che siano compatibili con l'editor trascina-rilascia di Klaviyo (cioè, modelli ibridi). Seguendo questi passaggi, può progettare un'email HTML completamente personalizzata, mantenendo l'accesso alle funzioni disponibili solo nell'editor trascina-rilascia (ad esempio, blocchi di prodotti o contenuti universali).
Raccomandiamo l'uso di HTML personalizzato solo ai marketer tecnicamente esperti, o a chi ha accesso a uno sviluppatore. Sebbene il nostro prodotto supporti l'HTML personalizzato, il nostro team di assistenza non è in grado di aiutarla a creare i suoi modelli personalizzati, oltre ad offrirle le indicazioni generali contenute in questa documentazione. Ha bisogno di aiuto? Si rivolga a un Partner Klaviyo.
Per mantenere la sicurezza dei suoi dati, il team di assistenza di Klaviyo non è in grado di aprire i suoi file HTML.
Aggiunga uno snippet di codice al suo modello HTML
Aggiunga solo uno degli snippet di codice indicati di seguito per ogni modello di e-mail. Un unico snippet di codice le consente di aggiungere più blocchi con il trascina-rilascia, quindi non deve aggiungere più snippet di codice.
Per esempio, se desidera aggiungere un'immagine e un blocco tabella utilizzando l'editor drag-and-drop, segua la procedura Aggiungi un blocco immagine personalizzabile qui sotto. Una volta caricato il suo modello su Klaviyo e utilizzato in una campagna o in un flusso, potrà aggiungere blocchi sopra o sotto il blocco immagine.
Aggiungere un blocco di testo modificabile Aggiungere un blocco di testo modificabile
- Crei un modello HTML personalizzato utilizzando il suo editor HTML preferito.
- Aggiunga il seguente frammento di codice al suo modello HTML. Lo collochi nel punto in cui desidera aggiungere il blocco di testo nel suo modello.
<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600"> <div class="klaviyo-block klaviyo-text-block"> Salve mondo!</div> </td> - In Klaviyo, vada su Contenuti > Modelli.
- Clicchi su Importa.
- Inserisca un nome per il suo modello, carichi il suo file HTML e lo importi.
- Se apre il modello dalla scheda Modelli, vedrà il codice del suo modello nell'editor HTML di Klaviyo.
- Per accedere al modello nell'editor drag-and-drop di Klaviyo, lo aggiunga ad una campagna o ad un flusso.
- Selezioni Trascina e rilascia come tipo di modello.
- Notare il blocco di testo che dice Ciao mondo! Questo è il suo blocco di testo modificabile.
- Trascina e rilascia blocchi aggiuntivi sopra o sotto il blocco di testo, come desiderato.
Aggiungere un blocco di immagini personalizzabileAggiungere un blocco di immagini personalizzabile
- Crei un modello HTML personalizzato utilizzando il suo editor HTML preferito.
- Aggiunga il seguente frammento di codice al suo modello HTML. Si assicuri di posizionarlo nel punto in cui desidera aggiungere il blocco immagine dopo aver importato il modello.
<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600"> <div class="klaviyo-block klaviyo-image-block"></div> </td>- Opzionalmente, può aggiungere un'immagine preimpostata all'interno del div. Se sceglie di farlo, il suo codice sarà simile a questo:
<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600"> <div class="klaviyo-block klaviyo-image-block"> <a href="http://klaviyo.com>< img src="example.com/my_image.png" alt="La mia immagine" /></a>
</div> </td>
- Opzionalmente, può aggiungere un'immagine preimpostata all'interno del div. Se sceglie di farlo, il suo codice sarà simile a questo:
- In Klaviyo, vada su Contenuti > Modelli.
- Clicchi su Importa.
- Inserisca un nome per il suo modello, carichi il suo file HTML e lo importi.
- Se apre il modello dalla scheda Modelli, vedrà il codice del suo modello nell'editor HTML di Klaviyo.
- Per accedere al modello nell'editor drag-and-drop di Klaviyo, lo aggiunga ad una campagna o ad un flusso.
- Selezioni Trascina e rilascia come tipo di modello.
- Si noti il blocco immagine, che conterrà un pulsante per caricare un'immagine o l'immagine da lei inclusa.
- Trascinare e rilasciare blocchi aggiuntivi sopra o sotto il blocco immagine, come desiderato.
Aggiunga un blocco di un altro tipo (ad esempio, blocco prodotto, blocco tabella, contenuto universale). Aggiunga un blocco di un altro tipo (ad esempio, blocco prodotto, blocco tabella, contenuto universale).
- Crei un modello HTML personalizzato utilizzando il suo editor HTML preferito.
- Aggiunga il seguente frammento di codice al suo modello HTML. Lo collochi nel punto in cui desidera aggiungere i suoi blocchi dopo aver importato il suo modello.
<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600"> <div class="klaviyo-block klaviyo-text-block"> Salve mondo!</div> </td> - In Klaviyo, vada su Contenuti > Modelli.
- Clicchi su Importa.
- Inserisca un nome per il suo modello, carichi il suo file HTML e lo importi.
- Se apre il modello dalla scheda Modelli, vedrà il codice del suo modello nell'editor HTML di Klaviyo.
- Per accedere al modello nell'editor drag-and-drop di Klaviyo, lo aggiunga ad una campagna o ad un flusso.
- Selezioni Trascina e rilascia come tipo di modello.
- Notare il blocco di testo che dice Ciao mondo! Trascini un altro blocco (ad esempio, un blocco prodotto o un contenuto universale) sotto questo blocco.
- Cancelli il blocco di testo e aggiunga altri blocchi personalizzati, come desidera.
Codice del modello di email ibrida di esempio
L'esempio seguente mostra un file HTML funzionale con lo snippet di codice ibrido per un blocco di testo. Utilizzi questo codice per testare la funzionalità dell'editor ibrido.
<html>
<head>
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Una semplice email ibrida</title>
<style>
corpo {
background-color: #f6f6f6;
font-family: sans-serif;
margin: 20px;
}
.main {
background: #ffffff;
border-radius: 3px;
width: 100%;
}
.container {
margin: 0 auto !important;
width: 600px;
}
.wrapper {
box-sizing: border-box;
padding: 15px;
}
tabella {
width: 100%;
}
</style>
</head>
<body>
<div class="contenitore">
<tabella class="principale">
<tr>
<td class="wrapper"> Questa è un'email HTML molto semplice</td>
</tr>
<tr>
<td class="wrapper">
<table>
<tr>
<td align=center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
<div class="klaviyo-block klaviyo-text-block">
Salve mondo!
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="wrapper">{% unsubscribe %}</td>
</tr>
</table>
</div>
</body>
</html>
Emoji e modelli di email ibridi
A partire da febbraio 2024, tutte le emoji sono supportate in tutti gli editor di e-mail di Klaviyo (cioè l'editor drag-and-drop, l'editor ibrido, l'editor di solo testo e l'editor HTML personalizzato).
RisultatoRisultato
Dopo aver completato questi passaggi, sarà in grado di aggiungere e modificare alcune aree di un modello HTML personalizzato. Si noti che non può aggiungere o modificare i blocchi drag-and-drop in nessuna area del modello personalizzato, ad eccezione del punto in cui è stato posizionato il blocco iniziale.
Risorse aggiuntive