Skip to content

Criar um e-mail com arrastar e soltar

Usando o editor de arrastar e soltar, você pode criar mensagens de e-mail totalmente personalizadas para Campaigns ou Canvas, sem precisar usar HTML para construir o corpo do e-mail.

Sobre o editor

O editor de arrastar e soltar usa Conteúdo e Linhas como os dois componentes principais para simplificar seu fluxo de trabalho, sem uso adicional de HTML.

Conteúdo

Conteúdo inclui uma série de blocos que representam diferentes tipos de conteúdo que você pode usar na sua mensagem. Eles estão organizados em três categorias: básico, mídia e avançado.

Os blocos básicos são a base do seu e-mail. Com eles, você pode adicionar qualquer um dos seguintes elementos ao corpo do e-mail:

  • Título
  • Parágrafo
  • Lista
  • Botão
  • Divisor
  • Espaçador

Com os blocos de mídia, você pode adicionar diferentes conteúdos visuais, como imagens, vídeos, ícones e links de redes sociais e ícones personalizáveis.

Embora o editor de arrastar e soltar simplifique seu fluxo de trabalho com esses blocos, você também pode usar blocos avançados para inserir HTML ou adicionar um menu ao corpo do e-mail. Observe que usar seu próprio HTML pode afetar a forma como a mensagem é renderizada.

Linhas

Linhas são unidades estruturais que definem a composição horizontal de uma seção da mensagem usando colunas. Você pode usar linhas vazias ou Content Blocks. Usar mais de uma coluna permite colocar diferentes elementos de conteúdo lado a lado. Dessa forma, você pode adicionar todos os elementos estruturais necessários à sua mensagem, independentemente do modelo selecionado no início.

Estilo de cartões

Estilo de cartões é uma propriedade de linha que permite adicionar espaçamento entre colunas e arredondar seus cantos. Com a formatação de estilo de cartão, você pode criar layouts visualmente mais atraentes para destacar seu conteúdo mais importante, como novos recursos de produto, depoimentos, ofertas especiais, atualizações de notícias e muito mais.

Usando o editor de arrastar e soltar

Não tem certeza se sua mensagem de e-mail deve ser enviada usando uma Campaign ou um Canvas? Campaigns são melhores para campanhas de mensagens únicas e direcionadas, enquanto Canvas é melhor para jornadas de usuário com várias etapas.

Depois de selecionar onde construir sua mensagem, vamos ver as etapas para criar um e-mail com arrastar e soltar.

Etapa 1: Selecione seu modelo

Depois de selecionar o editor de arrastar e soltar como sua experiência de edição, você pode escolher:

  • Começar com um modelo em branco.
  • Usar um modelo de e-mail de arrastar e soltar pré-projetado da Braze.
  • Usar um modelo de e-mail de arrastar e soltar salvo.

Você também pode acessar todos os modelos na seção Modelos.

Depois de selecionar seu modelo, você verá uma visão geral do e-mail em Variantes de e-mail, que inclui as informações de envio e o corpo do e-mail.

Em seguida, selecione Editar corpo do e-mail para começar a projetar a estrutura do e-mail no editor de arrastar e soltar.

A seção "Variantes de e-mail" com um exemplo de corpo de e-mail.

Etapa 2: Construa seu e-mail

A experiência de edição de arrastar e soltar é dividida em três seções: Configurações de envio, Conteúdo e Pré-visualização e teste. A mágica de construir o corpo do e-mail acontece na seção Conteúdo. Antes de construir seu e-mail, é importante entender os componentes principais que guiam sua experiência de criação de e-mail. Se precisar revisar, consulte Sobre o editor.

Quando estiver pronto, use os blocos de conteúdo de arrastar e soltar para construir seu e-mail.

  1. Selecione o painel Linhas. Arraste e solte as configurações de linha no editor principal. Isso definirá o layout do conteúdo do seu e-mail.
    • Observe que novas configurações devem ser arrastadas para o topo ou para a parte inferior de uma seção existente.
    • Ao selecionar uma configuração de linha, as configurações de Propriedades da linha aparecem para personalização adicional de cores de fundo da linha, imagens e tamanhos de coluna personalizados.
  2. Selecione o painel Conteúdo. Arraste e solte os blocos de conteúdo desejados nos componentes de linha.
    • Você também pode arrastar qualquer um dos blocos de Conteúdo para o editor principal. Isso cria uma linha para o bloco.
    • Você pode refinar ainda mais o bloco selecionando-o e ajustando os campos em Propriedades do conteúdo e Opções de bloco. Isso inclui editar espaçamento entre letras, preenchimento, altura da linha e muito mais.

Confira Outras personalizações para outras formas de personalizar ainda mais seu e-mail de arrastar e soltar.

Enquanto constrói seu e-mail, você pode alternar entre a visualização para desktop e celular para ver como sua mensagem ficará para seus grupos de usuários. Isso garante que seu conteúdo seja responsivo, e você pode fazer os ajustes necessários ao longo do caminho.

Etapa 3: Adicione suas informações de envio

Depois de terminar de projetar e construir sua mensagem de e-mail, é hora de adicionar suas informações de envio na seção Configurações de envio.

  1. Em Informações de envio, selecione um e-mail como Nome de exibição do remetente + Endereço. Você também pode personalizar isso selecionando Personalizar nome de exibição do remetente + Endereço.
  2. Selecione um e-mail como Endereço de resposta. Você também pode personalizar isso selecionando Personalizar endereço de resposta.
  3. Em seguida, selecione um e-mail como Endereço CCO para tornar seu e-mail visível para esse endereço.
  4. Adicione uma linha de assunto ao seu e-mail. Opcionalmente, você também pode adicionar um pré-cabeçalho e um espaço em branco após o pré-cabeçalho.

Uma pré-visualização no painel à direita será preenchida com as informações de envio que você adicionou. Essas informações também podem ser atualizadas acessando Configurações > Preferências de e-mail > Configuração de envio.

Personalizando o cabeçalho do e-mail (avançado)

Em Configurações de envio, você pode adicionar personalização para cabeçalhos de e-mail e extras de e-mail, o que permite enviar dados adicionais de volta para outros prestadores de serviço de e-mail. Personalizar um cabeçalho de e-mail, como incluir o nome do destinatário, também pode contribuir para a probabilidade de seu e-mail ser aberto.

Etapa 4: Teste seu e-mail

Depois de adicionar suas informações de envio, é hora de finalmente testar seu e-mail.

Acesse a seção Pré-visualização e teste. Aqui, você tem a opção de pré-visualizar seu e-mail como um usuário ou enviar uma mensagem de teste. Esta seção também inclui o Inbox Vision, que permite verificar se seu e-mail foi renderizado corretamente em diferentes clientes de e-mail para celular e web.

Como você pode visualizar três versões diferentes do mesmo e-mail no editor, no Inbox Vision e como um e-mail de teste real, é importante alinhar os detalhes em todas as suas plataformas.

Pré-visualização e envio de teste

Na guia Pré-visualizar como usuário, você pode selecionar os seguintes tipos de usuário para pré-visualizar sua mensagem.

  • Usuário aleatório: a Braze selecionará aleatoriamente um usuário do banco de dados e pré-visualizará o e-mail com base nos atributos ou informações de eventos desse usuário.
  • Selecionar usuário: você pode selecionar um usuário específico com base no endereço de e-mail ou ID externo. O e-mail será pré-visualizado com base nos atributos e informações de eventos desse usuário.
  • Usuário personalizado: você pode personalizar um usuário. A Braze oferecerá campos para todos os atributos e eventos disponíveis. Você pode inserir qualquer informação que deseja ver no e-mail de pré-visualização.

Você também pode selecionar Copiar link de pré-visualização para gerar e copiar um link de pré-visualização compartilhável que mostra como o e-mail ficará para um usuário aleatório. O link durará sete dias antes de precisar ser regenerado.

Observe que quaisquer edições feitas em um modelo de e-mail não serão refletidas em um link gerado anteriormente. Você precisará gerar um novo link de pré-visualização para ver as edições.

Pré-visualização de e-mail com um botão para "Copiar link de pré-visualização" e copiar o link gerado.

Usar o Inbox Vision

O Inbox Vision permite visualizar suas campanhas de e-mail da perspectiva de clientes de e-mail e dispositivos móveis. Para testar sua mensagem de e-mail usando o Inbox Vision, selecione Inbox Vision na seção Pré-visualização e teste e selecione Executar Inbox Vision.

É importante testar e verificar os detalhes mais finos da sua mensagem de e-mail. Por exemplo, imagens de fundo em mensagens de e-mail podem às vezes causar linhas brancas ou desconexões entre imagens, ou clientes como o Windows Outlook podem não exibir imagens de fundo. Usar o Inbox Vision pode ajudar a identificar essas discrepâncias entre clientes. Nesse cenário, defina uma cor de fundo de fallback para que essas imagens possam ser renderizadas conforme esperado.

Para saber mais, consulte Enviar mensagens de teste.

Depois de usar o editor de arrastar e soltar para projetar e criar sua mensagem de e-mail, continue a construir o restante da sua Campaign ou Canvas.

Sobre o mecanismo HTML atualizado

O mecanismo subjacente que produz HTML a partir do editor de arrastar e soltar foi otimizado e atualizado, resultando em benefícios relacionados à compressão e renderização de arquivos HTML.

O tamanho médio dos dados HTML exportados foi reduzido, levando a carregamento e renderização mais rápidos, redução de cortes em dispositivos móveis e menor consumo de largura de banda.

A renderização HTML foi aprimorada com base nas seguintes atualizações que minimizam o número de comentários condicionais e consultas de mídia CSS. Como resultado, os arquivos HTML são menores e codificados de forma mais eficiente.

  • Migração de um design baseado em elementos <div> para uma base de código formatada em <table> padrão
  • Os blocos do editor foram recodificados para maior concisão
  • O código HTML final é comprimido para remover espaços em branco entre tags
  • Divisores transparentes são automaticamente convertidos em preenchimento de conteúdo

Outras personalizações

Conforme você continua construindo e-mails de arrastar e soltar, pode personalizar ainda mais cada corpo de e-mail usando uma combinação desses detalhes criativos para capturar a atenção e o interesse do seu público na sua mensagem.

Imagens com largura automática

As imagens adicionadas ao seu e-mail serão automaticamente definidas como Largura automática. Para ajustar essa configuração, desative a Largura automática e ajuste a porcentagem de largura conforme necessário.

Opção de largura automática na guia Conteúdo do editor de arrastar e soltar.

Camadas de cores

Usando camadas de cores, você pode alterar a cor do fundo do e-mail, da área de conteúdo e de diferentes componentes de conteúdo. A ordem das cores da frente para trás é: cor do componente de conteúdo, cor de fundo da área de conteúdo e cor de fundo.

Exemplo de camadas de cores no editor de arrastar e soltar.

Preenchimento de conteúdo

Opções de bloco para o editor de arrastar e soltar.

Para ajustar o preenchimento, role para baixo até Opções de bloco e selecione Mais opções. Você pode ajustar o preenchimento para deixar seu e-mail com a aparência perfeita.

Fundo do conteúdo

Você pode adicionar uma imagem de fundo à configuração de linha, permitindo incorporar mais design e conteúdo visual na sua campanha de e-mail.

Atributo de idioma

Você pode definir o atributo de idioma acessando a guia Configurações e selecionando o idioma desejado. Você também pode direcionar o atributo de usuário {{${language}}} se a mensagem for destinada a usuários com valores de idioma dinâmicos.

Definindo o valor de "Idioma" para um e-mail.

Personalização

Opções para adicionar personalização no editor de arrastar e soltar.

Liquid básico é suportado no editor de e-mail de arrastar e soltar. Para adicionar personalização ao seu e-mail:

  1. Selecione Personalização na seção Conteúdo.
  2. Selecione o tipo de personalização. Isso inclui atributos padrão, atributos de dispositivo, atributos personalizados e muito mais.
  3. Pesquise o atributo a ser adicionado.
  4. Copie o snippet Liquid gerado e cole-o no corpo do e-mail.

A personalização com Liquid não é suportada para blocos de imagem e campos de tipo de link de botão.

Imagens dinâmicas

Você pode optar por incluir imagens dinâmicas nas suas mensagens de e-mail incluindo Conteúdo conectado ou Liquid no atributo de origem da imagem. Por exemplo, em vez de uma imagem estática, você pode inserir https://example.com/images/?imageBanner={{first_name}} como a URL da imagem para incluir o nome do usuário na imagem. Isso ajuda a personalizar seus e-mails para cada usuário.

Direção do texto

Ao redigir sua mensagem, você pode alternar a direção do texto entre da esquerda para a direita e da direita para a esquerda selecionando o respectivo botão de Direção do texto. Você pode usar essa opção ao criar mensagens em idiomas como árabe e hebraico.

Menu do editor de arrastar e soltar de e-mail com botão para alternar o alinhamento do texto entre da direita para a esquerda e da esquerda para a direita.

A aparência final das mensagens da direita para a esquerda depende em grande parte de como os prestadores de serviço as renderizam. Para práticas recomendadas sobre como criar mensagens da direita para a esquerda que sejam exibidas da forma mais precisa possível, consulte Criando mensagens da direita para a esquerda.

HTML

A seção "Atributos" com o atributo "clicktracking" desativado para um link.

Ao usar links, botões, imagens e vídeos no editor de arrastar e soltar, selecione Adicionar novo atributo em Atributos na seção Conteúdo para anexar informações adicionais às tags HTML nos e-mails. Isso pode ser especialmente útil para personalização de mensagens, segmentação e estilização.

Um caso de uso comum é inserir um atributo na sua tag de âncora para desativar o rastreamento de cliques ao enviar pela Braze.

  • SendGrid: clicktracking = "off"
  • SparkPost: data-msys-clicktrack = "0"

Outro caso de uso comum é sinalizar links específicos como links universais. Links universais são links que redirecionam para o seu app, proporcionando aos seus usuários uma experiência integrada.

  • SendGrid: universal = "true"
  • SparkPost: data-msys-sublink = "open-in-app" (um subcaminho personalizado deve ser configurado)

Para configurar links universais, consulte Links universais e App Links.

Alternativamente, você pode integrar com um dos nossos parceiros de atribuição, como Branch ou AppsFlyer, para gerenciar links universais.

Por fim, atributos predefinidos estão disponíveis para ajudar a tornar sua mensagem acessível. Saiba mais no nosso artigo dedicado Criando mensagens acessíveis na Braze.

Tags head personalizadas

Use tags <head> para adicionar CSS e metadados na sua mensagem de e-mail. Por exemplo, você pode usar essas tags para adicionar uma folha de estilos ou um favicon. Liquid é suportado em tags <head>.

Qualquer coisa adicionada fora das tags <head> será adicionada após a tag <body> no seu e-mail. Isso significa que o conteúdo adicionado será exibido no e-mail.

Tags e atributos permitidos por tag
New Stuff!