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.

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 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.
• Dispositivos móveis
  Defina se quer habilitar a otimização para celular (recomendado) ou exibir o mesmos estilo e conteúdo no computador e em dispositivos móveis. 
• Outros
  • Moeda
    Selecione uma moeda padrão para o modelo, se ela for diferente das configurações da sua conta. 

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. 

Saiba mais sobre 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. 

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. 

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

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. 

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

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 dispositivos móveis, 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 dispositivo móvel 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 direcionado 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. 

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 em 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 solicitação 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 exibidos 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. 

Recursos adicionais

• Referência de personalização de mensagens
• Como criar um modelo básico
• Curso: Introdução ao editor de modelos de e-mail