O que você vai aprender
Saiba como criar modelos HTML personalizados que sejam compatíveis com o editor de arrastar e soltar do Klaviyo(ou seja, modelo híbrido). Seguindo essas etapas, o senhor pode criar um e-mail HTML totalmente personalizado e, ao mesmo tempo, manter o acesso aos recursos disponíveis apenas no editor de arrastar e soltar (por exemplo, bloco de produtos ou bloco de conteúdo universal).
Recomendamos o uso de HTML personalizado apenas para profissionais de marketing tecnicamente experientes ou para qualquer pessoa que tenha acesso a um desenvolvedor. Embora nosso produto seja compatível com HTML personalizado, nossa equipe de suporte não pode ajudá-lo a criar seus modelos personalizados, além de oferecer as orientações gerais abordadas nesta documentação. O senhor precisa de ajuda? Entre em contato com um parceiro da Klaviyo.
Para manter a segurança dos seus dados, a equipe de suporte da Klaviyo não pode abrir seus arquivos HTML.
Adicione um trecho de código ao seu modelo HTML
Adicione apenas um dos trechos de código descritos abaixo por modelo de e-mail. Um trecho de código permite que o senhor adicione vários blocos de arrastar e soltar, portanto, não é necessário adicionar vários trechos de código.
Por exemplo, se o senhor quiser adicionar uma imagem e um bloco de tabela usando o editor de arrastar e soltar, basta seguir as etapas de Adicionar um bloco de imagem personalizável abaixo. Depois de fazer o upload do seu modelo para Klaviyo e usá-lo em uma campanha ou fluxo, o senhor poderá adicionar um bloco acima ou abaixo do bloco da imagem.
Adicionar um bloco de texto editável Adicionar um bloco de texto editável
- Crie um modelo HTML personalizado usando seu editor de HTML preferido.
- Adicione o seguinte trecho de código ao seu modelo HTML. Coloque-o onde o senhor quiser adicionar o bloco de texto no modelo.
<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600"> <div class="klaviyo-block klaviyo-text-block"> Hello world!</div> </td> - No Klaviyo, navegue até Content > Templates.
- Selecione a guia modelos de e-mail.
- Clique em Importar.
- Digite um nome para seu modelo, faça o upload do arquivo HTML e importe-o.
- Se o senhor abrir o modelo na guia Templates, verá o código do modelo no editor HTML do Klaviyo.
- Para acessar o modelo no editor de arrastar e soltar do Klaviyo, adicione-o a uma campanha ou fluxo.
- Selecione Arrastar e soltar como o tipo de modelo.
- Observe o bloco de texto que diz Hello world! Esse é seu bloco de texto editável.
- Arraste e solte blocos adicionais acima ou abaixo do bloco de texto, conforme desejado.
Adicionar um bloco de imagens personalizávelAdicionar um bloco de imagens personalizável
- Crie um modelo HTML personalizado usando seu editor de HTML preferido.
- Adicione o seguinte trecho de código ao seu modelo HTML. Certifique-se de colocá-lo onde deseja adicionar o bloco de imagem após importar o modelo.
<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600"> <div class="klaviyo-block klaviyo-image-block"></div> </td>- Opcionalmente, o senhor pode adicionar uma imagem predefinida dentro da div. Se o senhor optar por fazer isso, seu código terá a seguinte aparência:
<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>
- Opcionalmente, o senhor pode adicionar uma imagem predefinida dentro da div. Se o senhor optar por fazer isso, seu código terá a seguinte aparência:
- No Klaviyo, navegue até Content > Templates.
- Selecione a guia modelos de e-mail.
- Clique em Importar.
- Digite um nome para o modelo, carregue o arquivo HTML e importe-o.
- Se o senhor abrir o modelo na guia Templates, verá o código do modelo no editor HTML do Klaviyo.
- Para acessar o modelo no editor de arrastar e soltar do Klaviyo, adicione-o a uma Campanha ou fluxo. Na etapa de conteúdo, selecione o modelo que o senhor importou.
- Observe o bloco de imagem, que conterá um botão para carregar uma imagem ou a imagem que o senhor incluiu.
- Arraste e solte blocos adicionais acima ou abaixo do bloco de imagem, conforme desejado.
Adicionar um bloco de conteúdo universalAdicionar um bloco de conteúdo universal
Esse processo é suportado para blocos de conteúdo universais, não para seções universais.
- Crie um modelo HTML personalizado usando seu editor de HTML preferido.
- Adicione o seguinte trecho de código ao seu modelo HTML. Certifique-se de colocá-lo onde deseja adicionar o bloco de imagem após importar o modelo.
<td data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
<div data-klaviyo-universal-block="block_id_1"> & nbsp;<div>
</td> - Substitua bloco pelo ID do seu bloco de conteúdo universal. Para encontrar o ID de um bloco de conteúdo universal:
- Navegue até o conteúdo > Universal conteúdo.
- Abra um bloco de conteúdo universal para editá-lo.
- O URL dessa página seguirá o seguinte formato: https://www.klaviyo.com/email-template-editor/universal/block/BLOCK_ID.
- Copie o ID do bloco do URL.
- No Klaviyo, navegue até Content > Templates.
- Selecione a guia modelos de e-mail.
- Clique em Importar.
- Digite um nome para o modelo, carregue o arquivo HTML e importe-o.
- Se o senhor abrir o modelo na guia Templates, verá o código do modelo no editor HTML do Klaviyo.
- Para acessar o modelo no editor de arrastar e soltar do Klaviyo, adicione-o a uma Campanha ou fluxo. Na etapa de conteúdo, selecione o modelo que o senhor importou.
- Observe o(s) bloco(s) de conteúdo universal.
O senhor pode adicionar vários blocos de conteúdo universal com um único snippet de código. Para isso, adicione outro elemento div imediatamente após o primeiro no snippet de código acima, usando um ID de bloco diferente.
Adicionar um bloco de outro tipo (ou seja, bloco de produto, bloco de tabela) Adicionar um bloco de outro tipo (ou seja, bloco de produto, bloco de tabela)
- Crie um modelo HTML personalizado usando seu editor de HTML preferido.
- Adicione o seguinte trecho de código ao seu modelo HTML. Coloque-o onde quiser adicionar o(s) bloco(s) depois de importar o modelo.
<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600"> <div class="klaviyo-block klaviyo-text-block"> Hello world!</div> </td> - No Klaviyo, navegue até Content > Templates.
- Selecione a guia modelos de e-mail.
- Clique em Importar.
- Digite um nome para o modelo, carregue o arquivo HTML e importe-o.
- Se o senhor abrir o modelo na guia Templates, verá o código do modelo no editor HTML do Klaviyo.
- Para acessar o modelo no editor de arrastar e soltar do Klaviyo, adicione-o a uma Campanha ou fluxo. Na etapa de conteúdo, selecione o modelo que o senhor importou.
- Observe o bloco de texto que diz Hello world! Arraste outro bloco (por exemplo, um bloco de produto) para baixo desse bloco.
- Exclua o bloco de texto e adicione outros blocos personalizados, conforme desejado.
Exemplo de código de modelo de e-mail híbrido
O exemplo abaixo mostra um arquivo HTML funcional com o trecho de código híbrido para um bloco de texto. Use esse código para testar a funcionalidade do editor híbrido.
<html>
<head>
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Um e-mail híbrido simples</title>
<style>
body {
background-color: #f6f6f6;
font-family: sans-serif;
margin: 20px;
}
.main {
background: #ffffff;
border-radius: 3px;
width: 100%;
}
.contêiner {
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"> Este é um e-mail HTML muito simples</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">
Olá mundo!
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="wrapper">{% unsubscribe %}</td>
</tr>
</table>
</div>
</body>
</html>
Emojis e modelos híbridos de e-mail
A partir de fevereiro de 2024, todos os emojis serão compatíveis com todos os editores de e-mail Klaviyo (ou seja, o editor de arrastar e soltar, o editor híbrido, o editor somente de texto e o editor HTML personalizado).
ResultadoResultado
Depois de concluir essas etapas, o senhor poderá adicionar e editar determinadas áreas de um modelo HTML personalizado. Observe que o senhor não pode adicionar ou editar blocos de arrastar e soltar em nenhuma área do modelo personalizado, exceto onde o bloco inicial foi colocado.
Recursos adicionais