Criar conteúdo de e-mail com o editor Drag & drop

Crie conteúdo de e-mail no editor integrado da Pushwoosh sem escrever código. Você obtém um layout reutilizável com blocos de conteúdo, imagens, botões, texto personalizado e um rodapé em conformidade que pode usar em uma Customer Journey ou em um e-mail único.

Nota

Prefere HTML? Use o editor de código HTML da Pushwoosh para mais controle. Saiba mais

Importante

Antes de começar, configure os idiomas, a linha de assunto e o pré-cabeçalho do seu e-mail. Saiba como

Criar novo conteúdo de e-mail

1. Vá para Conteúdo → Conteúdo de e-mail.
2. Escolha como começar:
   • Clique em Criar conteúdo de e-mail para abrir o editor Drag & drop e criar um e-mail do zero.
   • Clique na seta ao lado de Criar conteúdo de e-mail, depois selecione Usar um modelo para começar a partir de um layout pré-construído na galeria.
   • Clique na seta ao lado de Criar conteúdo de e-mail, depois selecione Código HTML para usar o editor de código HTML. Saiba mais

Explore o layout do editor

Assim que você abre um e-mail, o editor integrado tem estas áreas:

Barra superior

Renomeie o e-mail, desfaça ou refaça alterações, execute a Verificação para encontrar problemas antes de enviar e salve seu trabalho. Consulte Verifique seu e-mail antes de enviar. Abra o menu ⋮ para mais ações:

• Visualizar: veja o e-mail como ele será renderizado para os destinatários, com seu próprio seletor de Desktop/Mobile. Consulte Editar a visualização mobile.
• E-mail de teste: envie uma prévia para um dispositivo ou endereço de teste. Consulte Enviar um e-mail de teste.
• Brand book: aplique seu logotipo, cores, fontes e padrões de bloco salvos a este e-mail com um clique. Saiba mais
• Seção Estilos da marca: aplique sua marca salva ou redefina as substituições de estilo por bloco sem abrir o Brand book. Saiba mais
• Histórico de versões: visualize e restaure uma versão salva anteriormente deste e-mail. Consulte Restaurar uma versão anterior.

Barra de Idioma / Assunto / Pré-cabeçalho

Acima da área de trabalho (canvas), alterne o idioma de edição, defina a linha de assunto e o pré-cabeçalho para o e-mail e use a Tradução automática para preencher as traduções ausentes. Saiba como configurar idiomas e localização.

Canvas

Veja o e-mail como os destinatários o verão e edite textos, imagens e botões diretamente no layout. Um e-mail vazio mostra Comece com um bloco.

Painel de camadas

Lista todos os blocos do seu e-mail em forma de árvore, na mesma ordem que no canvas. Abra-o na borda esquerda para selecionar um bloco aninhado ou arraste as linhas para reordenar o conteúdo.

Painel direito

Alterne entre três abas:

• Blocos: adicione conteúdo ao e-mail. Consulte a Referência de blocos de conteúdo de e-mail.
• Configurações: aplique estilos a todo o e-mail de uma vez. Consulte Configurar estilo e rodapé para todo o e-mail.
• IA: converse com o assistente de IA para gerar ou editar conteúdo a partir de um comando.

Adicionar blocos de conteúdo

1. Abra a aba Blocos no painel direito.
2. Arraste um bloco para o canvas ou clique em um bloco para adicioná-lo ao final do e-mail.
3. Continue adicionando blocos até que o layout esteja pronto.

Cada tipo de bloco serve a um propósito diferente no e-mail:

• Título: títulos e cabeçalhos curtos
• Texto: corpo do texto e descrições mais longas
• Botão: uma chamada para ação clicável
• Imagem: imagens da Galeria de mídia, upload ou URL
• Vídeo: um pôster de vídeo clicável que abre no YouTube ou Vimeo
• Cartão: uma imagem com título, texto e botão em um único layout
• Divisor: uma linha que separa seções
• Colunas: layouts lado a lado (2, 3 ou 4 colunas iguais, ou divisões de 33/67 e 67/33)
• Produtos: uma grade de cartões de produtos — insira produtos manualmente ou puxe-os do seu Catálogo de produtos ou do carrinho abandonado de um destinatário
• Cronômetro: uma contagem regressiva para ofertas e prazos
• Menu: uma linha ou coluna de links de navegação ou contato
• Social: ícones que levam aos seus perfis sociais
• HTML: HTML personalizado, como um formulário, pesquisa ou vídeo incorporado

Consulte a Referência de blocos de conteúdo de e-mail para as configurações de cada bloco, como salvar e reutilizar blocos e tipos de link para botões e texto.

Mostrar conteúdo para destinatários específicos

Para mostrar um bloco apenas para alguns destinatários, defina uma condição de exibição.

Editar a visualização mobile

Depois de adicionar seus blocos de conteúdo, mude para a visualização mobile para verificar e ajustar como eles aparecem em um celular. Ao lado do seletor de idioma acima do canvas, use o seletor Desktop / Mobile para mudar para uma visualização mobile totalmente editável na largura real de um celular. Selecione, edite e reorganize o conteúdo exatamente da maneira que seus assinantes o verão em seus celulares, em vez de apenas visualizar como o layout de desktop se adapta.

Cada configuração que pode ser substituída na versão mobile tem uma caixa de seleção ao lado. Quando a caixa de seleção está desmarcada, uma dica mostra o valor herdado do desktop, e a configuração continua a usá-lo. Marque a caixa de seleção para definir um valor separado para a versão mobile. Desmarque-a novamente para voltar ao valor do desktop.

Definir preenchimento e tamanho de fonte diferentes por dispositivo

• Preenchimento: cada bloco, coluna, cartão e elemento individual (como texto, imagem ou botão) tem um controle de preenchimento que você pode substituir para a versão mobile. Mude o canvas para Mobile, marque a caixa de seleção ao lado de Preenchimento e defina o novo valor. O preenchimento do desktop permanece o mesmo até que você marque a caixa de seleção.
• Tamanho da fonte: ative Tamanho da fonte (mobile) em um elemento de texto para definir um tamanho apenas para a versão mobile. Sem essa substituição, os títulos grandes encolhem automaticamente para caber na tela do celular.

Controlar como as colunas se empilham na versão mobile

Os layouts de Colunas empilham verticalmente em celulares por padrão. Na visualização mobile, use Empilhar colunas para definir como cada bloco de Colunas se comporta:

• Empilhar: as colunas fluem para uma única coluna, de cima para baixo (padrão).
• Manter linha: as colunas permanecem lado a lado, preservando o layout do desktop.
• Inverter: as colunas empilham em ordem inversa. Útil para linhas de imagem + texto: mantenha a imagem à direita no desktop, mas mostre-a no topo na versão mobile.

Mostrar ou ocultar conteúdo por dispositivo

Abra as configurações de um bloco ou elemento e use Ocultar no mobile ou Ocultar no desktop em Visibilidade para mostrá-lo em apenas um dispositivo, para que você possa criar banners, CTAs ou navegação específicos para cada dispositivo sem precisar manter dois modelos.

Nota

Ocultar conteúdo por dispositivo não é o mesmo que ocultá-lo por destinatário. Para mostrar blocos diferentes para destinatários diferentes, consulte Mostrar conteúdo para destinatários específicos.

Configurar estilo e rodapé para todo o e-mail

Depois que o layout principal estiver pronto, abra a aba Configurações para definir fontes, cores e espaçamento que se aplicam a todo o e-mail, e preencha o Rodapé com os detalhes da sua empresa e o link de cancelamento de inscrição. Os padrões aqui mantêm os novos blocos consistentes até que você os substitua no canvas. Saiba mais

Salvar seu e-mail

Clique em Salvar na barra superior para salvar suas alterações. Use Desfazer/Refazer na barra superior para avançar e retroceder em suas edições.

Nota

Salvar armazena seu e-mail em Conteúdo → Conteúdo de e-mail. A partir daí, você pode editá-lo e gerenciá-lo, e usá-lo em suas campanhas. Saiba mais

Restaurar uma versão anterior

O Pushwoosh salva um instantâneo toda vez que você clica em Salvar. Para acessá-los, abra o menu ⋮ na barra superior e selecione Histórico de versões — disponível assim que o e-mail for salvo pelo menos uma vez.

O painel esquerdo lista as versões salvas, da mais nova para a mais antiga, com o autor, data e hora, e um selo de Mais recente na versão atual. Selecione qualquer versão para visualizá-la à direita e, em seguida, clique em Restaurar para carregá-la no editor.

A restauração carrega a versão como alterações não salvas. Nada é sobrescrito até que você clique em Salvar. Para desfazer uma restauração, pressione Cmd/Ctrl+Z. O Pushwoosh mantém as 20 versões mais recentes por e-mail.

Dica

Se o seu navegador fechar antes de você salvar, o Pushwoosh mantém um backup local de suas edições não salvas. Na próxima vez que você abrir esse e-mail, um banner oferecerá Restaurar ou Descartar. Este backup existe apenas no navegador onde foi criado e é limpo assim que você salva.

Verifique seu e-mail antes de enviar

Clique em Verificar na barra superior para abrir a Verificação inteligente e escanear seu e-mail em busca de problemas comuns:

• Botões sem link
• Placeholders de IA não preenchidos
• Espaços de imagem vazios e texto alternativo ausente
• Contraste de texto que não atende ao WCAG AA
• Linha de assunto vazia ou muito longa
• Endereço postal do remetente ausente no rodapé de um e-mail de marketing
• Conteúdo que ultrapassa o limite de corte do Gmail (~102 KB, após o qual o Gmail trunca a mensagem)
• Conteúdo não traduzido
• Um cronômetro de contagem regressiva cuja data final já passou
• Uma condição de exibição com uma regra quebrada ou vazia, um ramo que perdeu o bloco ao qual se conecta, ou uma condição que não será aplicada porque o conteúdo dinâmico está desativado para a conta
• Sintaxe Liquid quebrada no assunto, pré-cabeçalho, rodapé ou corpo, verificada em todos os idiomas que você adicionou
• Um bloco de Produtos usando Regra de catálogo, Carrinho ou Recomendações sem token de acesso à API

Clique em um achado para ir diretamente para o elemento afetado no canvas.

Nota

A Verificação inteligente é executada dentro do editor e não verifica a capacidade de entrega. A Auditoria, que é executada na etapa de envio da campanha contra um envio de teste real, ainda verifica coisas como pontuação de spam, links quebrados e o cabeçalho de cancelamento de inscrição. Execute a Verificação inteligente primeiro para corrigir problemas visíveis no editor e, em seguida, confie na Auditoria antes de enviar.

A Verificação inteligente valida a sintaxe Liquid automaticamente toda vez que você a abre — não há um botão separado para clicar. Enquanto a verificação está em execução, o painel mostra Verificando sintaxe Liquid…; a Verificação inteligente não informa que tudo passou até que esta verificação retorne, então uma verificação Liquid lenta ou com falha não pode se esconder atrás de um falso “tudo certo”.

Nota

A verificação Liquid valida apenas a sintaxe. Ela não verifica se as tags ou atributos de evento que você referencia existem ou se os valores estão disponíveis para todos os usuários.

Enviar um e-mail de teste

Antes de enviar sua campanha de e-mail, você pode enviar um e-mail de teste para visualizar como o conteúdo aparecerá nas caixas de entrada dos destinatários.

1. Abra o menu ⋮ na barra superior e selecione E-mail de teste.

2. Na janela que se abre, adicione até 50 destinatários: escolha um ou mais dispositivos de teste salvos, ou digite qualquer endereço de e-mail válido para adicioná-lo à lista. Para remover um destinatário, clique no × sobre ele.

3. Clique em Enviar para enviar a mensagem de teste para todos os destinatários escolhidos. Se todos os endereços falharem, o Pushwoosh mostra um erro na caixa de diálogo; se apenas alguns falharem, ele lista os endereços que falharam em uma notificação e ainda entrega para o resto.

Use seu conteúdo de e-mail salvo

Agora que seu conteúdo de e-mail está pronto, ele pode ser usado em campanhas de e-mail. Saiba mais sobre como usá-lo