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

Para recriar um modelo HTML existente como um modelo de arrastar e soltar, use a conversão de HTML para arrastar e soltar. A Klaviyo usa IA para recriar o design com blocos editáveis. Analise o layout e o conteúdo convertidos antes de enviar. Use um modelo híbrido quando você quiser manter seu HTML personalizado e adicionar blocos editáveis apenas em regiões específicas.

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

Cada snippet de código abaixo cria 1 região editável. Você pode adicionar vários blocos de arrastar e soltar dentro dessa região. Para tornar áreas separadas do seu modelo editáveis, adicione um snippet para cada região.

Coloque cada snippet de <td> dentro de um(a) <tr> no layout de tabela do seu e-mail. Defina data-klaviyo-region-width-pixels como a largura dessa região em pixels; os exemplos usam 600.

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.

Antes de importar um modelo de e-mail de marketing, inclua uma tag de cancelar inscrição, como {% unsubscribe %}. Salve seu modelo como um arquivo .html.

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.
   

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. Na Klaviyo, vá até Conteúdo > Modelos.
2. Selecione a aba E-mail: salvos.
3. Clique em Criar > Importar modelo de e-mail.
4. Insira um nome para o seu modelo, faça upload do seu arquivo HTML e clique em Importar modelo.
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. Se você for solicitado a escolher um tipo de modelo, selecione Arrastar e soltar.

1. Na galeria de modelos, selecione E-mail: salvos, selecione o modelo que você importou e clique em Usar modelo.
2. Observe o bloco de texto que diz Olá, mundo! Este é o seu bloco de texto editável.
3. 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.
   

textCopy

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

1. Se quiser, adicione uma imagem predefinida dentro de div. Substitua o URL da imagem de exemplo abaixo por um URL de imagem acessível publicamente e substitua o link e o texto alternativo pelos seus:

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. Na Klaviyo, vá até Conteúdo > Modelos.
2. Selecione a aba E-mail: salvos.
3. Clique em Criar > Importar modelo de e-mail.
4. Insira um nome para o seu modelo, faça upload do seu arquivo HTML e clique em Importar modelo.
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 do Klaviyo, adicione-o a uma campanha ou a um fluxo. Se for solicitado que você escolha um tipo de modelo, selecione Arrastar e soltar.
2. Na galeria de modelos, selecione E-mail: salvos, selecione o modelo que você importou e clique em Usar modelo.
3. Observe o bloco de imagem, que conterá um botão para fazer upload de uma imagem ou a imagem que você incluiu.
4. 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 a seguir ao seu modelo HTML. Depois de importar seu modelo, não se esqueça de colocá-lo no local em que você quiser adicionar seu bloco de conteúdo universal.
   

textCopy

<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 E-mail: salvos.
4. Clique em Criar > Importar modelo de e-mail.
5. Insira um nome para o seu modelo, faça upload do seu arquivo HTML e clique em Importar modelo.
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 do Klaviyo, adicione-o a uma campanha ou a um fluxo. Se for solicitado que você escolha um tipo de modelo, selecione Arrastar e soltar.
2. Na galeria de modelos, selecione E-mail: salvos, selecione o modelo que você importou e clique em Usar modelo.
3. 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.
   

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. Na Klaviyo, vá até Conteúdo > Modelos.
2. Selecione a aba E-mail: salvos.
3. Clique em Criar > Importar modelo de e-mail.
4. Insira um nome para o seu modelo, faça upload do seu arquivo HTML e clique em Importar modelo.
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 do Klaviyo, adicione-o a uma campanha ou a um fluxo. Se for solicitado que você escolha um tipo de modelo, selecione Arrastar e soltar.
2. Na galeria de modelos, selecione E-mail: salvos, selecione o modelo que você importou e clique em Usar modelo.
3. Observe o bloco de texto que diz Olá, mundo! Arraste outro bloco (por exemplo, um bloco de produto) para baixo deste bloco.
4. 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

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

Visualize seu e-mail híbrido

Visualize seu e-mail no desktop e no celular e envie um e-mail de teste antes de enviá-lo aos destinatários. Verifique o layout, as imagens, os links e qualquer conteúdo dinâmico na campanha ou no fluxo em que você planeja usá-lo. Espere suas alterações terminarem de ser salvas antes de sair do editor.

Resultado

Depois de concluir essas etapas, você pode adicionar e editar blocos de arrastar e soltar dentro das regiões definidas pelos seus snippets de código. O HTML personalizado ao redor permanece fora dessas regiões editáveis.

Recursos adicionais