Guia do editor de modelos de e-mail
O que você vai aprender
Saiba mais sobre o editor de modelos de e-mail de arrastar e soltar da Klaviyo, incluindo como usar os estilos de modelo e configurar cada tipo de bloco.
Sobre blocos e layouts
A barra lateral do editor de modelos de e-mail da Klaviyo exibe diversas opções de blocos e seções. Escolha entre blocos básicos, que são quadros em branco usados para criar e-mails do zero, e conteúdo universal, que é o conteúdo que você criou em outros modelos e salvou para usar depois.
Na seção Básico, há uma série de blocos e layouts. Use o bloco para adicionar conteúdo, como texto, imagens ou botões. Use layouts (ou seja, seções e colunas) para agrupar seus blocos e configurá-los.
Para copiar, excluir ou salvar blocos e seções, use os ícones exibidos ao passar o mouse sobre o bloco ou a seção.
Para mover um bloco ou uma seção, clique e arraste-o.
Estilo de modelo
Clique em Editar estilos na barra lateral esquerda para abrir as opções de estilo do seu modelo inteiro.
Nessa seção, você pode definir a aparência do seu e-mail. Se tiver feito a configuração no assistente, ela já terá alguns dos estilos da sua marca.
Para ajustar os estilos da marca que aparecem em novos modelos, abra Mídia e marca > Padrões. Clique em Editar, ajuste suas configurações e, em seguida, clique em Salvar.
Nessa opção, você pode editar as seguintes configurações:
- E-mail
- Plano de fundo do modelo
Escolha uma cor de fundo para o seu modelo - Imagem de fundo
Opcionalmente, adicione uma imagem de fundo - Plano de fundo do conteúdo
Defina uma cor de fundo para o conteúdo do seu e-mail; essa cor pode ser diferente do plano de fundo do modelo e se estende apenas pela largura do conteúdo do seu e-mail - Largura
A largura do conteúdo de seu e-mail (recomendação: 600 px) - Raio de canto, margens, preenchimento e borda
Adicione espaçamento e bordas ao seu modelo
- Plano de fundo do modelo
- Texto e cabeçalhos
Defina estilos para texto normal e quatro estilos de título e, em seguida, escolha um estilo de texto no menu suspenso em qualquer bloco de texto para aplicá-lo - Fonte
Selecione uma fonte, espaçamento, tamanho, espessura e cor para o estilo de texto. - Espaçamento entre letras
Espaçamento horizontal entre cada letra - Espaçamento entre linhas
Espaçamento vertical entre linhas de texto - Alinhamento do texto
Escolha alinhamento à esquerda, centralizado ou à direita. - Celular
Escolha se deseja ativar a otimização para celular (recomendado) ou exibir os mesmos estilos e conteúdo no desktop e no celular - Outros
- Moeda
Selecione uma moeda padrão para o modelo, se for diferente das configurações da sua conta
- Moeda
Como estilos de modelo interagem com estilos de blocos e seções
Suas configurações de estilo de modelo são aplicadas antes das configurações específicas dos blocos e das seções. Se os estilos de um bloco ou de uma seção entrarem em conflito com os do modelo, serão usados os estilos do bloco e da seção. Por exemplo, se você definir uma cor de fundo do conteúdo no painel Editar estilos e depois definir uma cor de fundo específica do bloco, a cor de fundo do bloco será usada na área desse bloco.
Seções e estilos de seção
O conteúdo do editor de modelos é organizado em seções. Quando você cria um novo modelo, ele conterá 1 ou mais seções por padrão, e você pode adicionar ou excluir seções conforme necessário.
Para abrir as configurações de uma seção, clique na área à direita ou à esquerda do conteúdo da seção. Observe que, ao clicar em um bloco, você abrirá as configurações desse bloco, e não da seção que o contém.
Cada seção tem uma aba Estilos e uma aba Exibição. Use os estilos da seção para adicionar imagens de fundo, preenchimento e outros estilos a essa seção. Use as opções de exibição da seção para escolher quais tipos de dispositivo e destinatários devem ver as seções.
As configurações de estilo de seções são aplicadas após os estilos de modelo, mas antes dos estilos de blocos. Se os estilos de modelo entrarem em conflito com os da seção, será usado o estilo da seção. Se as configurações de um bloco entrarem em conflito com os estilos da sua seção, será usado o estilo do bloco.
Blocos e estilos de blocos
Adicione blocos às seções para incluir conteúdo no seu e-mail. A maioria dos blocos de conteúdo tem uma aba Estilos, onde você pode configurar a aparência do bloco, e uma aba Exibição, onde você pode escolher quem deve ver o bloco e em quais tipos de dispositivo ele deve ser exibido. As configurações de estilos específicos disponíveis são diferentes para cada tipo de bloco, mas as mesmas opções de exibição estão disponíveis para todos os blocos.
Todas as seções de estilo com opções de cores incluem a ferramenta de seleção de cores, que permite selecionar uma cor de diferentes formas:
- Usar o campo de gradiente para selecionar matiz e tom.
- Copiar e colar um código HEX ou RGB.
- Selecione entre as cores usadas recentemente ou as cores já presentes neste modelo.
- Se o seu navegador for compatível com a ferramenta conta-gotas, use-a para escolher uma cor de qualquer lugar na tela de edição do e-mail.
Saiba mais sobre as opções de exibição ou continue lendo para saber mais sobre os tipos de bloco e como usá-los.
Texto
Use um bloco de texto para adicionar conteúdo aos seus e-mails. Escolha um estilo de texto (Normal ou Título 1–4) para aplicar as configurações de estilo do modelo principal ou personalize o conteúdo do texto com as configurações do editor de texto.
O editor de e-mail da Klaviyo usa o padrão de codificação UTF-8, o que significa que ele é compatível com caracteres latinos, emojis, caracteres de byte duplo e muito mais.
Você pode adicionar conteúdo dinâmico ao seu bloco de texto para personalizar a mensagem para cada destinatário. Saiba mais sobre a personalização de mensagens.
Para adicionar texto em um idioma escrito da direita para a esquerda (RTL), como o hebraico, adicione o seguinte snippet ao código-fonte de um bloco de texto, na parte superior do modelo:
<style type="text/css">
p, h1, h2, h3, h4, ol, li, ul { direction: rtl; }
</style> Abra a guia Estilos do bloco de texto para escolher uma cor de fundo para o bloco ou a área de conteúdo de texto e adicionar preenchimento.
Se você escrever seu texto fora do editor da Klaviyo (por exemplo, no Google Docs ou no Microsoft Word), ao colar o texto no editor, cole como texto simples. Use Command+Shift+V ou Ctrl+Shift+V para colar como texto simples. Caso contrário, determinadas tags de estilo serão coladas junto com o texto, o que pode gerar problemas no design.
Imagem
Use um bloco para incluir imagem no seu e-mail. Você pode adicionar imagens das seguintes fontes:
- Biblioteca de imagens
Para adicionar uma imagem que você já tenha carregado, busque-a em sua biblioteca de imagens. - Upload de imagem
Faça upload de um arquivo JPEG, PNG ou GIF a partir do seu dispositivo. Você também pode fazer upload de uma imagem WebP não animada e convertê-la para PNG quando solicitado. - Importar de URL
Importe uma imagem usando o URL da imagem - Imagem dinâmica
Exiba uma imagem personalizada para cada destinatário usando uma variável de imagem dinâmica, por exemplo, enviar o URL de uma imagem vinculada aos dados de evento ou como propriedade do perfil.
Depois de selecionar a imagem, ajuste suas configurações, incluindo texto alternativo (uma descrição da imagem), um endereço de link para que a imagem seja clicável, largura da imagem, alinhamento e outros estilos.
Dividir
Use um bloco de divisão para exibir conteúdo em 2 colunas de qualquer largura. Adicione uma imagem ou conteúdo de texto a cada lado do bloco de divisão. Por padrão, seu bloco de divisão usará uma divisão 50/50; acesse a aba Estilos para ajustar essa proporção. Como alternativa, você pode usar o layout Colunas para fazer a divisão do seu conteúdo em 2 ou mais colunas.
Botão
Os blocos de botões geram links grandes, mais aparentes do que os links de texto comuns. Eles são ótimos para enfatizar chamadas para ação (CTAs). Como são usados para CTAs, é provável que apareçam poucas vezes em um e-mail.
No mínimo, preencha os campos Texto e Endereço do link. O texto é o que o destinatário verá no botão, e o URL é para onde o visitante será levado quando clicar nele. Ajuste a aparência, a forma e o tamanho do botão usando as opções de cor, raio de canto e preenchimento. Você também pode ajustar a fonte do bloco e outros estilos abaixo.
Cabeçalho e barra de links
Você pode adicionar ao bloco de cabeçalho ou à barra de links um logotipo e links de navegação que redirecionem para diferentes conteúdos no seu site.
Ao arrastar o bloco, você verá layouts comuns de cabeçalho e barra de links para escolher. Você pode selecionar layouts diferentes para desktop e celular, para acomodar melhor o tamanho de cada dispositivo.
Devido aos mecanismos de renderização de HTML exclusivos do Outlook, uma borda pode ser adicionada aos elementos do cabeçalho e barra de links. Para evitar que isso aconteça, crie um cabeçalho com um bloco de imagem para seu logotipo e uma tabela para seus links.
Adicione os links desejados à barra de links. Você pode definir as configurações de exibição do dispositivo para cada link, e recomendamos mostrar apenas os links principais em dispositivos móveis, já que o tamanho da tela é menor.
Depois de adicionar seus links e logotipo, dê os toques finais usando as opções de estilo abaixo. Você pode alterar a fonte, as cores e o espaçamento do bloco. Quando estiver tudo pronto, visualize no computador e no celular para conferir o produto final.
Sombra projetada
Use uma sombra projetada para adicionar profundidade à sua mensagem ou enfatizar uma determinada área. As opções de cor para a sombra incluem Claro, Médio e Escuro, e você pode definir uma cor de fundo e um preenchimento para o bloco.
Divisor
Adicione uma linha simples entre outros blocos de conteúdo. Escolha entre linhas sólidas, tracejadas ou pontilhadas. A cor, o tamanho e o preenchimento são totalmente personalizáveis. Antes chamada de Linha horizontal.
Link para rede social
O bloco de links para redes sociais é uma maneira fácil de adicionar ícones para seu Instagram, Pinterest, Facebook, X (Twitter) e muito mais. A Klaviyo oferece os ícones coloridos padrão para vários sites, bem como opções simplificadas em preto, branco ou cinza.
Se preferir usar ícones totalmente personalizados, escolha essa opção e faça upload de suas próprias imagens. Nesse caso, recomendamos imagens com 96 px. Para manter o espaçamento e o alinhamento entre os ícones da Klaviyo e suas imagens personalizadas, use ícones com 50 px de largura e centralizados vertical e horizontalmente no arquivo de imagem.
Arraste os rótulos dos ícones para a barra lateral para reordená-los. Você pode usar o botão Adicionar espaçador para ter um controle mais detalhado do espaço entre os ícones.
Espaçador
O espaçador adiciona um espaço personalizável entre os blocos empilhados verticalmente. Para personalizar o espaço entre blocos que estão lado a lado (por exemplo, em uma coluna), use o preenchimento à esquerda/à direita.
Produto
Use um bloco de produtos para adicionar itens recomendados do catálogo de sua loja. Ao adicionar um bloco de produto, você terá duas opções: dinâmico ou estático.
Um feed dinâmico é atualizado automaticamente e configurado por meio de um feed de produtos. Para saber mais sobre a configuração de um feed de produtos, leia nosso artigo Como usar feeds e recomendações de produtos.
Um bloco de produtos estático mostra apenas os itens do catálogo que você seleciona manualmente no editor de modelos e não será atualizado automaticamente nem direcionado a destinatários individuais.
Com qualquer uma das opções, você pode personalizar a aparência do bloco depois de selecionar o feed ou os itens. Os blocos de produtos podem mostrar apenas imagens ou incluir o nome e o preço de cada item. Role todas as opções na guia de estilos do bloco de produtos para personalizar totalmente o bloco.
Cupom
Use um bloco de cupom para exibir um código de cupom no seu e-mail:
- Arraste um bloco de cupom para a tela.
- Se a sua conta ainda não tiver cupons, clique em Criar cupom nas configurações do bloco para criar um e depois volte para este bloco no editor.
- Selecione um cupom recente ou clique em Ver tudo para pesquisar ou filtrar a lista de cupons e clique em Selecionar no cupom que você quer.
O bloco exibe o código atribuído de cada destinatário a partir do cupom selecionado. Se um destinatário ainda não tiver um código atribuído, a Klaviyo atribui um como parte do envio da mensagem. Isso se comporta da mesma forma que a inserção de um cupom usando uma tag de modelo, mas com opções de estilo incorporadas.
Você pode adicionar texto de cabeçalho para fornecer contexto para o cupom e personalizar a aparência do bloco, inclusive o estilo do texto do cupom, a cor do plano de fundo e a borda.
Tabela
Os blocos de tabela podem ajudam a estruturar imagens e texto em um modelo de e-mail. Adicione colunas ou linhas conforme necessário. O espaçamento entre colunas é definido automaticamente, ou você pode configurar a Largura de cada coluna na seção Colunas da guia Estilos.
Quando um bloco de tabela é arrastado pela primeira vez para o seu modelo, ele tem 1 linha com 2 colunas. Use a aba Estilos para adicionar linhas e colunas adicionais e, em seguida, volte para a aba Conteúdo para configurar o conteúdo da tabela.
Use a seção Seleção de células para abrir o conteúdo de uma célula específica. Use a seção Conteúdo da célula para escolher entre conteúdo de texto ou imagem. Em seguida, acrescente o conteúdo. Observe que, se você alternar entre os tipos de conteúdo de texto e de imagem, poderá perder o conteúdo que estava anteriormente naquela célula; use o botão "Desfazer" para reverter suas alterações.
Para editar as cores, fontes, bordas e o layout da tabela, abra a guia Estilos.
Os blocos de tabela também são usados para exibir conteúdo dinâmico, como detalhes dos itens no carrinho do destinatário. Saiba mais sobre blocos de tabelas dinâmicas.
HTML
Adicione um código personalizado ao seu modelo usando o bloco de HTML. Use esse tipo de bloco ao adicionar elementos com código personalizado, recursos de terceiros (como cronômetros de contagem regressiva) ou CSS personalizado. Se tiver problemas com o código personalizado no seu e-mail, veja como solucioná-los.
Citação de avaliação
Se você usa o Klaviyo Reviews, use um bloco de citação de avaliação para destacar avaliações de clientes no seu e-mail.
O bloco de citações de avaliações oferece uma seleção de avaliações para você destacar nas suas mensagens. Se você ainda não consegue selecionar uma avaliação, pode ser porque:
- Seus filtros estão excluindo as avaliações que você quer. O seletor de avaliações começa com avaliações de 5 estrelas selecionadas; ajuste a classificação e outros filtros para ampliar a seleção.
- Não há avaliações de alta qualidade suficientes na sua conta. Volte mais tarde para ver uma seleção de avaliações.
- Suas avaliações ainda não foram processadas. Se você quiser incluir uma nova avaliação, aguarde algumas horas antes de tentar novamente.
- As avaliações da sua conta não são verificadas. Para ser verificada, uma avaliação deve ser enviada por meio de um link personalizado em um fluxo de solicitação de avaliação da Klaviyo ou marcada como verificada em um CSV enviado com avaliações de outra plataforma. Avaliações não verificadas, incluindo as enviadas diretamente ao seu site, não podem ser incluídas em um bloco de citações de avaliações.
Colunas
Use um bloco de divisão ou um layout de colunas para adicionar colunas aos seus modelos de e-mail. Um bloco de divisão coloca conteúdo de texto ou imagem em 2 colunas e permite ajustar com precisão a largura de cada coluna.
Com um layout de coluna, você pode adicionar qualquer tipo de conteúdo a cada coluna, mas fica limitado a algumas opções de largura pré-selecionadas. No entanto, o layout de colunas permite entre 1 e 4 colunas.
Depois de adicionar colunas ao seu modelo, solte blocos de conteúdo em cada uma para preenchê-la. Você não está limitado a apenas 1 bloco de conteúdo por coluna: adicione quantos blocos de conteúdo quiser, empilhados um em cima do outro.
Vídeo
Os blocos de vídeo exibem uma miniatura com link no seu e-mail. Quando um destinatário clica na miniatura, a página do vídeo vinculada é aberta.
Para adicionar um bloco de vídeo, cole o URL do seu vídeo nas configurações do bloco. O Klaviyo recupera uma miniatura para URLs compatíveis do YouTube, Vimeo e TikTok.
Se nenhuma miniatura aparecer ou se seu vídeo estiver hospedado em outro lugar, selecione ou faça upload de uma imagem de miniatura. Ative Mostrar botão de reprodução nas configurações do bloco para adicionar uma sobreposição de botão de reprodução.
Por que o vídeo não é reproduzido diretamente no e-mail?
Os principais serviços de e-mail (como o Gmail) considera conteúdos incorporados, como vídeos, uma ameaça à segurança. Esses clientes de e-mail geralmente removem esse código incorporado por completo, e seus destinatários não verão o conteúdo renderizado quando abrirem seu e-mail.
Como vídeos incorporados não são renderizados de forma consistente nos principais clientes de e-mail, a Klaviyo não oferece suporte à incorporação direta de vídeos.
Conteúdo universal
Para salvar blocos ou seções para aplicar a qualquer outro modelo, use o ícone de estrela. Você verá o bloco ou a seção salva na aba Universal dos blocos de modelos de e-mail. Ao modificar um bloco ou seção universal, você pode aplicar essas edições em todas as instâncias do conteúdo salvo. Depois de editar em todas as instâncias, clique em Publicar alterações, revise as mensagens afetadas e confirme a publicação.
Saiba mais sobre o uso de conteúdo universal salvo.
Desfazer e refazer
Se você cometer um erro ao editar o modelo, use o botão desfazer para revertê-lo. Você também pode usar o botão "Refazer" para reverter essa alteração. O modelo será salvo automaticamente durante a edição, e os botões Desfazer/Refazer registrarão as alterações ao editar o modelo. No entanto, as alterações anteriores só serão armazenadas durante a edição. Se você sair do modelo e voltar mais tarde, o botão "Desfazer" ficará desativado até que você faça alterações futuras.
Se o mesmo modelo estiver aberto em mais de uma guia, janela ou dispositivo, as alterações não serão mescladas. Uma versão mais antiga pode substituir edições mais recentes se for salva depois.
Visualizando seu e-mail
Clique em Pré-visualizar para conferir o layout do seu e-mail e o conteúdo personalizado. Se você estiver criando um modelo reutilizável, escolha dados de pré-visualização com base em como o e-mail será enviado. Use a tabela abaixo para selecionar os dados apropriados.
Tipo de mensagem | Práticas recomendadas de pré-visualização |
Campanha Fluxo disparado por lista Fluxo disparado por segmento Fluxo disparado por data | Use o campo Pesquisar perfis para procurar alguém que faça parte da lista/segmento para o qual você planeja enviar ou que possa se qualificar para receber o e-mail (para fluxos). Selecione um perfil. |
Fluxo disparado por métricas | Mude para Evento em Visualizar fonte de dados e selecione a métrica que acionará o fluxo e um evento de exemplo. Se você selecionar outro evento ou visualizar por perfil, os dados dinâmicos podem não ser renderizados corretamente. |
Fluxo de queda de preço | Abra o e-mail do fluxo de queda de preço e visualize-o com um evento de exemplo desse fluxo. Um perfil sozinho não fornece os dados de eventos de queda de preço. |
Depois de selecionar seus dados de pré-visualização, verifique os layouts para desktop e celular. Para verificar o e-mail em uma caixa de entrada, insira o endereço de e-mail do destinatário de teste na barra lateral de pré-visualização e clique em Enviar teste. Abra o e-mail de teste para verificar o layout e os links.
Recursos adicionais
- Message personalization reference
Learn how to use Klaviyo’s personalization variables, or tags, to customize the experience for your customers.
- How to create a base template
Learn how to create a base email template in Klaviyo. Once you create a base template, you can use it across your campaigns and flows to speed up your building process and ensure your branding is consistent across messages.
- Getting started with the email template editor