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 preheader do seu e-mail. Saiba como

Criar 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 a partir de um layout pré-construído na 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 encontrar problemas antes de enviar e salve seu trabalho. Consulte 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. Consulte Edite a visualização móvel.
• Test email: envie uma prévia para um dispositivo ou endereço de teste. Consulte 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. Consulte Restaure uma versão anterior.

Barra de Idioma / Assunto / Preheader

Acima da tela de edição, alterne o idioma de edição, defina a linha de assunto e o preheader 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 de edição (Canvas)

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 (Layers)

Lista todos os blocos do seu e-mail em uma árvore, na mesma ordem da tela de edição. 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:

• Blocks: adicione conteúdo ao e-mail. Consulte Referência de blocos de conteúdo de e-mail.
• Settings: aplique estilos a todo o e-mail de uma vez. Consulte Configure o estilo e o rodapé de todo o e-mail.
• AI: 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 Blocks no painel direito.
2. Arraste um bloco para a tela de edição ou clique em um bloco para adicioná-lo no 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
• 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.

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 como eles aparecem em um telefone. Ao lado do seletor de idioma acima da tela de edição, 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 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 (Padding): 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 de edição para Mobile, marque a caixa de seleção ao lado de Padding e defina o novo valor. O preenchimento do desktop permanece o mesmo até que você marque a caixa de seleção.
• Tamanho da fonte (Font size): ative Font size (mobile) 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 (Stack): as colunas fluem para uma única coluna, de cima para baixo (padrão).
• Manter linha (Keep row): as colunas permanecem lado a lado, preservando o layout do desktop.
• Inverter (Reverse): as colunas se 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.

Mostrar ou ocultar 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, consulte 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 Settings para definir fontes, cores e espaçamentos 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 de edição. Saiba mais

Salve seu e-mail

Clique em Save na barra superior para salvar suas alterações. Use Undo/Redo 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 e 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 Save. Para acessá-los, abra o menu ⋮ na barra superior e selecione Version history — 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 Latest na versão atual. Selecione qualquer versão para visualizá-la à direita e, em seguida, clique em Restore 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 Save. 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 Check na barra superior para abrir o Smart check e escanear seu e-mail em busca de problemas comuns:

• Botões sem link
• Marcadores 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, preheader, rodapé ou corpo, verificada em todos os idiomas que você adicionou

Clique em um achado para ir diretamente ao elemento afetado na tela de edição.

Nota

O Smart check é executado 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 o Smart check primeiro para corrigir problemas visíveis no editor e, em seguida, confie na Auditoria antes de enviar.

O Smart check valida a sintaxe Liquid automaticamente toda vez que você o abre — não há um botão separado para clicar. Enquanto a verificação está em execução, o painel mostra Verificando sintaxe Liquid…; o Smart check não informa que tudo passou até que essa 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 visualizar como o conteúdo aparecerá nas caixas de entrada dos destinatários.

1. Abra o menu ⋮ na barra superior e selecione Test email.

2. Na janela que se abre, escolha um dispositivo de teste salvo ou digite qualquer endereço de e-mail.

3. Clique em Send para enviar a mensagem de teste para o endereço que você escolheu.

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