Guia do editor de modelos de e-mail
O que você vai aprender
Conheça os modelos de e-mail de arrastar e soltar da Klaviyo e saiba como usar o editor 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 construir o e-mail do zero, e conteúdo universal, que é o conteúdo que você construiu em outro modelo e salvou para uso posterior.
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 o layout (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, clique e arraste o bloco ou a seção.
Estilo de modelo
A aba principal da seção "Estilos" contém várias opções que se aplicam ao modelo como um todo. Para acessar as principais configurações de estilo de um modelo, mova o cursor para fora dos blocos ou das seções em uso e selecione Concluir e Estilos.
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 usados para preencher novos modelos, acesse a Biblioteca da marca > Marca.
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
Você também pode adicionar uma imagem de fundo. - Plano de fundo do conteúdo
Defina uma cor de fundo para o conteúdo do e-mail. Pode ser uma cor diferente do plano de fundo do modelo, abrangendo apenas o conteúdo. - Largura
A largura do conteúdo de seu e-mail (recomendação: 600 px) - Raio de canto, margens, preenchimento e borda
Adicionar 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. Para aplicar um estilo de texto, selecione-o no menu suspenso, em qualquer bloco de texto. - Fonte
Selecione 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
Defina se quer habilitar a otimização para celular (recomendado) ou exibir o mesmos estilo e conteúdo no computador e em celular. - Outros
- Moeda
Selecione uma moeda padrão para o modelo, se ela 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 para o conteúdo na parte principal da seção "Estilos" e, em seguida, definir uma cor de fundo específica para o bloco, a cor de fundo do bloco será usada somente nessa área.
Seções e estilos de seção
O conteúdo do editor de modelos é organizado em seções. Ao criar um modelo, ele conterá uma ou mais seções por padrão, e o usuário 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. Ao clicar em um bloco, você verá as configurações dele, e não da seção mais abrangente.
Cada seção tem uma aba "Estilos" e uma aba "Opções". 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 dispositivos e destinatários podem 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 do bloco entrarem em conflito com os da 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 "Estilo", em que é possível configurar a aparência do bloco, e uma aba "Opções de exibição", em que você pode escolher quem pode ver o bloco e em quais dispositivos. As configurações de estilos específicos são diferentes para cada tipo de bloco, mas as 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.
- Selecionar entre as cores usadas recentemente ou as cores já presentes neste modelo.
- Usar a ferramenta de conta-gotas para escolher uma cor em qualquer lugar da tela do e-mail (atualmente não disponível para texto, divisão ou blocos de tabela).
Saiba mais sobre as opções de exibição ou confira abaixo como usar esse tipo de bloco.
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 ao modelo principal, ou personalize o texto com as configurações do editor.
O editor de e-mail da Klaviyo usa o padrão de codificação UTF-8, ou seja, é 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> Recolha a seção Conteúdo ou role a tela para baixo para ajustar os estilos do bloco. Escolha uma cor de fundo para o bloco ou a área de conteúdo de texto e adicione um preenchimento.
Se você tiver escrito seu texto fora do editor da Klaviyo (Google Docs, Microsoft Word etc.), cole-o no editor 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. - Imagem importada
Importe uma imagem usando o URL. - 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: texto alternativo (descrição da imagem), link para que ela seja clicável, largura, alinhamento e outros estilos.
Saiba como inserir imagens em modelos.
Dividir
Você pode dividir blocos para exibir o conteúdo em duas colunas de qualquer largura. O conteúdo de cada coluna deve ser uma imagem ou texto. Por padrão, o bloco é dividido pela metade. Para ajustar essa proporção, basta acessar a aba Configurações de divisão. Você também pode usar o layout "Colunas" para dividir seu conteúdo em duas 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.
Preencha pelo menos os campos Texto e URL . 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 computador ou celular e eles serão adaptados ao 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. Recomendamos mostrar apenas os principais links em celulares, por serem menores.
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 em um celular para conferir o produto final.
Sombra projetada
Use uma sombra projetada para adicionar profundidade à sua mensagem ou enfatizar uma determinada área. Você pode usar cores claras, escuras e ainda mais escuras, além de 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 redes sociais
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 os 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 o artigo Como usar feeds e recomendações de produtos.
Um bloco de produtos estático mostra itens selecionados manualmente no editor de modelos. Ele não pode ser atualizado automaticamente nem segmentado a destinatários específicos.
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. Confira todas as opções na aba de estilos de bloco de produtos para personalizá-lo.
Cupom
Use um bloco de cupom para exibir um código de cupom em seu e-mail. Quando você arrastar um bloco de cupom para a tela, clique no botão + para escolher um cupom da sua conta. Você pode pesquisar por nome ou filtrar por categoria.
O código de cupom selecionado será exibido para todos os destinatários. Se o cupom ainda não tiver sido atribuído a um destinatário, ele será atribuído a ele automaticamente no horário de envio. 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. Com eles, você pode adicionar quantas colunas ou linhas quiser. O espaçamento pode ser criado automaticamente, mas também é possível definir a largura na aba Colunas.
Quando um bloco de tabela é arrastado pela primeira vez para o modelo, ele tem uma linha com duas colunas. Use a aba Configurações da tabela para adicionar linhas e colunas e, em seguida, volte para a aba Conteúdo para configurar seu conteúdo.
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. Ao alternar entre texto e imagem, é possível perder o conteúdo que estava na célula. Use o botão "Desfazer" para reverter as alterações.
Para editar cores, fontes, bordas e o layout da tabela, abra Configurações da tabela .
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, apresente avaliações reais de clientes para provar o valor da sua marca e aumentar as conversões.
Esse bloco mostra uma seleção de citações de avaliações que podem ser exibidas nas suas mensagens. Se não puder selecionar uma avaliação, pode ser porque:
- Não há avaliações de alta qualidade suficientes na sua conta. Aguarde o fortalecimento de suas avaliações e tente depois.
- 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 pedido de avaliação da Klaviyo ou marcada como verificada em um CSV de 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
Você pode usar dois blocos diferentes para arrastar colunas para seus modelos de e-mail: "Dividir" e "Layout de colunas". Com um bloco dividido, só é possível exibir conteúdo de texto e imagem em duas colunas, mas você pode ajustar a largura de cada uma.
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. Já o layout permite de uma a quatro colunas.
Depois de adicionar colunas ao seu modelo, solte blocos de conteúdo em cada uma para preenchê-la. Você não precisa usar apenas um bloco de conteúdo por coluna: empilhe quantos quiser!
Vídeo
Os blocos de vídeo criam a impressão de um vídeo incorporado ao e-mail. Quando o destinatário clica no botão de reprodução, uma nova aba é aberta e o vídeo é reproduzido.
Para adicionar um bloco de vídeo, copie o URL do vídeo do YouTube, Vimeo, TikTok ou da plataforma de hospedagem de vídeo de sua preferência. Se o seu vídeo for do YouTube, a Klaviyo selecionará automaticamente uma imagem em miniatura.
Ao usar um vídeo de outras fontes, é necessário fazer upload de uma imagem em miniatura do vídeo. Um botão de reprodução será sobreposto a ela, mas ele pode ser desativado nas configurações de blocos.
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. Eles geralmente retiram completamente esse código, ou seja, os destinatários não veem o conteúdo quando abrem o e-mail.
A Klaviyo tem o compromisso de orientar seus clientes para o sucesso. Nossos testes mostram que vídeos não são renderizados de forma consistente nos principais serviços de e-mail. Por isso, não incorporamos vídeos diretamente às mensagens.
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.
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 outras alterações.
Pré-visualização do seu e-mail
Use o botão Pré-visualizar e testar para ver como o e-mail aparecerá na caixa de entrada do destinatário. Se estiver criando um e-mail na aba "Modelos de e-mail", confira-o com base em como ele será enviado. Use a tabela abaixo para identificar a melhor forma de visualização.
Tipo de mensagem | Práticas recomendadas de pré-visualização |
Campanha Fluxo disparado por lista Fluxo disparado por segmento Fluxo de queda de preço Fluxo disparado por data | Use o campo Pesquisar perfis e procure alguém que faça parte da lista ou do segmento para o qual planeja enviar o conteúdo ou que se qualifique 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 o evento que acionará o fluxo. Se você selecionar outro evento ou outra visualização por perfil, os dados dinâmicos podem não ser renderizados corretamente. |
Recursos adicionais
- Referência sobre a personalização de mensagens
Saiba como usar as tags do modelo da Klaviyo para personalizar a experiência dos seus clientes.
- Como criar um modelo básico
Saiba como criar um modelo de e-mail básico no Klaviyo. Depois de criar um modelo básico, o senhor pode usá-lo em todas as suas campanhas e fluxos para acelerar o processo de criação e garantir que a sua marca seja consistente em todas as mensagens.
- Introdução ao editor de modelos de e-mail