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, modelos híbridos). Seguindo estas etapas, o senhor pode criar um e-mail em HTML totalmente personalizado e, ao mesmo tempo, manter o acesso aos recursos disponíveis apenas no editor de arrastar e soltar (por exemplo, blocos de produtos ou 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 carregar seu modelo no Klaviyo e usá-lo em uma campanha ou fluxo, o usuário poderá adicionar blocos acima ou abaixo do bloco de 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.
- Clique em Import.
- 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.
- 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.
- Clique em Import.
- 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.
- Selecione Arrastar e soltar como o tipo de modelo.
- 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 outro tipo (ou seja, bloco de produto, bloco de tabela, conteúdo universal) Adicionar um bloco de outro tipo (ou seja, bloco de produto, bloco de tabela, conteúdo universal)
- 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.
- Clique em Import.
- 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.
- Selecione Arrastar e soltar como o tipo de modelo.
- Observe o bloco de texto que diz Hello world! Arraste outro bloco (por exemplo, um bloco de produto ou conteúdo universal) 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>
Modelos de e-mail híbridos e com emojis
A partir de fevereiro de 2024, todos os emojis serão compatíveis com todos os editores de e-mail da 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