Imparerai
Scopri come creare modelli HTML personalizzati compatibili con l'editor drag-and-drop di Klaviyo(cioè modelli ibridi). Seguendo questi passaggi, potrai progettare un'e-mail HTML completamente personalizzata, mantenendo l'accesso alle funzionalità disponibili solo nell'editor drag-and-drop (ad esempio, blocco prodotto o blocco contenuto universale).
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.
Ad esempio, se vuoi aggiungere un'immagine e un blocco tabella utilizzando l'editor drag-and-drop, segui la procedura Aggiungi un blocco immagine personalizzabile qui sotto. Una volta caricato il tuo modello su Klaviyo e utilizzato in una campagna o in un Flusso, potrai aggiungere dei blocchi sopra o sotto il blocco dell'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.
- Seleziona la scheda Modelli di e-mail.
- Clicca su Importa.
- Inserisci un nome per il tuo modello, carica il tuo file HTML e importalo.
- 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.
- Seleziona la scheda Modelli di e-mail.
- Clicca 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, aggiungilo a una campagna o a un Flusso. Nella fase del contenuto, seleziona il modello che hai importato.
- 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.
Aggiungi un blocco di contenuto universaleAggiungi un blocco di contenuto universale
Questo processo è supportato per i blocchi di contenuto universale, non per le sezioni universali.
- 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 data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
<div data-klaviyo-universal-block="block_id_1"> & nbsp;<div>
</td> - Sostituisci blocco con l'ID del tuo blocco universale contenuto. Per trovare l'ID di un blocco di contenuto universale:
- Vai al contenuto > Contenuto universale.
- Apri un blocco di contenuto universale per modificarlo.
- L'URL di questa pagina seguirà il seguente formato: https://www.klaviyo.com/email-template-editor/universal/block/BLOCK_ID.
- Copia l'ID del blocco dall'URL.
- In Klaviyo, vada su Contenuti > Modelli.
- Seleziona la scheda Modelli di e-mail.
- Clicca 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, aggiungilo a una campagna o a un Flusso. Nella fase del contenuto, seleziona il modello che hai importato.
- Nota il blocco universale contenuto.
Puoi aggiungere più blocchi di contenuto universale con un solo frammento di codice. Per farlo, aggiungi un altro elemento div subito dopo il primo nello snippet di codice qui sopra, utilizzando un ID di blocco diverso.
Aggiungi un blocco di un altro tipo (ad esempio, blocco prodotto, blocco tabella) Aggiungi un blocco di un altro tipo (ad esempio, blocco prodotto, blocco tabella)
- 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.
- Seleziona la scheda Modelli di e-mail.
- Clicca 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, aggiungilo a una campagna o a un Flusso. Nella fase del contenuto, seleziona il modello che hai importato.
- Nota il blocco di testo che dice Hello world! Trascina un altro blocco (ad esempio un blocco prodotto) 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 ibridi di e-mail
A partire da febbraio 2024, tutte le emoji saranno supportate in tutti gli editor di Klaviyo Email (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