Come creare un modello di e-mail ibrido

Cosa imparerai

Impari a creare modelli HTML personalizzati che siano compatibili con l'editor trascina-rilascia di Klaviyo (cioè, modelli ibridi). Seguendo questi passaggi, puoi progettare un'e-mail HTML completamente personalizzata, mantenendo l'accesso alle funzionalità disponibili solo nell'editor trascina e rilascia (ad esempio, blocchi di prodotti o blocchi di contenuto universale).

Aggiungi uno snippet di codice al tuo modello HTML

Aggiunga solo uno degli snippet di codice indicati di seguito per ogni modello di e-mail. Un unico snippet di codice ti consente di aggiungere più blocchi con il trascina-rilascia, quindi non devi aggiungere più snippet di codice.

Ad esempio, se vuoi aggiungere un'immagine e un blocco tabella utilizzando l'editor drag-and-drop, ti basta seguire i passaggi di Aggiungi un blocco immagine personalizzabile riportati di seguito. Una volta caricato il tuo modello su Klaviyo e utilizzato in una campagna o in un flusso, potrai aggiungere blocchi sopra o sotto il blocco immagine.

Aggiungi un blocco di testo modificabile

1. Crea un modello HTML personalizzato usando il tuo editor HTML preferito.
2. Aggiungi il seguente snippet di codice al tuo modello HTML. Posizionalo dove preferisci per aggiungere il tuo blocco di testo nel modello.
   

text Copy

<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
    <div class="klaviyo-block klaviyo-text-block">Hello world!</div>
</td>

1. In Klaviyo, vai su Contenuto > Modello.
2. Seleziona la scheda Modelli e-mail.
3. Clicca su Importa.
4. Inserisci un nome per il tuo modello, carica il tuo file HTML e importalo.
5. Se apri il modello dalla scheda Modelli, vedrai il codice del tuo modello nell'editor HTML di Klaviyo.
   

1. Per accedere al modello nell'editor drag-and-drop di Klaviyo, aggiungilo a una campagna o a un flusso.
2. Seleziona Drag and drop come tipo di modello.
   

1. Nota il blocco di testo che dice Ciao mondo! Questo è il tuo blocco di testo modificabile.
2. Trascina e rilascia altri blocchi sopra o sotto il blocco di testo, come preferisci.

Aggiungi un blocco immagine personalizzabile

1. Crea un modello HTML personalizzato usando il tuo editor HTML preferito.
2. Aggiungi il seguente snippet di codice al tuo modello HTML. Assicurati di posizionarlo dove vuoi aggiungere il blocco immagine dopo aver importato il modello.
   

text Copy

<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
    <div class="klaviyo-block klaviyo-image-block"></div>
</td>

1. Facoltativamente, puoi aggiungere un’immagine preimpostata all’interno del div. Se scegli di farlo, il tuo codice avrà questo aspetto:
   

text Copy

<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="My Image" /></a>    </div>
</td>

1. In Klaviyo, vai su Contenuto > Modello.
2. Seleziona la scheda Modelli e-mail.
3. Clicca su Importa.
4. Inserisci un nome per il tuo modello, carica il file HTML e importalo.
5. Se apri il modello dalla scheda Modelli, vedrai il codice del tuo modello nell'editor HTML di Klaviyo.
   

1. Per accedere al modello nell'editor drag-and-drop di Klaviyo, aggiungilo a una campagna o a un flusso. Nel passaggio dei contenuti, seleziona il modello che hai importato.
2. Nota il blocco immagine, che conterrà un pulsante per caricare un’immagine oppure l’immagine che hai incluso.
3. Trascina e rilascia altri blocchi sopra o sotto il blocco immagine, secondo necessità.
   

Aggiungi un blocco di contenuto universale

Questo processo è supportato per i blocchi di contenuto universale, non per le sezioni universali.

1. Crea un modello HTML personalizzato usando il tuo editor HTML preferito.
2. Aggiungi il seguente snippet di codice al tuo modello HTML. Assicurati di posizionarlo dove vuoi aggiungere il blocco immagine dopo aver importato il modello.
   

text Copy

<td data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">     <div data-klaviyo-universal-block="block_id_1">&nbsp;<div></td>

1. Sostituisci block_id_1 con l'ID del tuo blocco di contenuto universale. Per trovare l'ID di un blocco di contenuto universale:
   1. Vai a Contenuti > Contenuto universale.
   2. Apri un blocco di contenuto universale per modificarlo.
   3. L'URL di questa pagina seguirà questo formato: https://www.klaviyo.com/email-template-editor/universal/block/BLOCK_ID.
   4. Copia l'ID del blocco dall'URL.
2. In Klaviyo, vai su Contenuto > Modello.
3. Seleziona la scheda Modelli e-mail.
4. Clicca su Importa.
5. Inserisci un nome per il tuo modello, carica il file HTML e importalo.
6. Se apri il modello dalla scheda Modelli, vedrai il codice del tuo modello nell'editor HTML di Klaviyo.
   

1. Per accedere al modello nell'editor drag-and-drop di Klaviyo, aggiungilo a una campagna o a un flusso. Nel passaggio dei contenuti, seleziona il modello che hai importato.
2. Prendi nota dei blocchi di contenuto universale.

Puoi aggiungere più blocchi di contenuto universale con un singolo snippet di codice. A tal fine, aggiungi un altro elemento div subito dopo il primo nello snippet di codice qui sopra, usando l'ID di un blocco diverso.

Aggiungi un blocco di un altro tipo (ad es. blocco prodotto, blocco tabella)

1. Crea un modello HTML personalizzato usando il tuo editor HTML preferito.
2. Aggiungi il seguente snippet di codice al tuo modello HTML. Posizionalo dove preferisci per aggiungere i tuoi blocchi dopo aver importato il modello.
   

text Copy

<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
    <div class="klaviyo-block klaviyo-text-block">Hello world!</div>
</td>

1. In Klaviyo, vai su Contenuto > Modello.
2. Seleziona la scheda Modelli e-mail.
3. Clicca su Importa.
4. Inserisci un nome per il tuo modello, carica il file HTML e importalo.
5. Se apri il modello dalla scheda Modelli, vedrai il codice del tuo modello nell'editor HTML di Klaviyo.
   

1. Per accedere al modello nell'editor drag-and-drop di Klaviyo, aggiungilo a una campagna o a un flusso. Nel passaggio dei contenuti, seleziona il modello che hai importato.
2. Nota il blocco di testo che dice Ciao mondo! Trascina un altro blocco (ad es. un blocco prodotto) sotto questo blocco.
3. Elimina il blocco di testo e aggiungi altri blocchi personalizzati, se lo desideri.
   

Codice di esempio per un modello ibrido di e-mail

L'esempio seguente mostra un file HTML funzionante con lo snippet di codice ibrido per un blocco di testo. Usa questo codice per testare la funzionalità dell'editor ibrido.

  <html>
  <head>
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <title>A simple hybrid email</title>
    <style>
      body {
        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;
      }
      table {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <table class="main">
        <tr>
          <td class="wrapper">This is a very simple HTML email</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">
                    Hello world!
                  </div>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td class="wrapper">{% unsubscribe %}</td>
        </tr>
      </table>
    </div>
  </body>
</html>

Emoji e modelli di e-mail ibridi

A partire da febbraio 2024, tutte le emoji sono supportate in tutti gli editor e-mail di Klaviyo (ad esempio, l’editor drag-and-drop, l’editor ibrido, l’editor solo testo e l’editor HTML personalizzato).

Risultato

Dopo aver completato questi passaggi, potrai aggiungere e modificare alcune aree di un modello HTML personalizzato. Tieni presente che non puoi aggiungere o modificare blocchi drag-and-drop in nessuna area del modello personalizzato, tranne dove è stato posizionato il blocco iniziale.

Risorse aggiuntive