Crie 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é compatível 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

Crie um novo conteúdo de e-mail

1. Vá para Content → Email content.
2. Escolha como começar:
   • Clique em Create email content para abrir o editor Drag & drop e criar um e-mail do zero.
   • Clique na seta ao lado de Create email content e selecione Use a template para começar com um layout pré-construído da galeria.
   • Clique na seta ao lado de Create email content e selecione HTML code para usar o editor de código HTML. Saiba mais

Explore o layout do editor

Ao abrir um e-mail, o editor integrado possui estas áreas:

Barra superior

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

• Preview: veja o e-mail como ele será renderizado para os destinatários, com seu próprio seletor Desktop/Mobile. Veja Edite a visualização móvel.
• Test email: envie uma pré-visualização para um dispositivo ou endereço de teste. Veja Envie 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 Brand styles: aplique sua marca salva ou redefina as substituições de estilo por bloco sem abrir o Brand book. Saiba mais
• Version history: visualize e restaure uma versão salva anteriormente deste e-mail. Veja Restaure uma versão anterior.

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

Acima da tela, 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.

Tela

Veja o e-mail como os destinatários o verão e edite texto, 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 uma árvore, na mesma ordem da tela. 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. Veja Referência de blocos de conteúdo de e-mail.
• Configurações: aplique estilos a todo o e-mail de uma vez. Veja Configure o estilo e o rodapé de todo o e-mail.
• IA: converse com o assistente de IA para gerar ou editar conteúdo a partir de um comando.

Adicione blocos de conteúdo

1. Abra a aba Blocos no painel direito.
2. Arraste um bloco para a tela 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 manchetes curtas
• Texto: corpo do texto e descrições mais longas
• Botão: uma chamada para ação clicável
• Imagem: imagens da Loja 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
• Temporizador: 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.

Mostre conteúdo para destinatários específicos

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

Edite a visualização móvel

Depois de adicionar seus blocos de conteúdo, mude para a visualização móvel para verificar e ajustar a aparência deles em um telefone. Ao lado do seletor de idioma acima da tela, use o seletor Desktop / Mobile para alternar para uma visualização móvel totalmente editável na largura real de um telefone. Selecione, edite e reorganize o conteúdo exatamente da maneira que seus assinantes o verão em seus telefones, em vez de apenas pré-visualizar como o layout de desktop se adapta.

Cada configuração que pode ser substituída na versão móvel 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 móvel. Desmarque-a novamente para voltar ao valor do desktop.

Defina 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 móvel. Mude a tela para Móvel, 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 (móvel) em um elemento de texto para definir um tamanho apenas para a versão móvel. Sem essa substituição, os títulos grandes encolhem automaticamente para caber na tela do telefone.

Controle como as colunas se empilham na versão móvel

Os layouts de Colunas empilham verticalmente em telefones por padrão. Na visualização móvel, 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 móvel.

Mostre ou oculte conteúdo por dispositivo

Abra as configurações de um bloco ou elemento e use Ocultar no celular 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 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, veja Mostrar conteúdo para destinatários específicos.

Configure o estilo e o rodapé de 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 na tela. Saiba mais

Salve 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 Content → Email content. A partir daí, você pode editá-lo, gerenciá-lo e usá-lo em suas campanhas. Saiba mais

Restaure 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 pré-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
• Espaços reservados 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 temporizador 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

Clique em um achado para ir diretamente ao elemento afetado na tela.

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 seja concluída, 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.

Envie um e-mail de teste

Antes de enviar sua campanha de e-mail, você pode enviar um e-mail de teste para pré-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 com falha em uma notificação e ainda entrega para o restante.

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