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

Per ricreare un modello HTML esistente come modello drag-and-drop, usa la conversione da HTML a drag-and-drop. Klaviyo usa l’IA per ricreare il design con blocchi modificabili. Rivedi il layout e i contenuti convertiti prima dell’invio. Usa un modello ibrido quando vuoi mantenere l’HTML personalizzato e aggiungere blocchi modificabili solo in aree specifiche.

Aggiungi uno snippet di codice al tuo modello HTML

Ogni snippet di codice riportato di seguito crea 1 area modificabile. Puoi aggiungere più blocchi drag-and-drop all’interno di quell’area. Per rendere modificabili aree separate del tuo modello, aggiungi uno snippet di codice per ogni area.

Inserisci ogni snippet <td> all’interno di un <tr> nel layout della tabella della tua e-mail. Imposta data-klaviyo-region-width-pixels sulla larghezza di quell’area in pixel; negli esempi viene usato 600.

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.

Prima di importare un modello di e-mail di marketing, includi un tag di annullare l'iscrizione, come {% unsubscribe %}. Salva il tuo modello come file .html.

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.
   

textCopy

<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 E-mail: saved.
3. Clicca su Crea > Importa il modello di e-mail.
4. Inserisci un nome per il tuo modello, carica il tuo file HTML e fai clic su Importa modello.
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. Se ti viene chiesto di scegliere un tipo di modello, seleziona Trascina e rilascia.

1. Nella galleria dei modelli, seleziona E-mail: salvate, seleziona il modello che hai importato e fai clic su Usa modello.
2. Nota il blocco di testo che dice Ciao mondo! Questo è il tuo blocco di testo modificabile.
3. 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.
   

textCopy

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

1. Facoltativamente, aggiungi un'immagine preimpostata all'interno di div. Sostituisci l'URL dell'immagine di esempio qui sotto con un URL di un'immagine accessibile pubblicamente e sostituisci il link e il testo alternativo con i tuoi:

textCopy

<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
    <div class="klaviyo-block klaviyo-image-block">
        <a href="https://www.klaviyo.com/"><img src="https://example.com/my_image.png" alt="My Image" /></a>
    </div>
</td>

1. In Klaviyo, vai su Contenuto > Modello.
2. Seleziona la scheda E-mail: saved.
3. Clicca su Crea > Importa il modello di e-mail.
4. Inserisci un nome per il tuo modello, carica il tuo file HTML e fai clic su Importa modello.
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. Se ti viene chiesto di scegliere un tipo di modello, seleziona Drag and drop.
2. Nella galleria dei modelli, seleziona E-mail: salvate, seleziona il modello che hai importato e fai clic su Usa modello.
3. Nota il blocco immagine, che conterrà un pulsante per caricare un’immagine oppure l’immagine che hai incluso.
4. 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 inserirlo nel punto in cui vuoi aggiungere il tuo blocco di contenuto universale dopo aver importato il tuo modello.
   

textCopy

<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 E-mail: saved.
4. Clicca su Crea > Importa il modello di e-mail.
5. Inserisci un nome per il tuo modello, carica il tuo file HTML e fai clic su Importa modello.
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. Se ti viene chiesto di scegliere un tipo di modello, seleziona Drag and drop.
2. Nella galleria dei modelli, seleziona E-mail: salvate, seleziona il modello che hai importato e fai clic su Usa modello.
3. 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.
   

textCopy

<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 E-mail: saved.
3. Clicca su Crea > Importa il modello di e-mail.
4. Inserisci un nome per il tuo modello, carica il tuo file HTML e fai clic su Importa modello.
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. Se ti viene chiesto di scegliere un tipo di modello, seleziona Drag and drop.
2. Nella galleria dei modelli, seleziona E-mail: salvate, seleziona il modello che hai importato e fai clic su Usa modello.
3. Nota il blocco di testo che dice Ciao mondo! Trascina un altro blocco (ad es. un blocco prodotto) sotto questo blocco.
4. 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 di e-mail di Klaviyo (ad es. l'editor drag-and-drop, l'editor ibrido, l'editor solo testo e l'editor HTML personalizzato).

Anteprima della tua e-mail ibrida

Visualizza in anteprima la tua e-mail su desktop e dispositivi mobili e invia una e-mail di test prima di inviarla ai destinatari. Controlla il layout, le immagini, i link e qualsiasi contenuto dinamico nella campagna o nel flusso in cui prevedi di utilizzarla. Attendi che le modifiche finiscano di essere salvate prima di uscire dall’editor.

Risultato

Dopo aver completato questi passaggi, puoi aggiungere e modificare i blocchi drag-and-drop all'interno delle aree definite dai tuoi snippet di codice. L'HTML personalizzato circostante rimane al di fuori di queste aree modificabili.

Risorse aggiuntive