Como criar um modelo de e-mail híbrido

O que você vai aprender

Aprenda a criar modelos de HTML personalizados compatíveis com o editor de arrastar e soltar da Klaviyo (ou seja, modelos híbridos). Ao seguir estas etapas, você pode criar um e-mail em HTML totalmente personalizado e manter o acesso a recursos disponíveis apenas no editor de arrastar e soltar (por exemplo, blocos de produto ou blocos de conteúdo universal).

Adicione um snippet de código ao seu modelo de HTML

Adicione apenas um dos snippets de código descritos abaixo por modelo de e-mail. Um snippet de código permite adicionar vários blocos de arrastar e soltar, então você não precisa adicionar vários snippets de código.

Por exemplo, se você quiser adicionar uma imagem e um bloco de tabela usando o editor de arrastar e soltar, basta seguir as etapas abaixo em Adicionar um bloco de imagem personalizável. Depois que você fizer o upload do seu modelo para a Klaviyo e usá-lo em uma campanha ou fluxo, você poderá adicionar blocos acima ou abaixo do bloco de imagem.

Adicionar um bloco de texto editável

1. Crie um modelo HTML personalizado usando seu editor de HTML de preferência.
2. Adicione o snippet de código abaixo ao seu modelo HTML. Coloque onde você quiser adicionar seu bloco de texto no seu modelo.
   

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. Na Klaviyo, vá até Conteúdo > Modelos.
2. Selecione a aba Modelos de e-mail.
3. Clique em Importar.
4. Insira um nome para seu modelo, carregue seu arquivo HTML e importe-o.
5. Se você abrir o modelo pela sua guia Modelos, verá o código do seu modelo no editor de HTML da Klaviyo.
   

1. Para acessar o modelo no editor de arrastar e soltar da Klaviyo, adicione-o a uma campanha ou a um fluxo.
2. Selecione Arrastar e soltar como o tipo de modelo.
   

1. Observe o bloco de texto que diz Olá, mundo! Este é o seu bloco de texto editável.
2. Arraste e solte blocos adicionais acima ou abaixo do bloco de texto, conforme desejado.

Adicionar um bloco de imagem personalizável

1. Crie um modelo HTML personalizado usando seu editor de HTML de preferência.
2. Adicione o snippet de código abaixo ao seu modelo HTML. Certifique-se de colocá-lo onde você quiser adicionar seu bloco de imagem após importar seu modelo.
   

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. Opcionalmente, você pode adicionar uma imagem predefinida dentro da div. Se você optar por fazer isso, seu código ficará assim:
   

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. Na Klaviyo, vá até Conteúdo > Modelos.
2. Selecione a aba Modelos de e-mail.
3. Clique em Importar.
4. Insira um nome para seu modelo, faça upload do seu arquivo HTML e importe-o.
5. Se você abrir o modelo pela sua guia Modelos, verá o código do seu modelo no editor de HTML da Klaviyo.
   

1. Para acessar o modelo no editor de arrastar e soltar da Klaviyo, adicione-o a uma campanha ou fluxo. Na etapa de conteúdo, selecione o modelo que você importou.
2. Observe o bloco de imagem, que conterá um botão para fazer upload de uma imagem ou a imagem que você incluiu.
3. Arraste e solte blocos adicionais acima ou abaixo do bloco de imagem, conforme necessário.
   

Adicionar um bloco de conteúdo universal

Esse processo é compatível com blocos de conteúdo universal, não com seções universais.

1. Crie um modelo HTML personalizado usando seu editor de HTML de preferência.
2. Adicione o snippet de código abaixo ao seu modelo HTML. Certifique-se de colocá-lo onde você quiser adicionar seu bloco de imagem após importar seu modelo.
   

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. Substitua block_id_1 pelo ID do seu bloco de conteúdo universal. Para encontrar o ID de um bloco de conteúdo universal:
   1. Navegue até Conteúdo > conteúdo universal.
   2. Abra um bloco de conteúdo universal para editá-lo.
   3. O URL desta página seguirá este formato: https://www.klaviyo.com/email-template-editor/universal/block/BLOCK_ID.
   4. Copie o ID do bloco da URL.
2. Na Klaviyo, vá até Conteúdo > Modelos.
3. Selecione a aba Modelos de e-mail.
4. Clique em Importar.
5. Insira um nome para seu modelo, faça upload do seu arquivo HTML e importe-o.
6. Se você abrir o modelo pela sua guia Modelos, verá o código do seu modelo no editor de HTML da Klaviyo.
   

1. Para acessar o modelo no editor de arrastar e soltar da Klaviyo, adicione-o a uma campanha ou fluxo. Na etapa de conteúdo, selecione o modelo que você importou.
2. Observe o(s) bloco(s) de conteúdo universal.

Você pode adicionar vários blocos de conteúdo universal com um único snippet de código. Para fazer isso, adicione outro elemento div imediatamente após o primeiro no snippet de código acima, usando o ID de um bloco diferente.

Adicione um bloco de outro tipo (por exemplo, bloco de produto, bloco de tabela)

1. Crie um modelo HTML personalizado usando seu editor de HTML de preferência.
2. Adicione o snippet de código abaixo ao seu modelo HTML. Coloque-o onde quiser adicionar seu(s) bloco(s) depois de importar seu modelo.
   

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. Na Klaviyo, vá até Conteúdo > Modelos.
2. Selecione a aba Modelos de e-mail.
3. Clique em Importar.
4. Insira um nome para seu modelo, faça upload do seu arquivo HTML e importe-o.
5. Se você abrir o modelo pela sua guia Modelos, verá o código do seu modelo no editor de HTML da Klaviyo.
   

1. Para acessar o modelo no editor de arrastar e soltar da Klaviyo, adicione-o a uma campanha ou fluxo. Na etapa de conteúdo, selecione o modelo que você importou.
2. Observe o bloco de texto que diz Olá, mundo! Arraste outro bloco (por exemplo, um bloco de produto) para baixo deste bloco.
3. Exclua o bloco de texto e adicione blocos personalizados adicionais, conforme desejar.
   

Código de exemplo de modelo híbrido de e-mail

O exemplo abaixo mostra um arquivo HTML funcional com o snippet de código híbrido para um bloco de texto. Use este código para testar a funcionalidade do editor híbrido.

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

Emojis e modelos de e-mail híbridos

Desde fevereiro de 2024, todos os emojis são compatíveis com todos os editores de e-mail do Klaviyo (ou seja, o editor de arrastar e soltar, o editor híbrido, o editor somente texto e o editor de HTML personalizado).

Resultado

Depois de concluir estas etapas, você poderá adicionar e editar determinadas áreas de um modelo HTML personalizado. Observe que você não pode adicionar nem editar blocos de arrastar e soltar em nenhuma área do modelo personalizado, exceto onde o bloco inicial foi colocado.

Recursos adicionais