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 os detalhes do remetente do seu e-mail. Saiba como

Crie um 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 e selecione Usar um modelo para começar com um layout pré-construído da galeria.
   • Clique na seta ao lado de Criar conteúdo de e-mail e selecione Código HTML 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, salve seu trabalho ou envie um e-mail de teste.

Barra de Idioma / Assunto / Preheader

Acima do canvas, alterne o idioma de edição e defina a linha de assunto e o preheader para o e-mail. Saiba como configurá-los.

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 como uma árvore, na mesma ordem do canvas. Abra-o na borda esquerda para selecionar um bloco aninhado ou arraste as linhas para reordenar o conteúdo.

Painel direito

Use Blocos para adicionar conteúdo ao e-mail e Configurações para estilização que se aplica a todo o e-mail de uma vez. Consulte Configure a estilização de todo o e-mail.

Comece a construir seu e-mail

1. Arraste um bloco do painel Blocos para o canvas ou clique em um bloco no painel para adicioná-lo.
2. Continue adicionando blocos da mesma forma até que o layout esteja pronto.
3. Abra a aba Configurações quando precisar de estilização para todo o e-mail.

Adicionar blocos de conteúdo

Abra a aba Blocos e arraste um bloco para o canvas ou clique em um bloco para adicioná-lo. Blocos disponíveis:

• Título: títulos e cabeçalhos curtos no e-mail
• 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
• Divisor: uma linha que separa seções visualmente
• 2 colunas: duas colunas iguais lado a lado
• 3 colunas: três colunas iguais lado a lado
• 4 colunas: quatro colunas iguais lado a lado
• 33 / 67: duas colunas onde a esquerda ocupa cerca de 33% da largura e a direita cerca de 67%
• 67 / 33: duas colunas onde a esquerda ocupa cerca de 67% da largura e a direita cerca de 33%
• Cronômetro: uma contagem regressiva para ofertas e prazos
• Menu: uma linha ou coluna de links, como navegação ou contatos
• Social: ícones que levam aos seus perfis sociais
• HTML: HTML personalizado, como um formulário, pesquisa ou vídeo incorporado

Título e texto

Os blocos de Título e Texto contêm o texto que os destinatários leem no e-mail. Edite o texto no canvas e formate-o com a barra de ferramentas.

Clique em um bloco de Título ou Texto para editar seu conteúdo no canvas. Selecione um texto para abrir a barra de ferramentas de formatação: negrito, itálico, sublinhado, alinhamento, um botão de link e um menu suspenso de estilo de texto.

Merge Tags são marcadores de posição que inserem um valor de Tag do perfil do destinatário no e-mail, para que cada assinante veja um texto personalizado. Para adicionar uma, selecione o texto, clique em Merge Tags na barra de ferramentas e escolha uma Tag da sua conta.

Imagem

Um bloco de Imagem exibe uma imagem no e-mail. Selecione-o no canvas para abrir as configurações de Imagem no painel direito.

• Adicionar imagem / Substituir imagem: clique em Adicionar imagem quando o bloco estiver vazio, ou Substituir imagem quando uma imagem já estiver definida. Você pode fazer upload de um arquivo ou escolher um da sua Galeria de mídia.
• URL da imagem: cole um link hospedado para a imagem.
• Texto alternativo: descreva a imagem para acessibilidade.
• URL do link: abre um link quando a imagem é clicada. Consulte Adicionar links para os tipos de link disponíveis.
• Destino do link: abre o link na mesma aba ou em uma nova.
• Arquivo: depois de adicionar uma imagem, mostra o caminho do arquivo em uso.

Em Espaçamento, ative o Padding para adicionar espaço ao redor da imagem. Use Todos os lados para o mesmo preenchimento em todos os lados, ou ative Mais opções para definir cada lado separadamente.

Botão

Um Botão é uma chamada para ação clicável no e-mail.

Clique em um bloco de Botão para editar seu rótulo no canvas. Use a barra de ferramentas para alterar o tamanho da fonte, cor do texto, negrito, itálico, sublinhado e alinhamento.

Para definir o que acontece quando o destinatário clica no botão:

• Clique no ícone de link na barra de ferramentas para abrir Inserir/Editar Link.
• Ou use Tipo de ação e URL na seção Link do painel direito.

Consulte Adicionar links para os tipos de ação disponíveis.

No painel direito, em Estilos:

• Alinhamento: esquerda, centro ou direita.
• Plano de fundo, Cor do texto, Tamanho da fonte e Família da fonte: ative cada opção para substituir a aparência padrão.
• Raio da borda, Cor da borda e Largura da borda: forma e contorno do botão.
• Largura: defina uma largura fixa para o botão ou deixe-a automática.
• Padding: adicione espaço dentro do botão. Use Todos os lados para um preenchimento uniforme, ou ative Mais opções para definir cada lado separadamente.

Divisor

Um Divisor é uma linha horizontal entre os blocos de conteúdo. Use-o para separar seções visualmente no e-mail.

Configure o estilo da linha (Sólida, Tracejada, Pontilhada), cor, espessura e largura no painel de configurações.

HTML

O bloco HTML permite que você cole HTML personalizado em seu e-mail. Use-o para um formulário personalizado, pesquisa ou vídeo incorporado.

Exemplos

Formulário de lead

Este formulário de lead coleta um endereço de e-mail para enviar um código promocional para a Promoção de Ano Novo.

Código HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
  h2 { font-size: 18px; margin-bottom: 8px; color: #222; }
  p { font-size: 14px; color: #666; margin-bottom: 20px; }
  input {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
  }
  button {
    width: 100%;
    padding: 14px;
    background: #CC0000;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
</style>
</head>
<body>

<h2>Get your New Year Sale code</h2>
<p>Enter your email and we'll send you an exclusive promo code for up to 50% off.</p>

<div id="form">
  <input type="email" placeholder="Your email address" />
  <button type="button">Get my code</button>
</div>

</body>
</html>

Pesquisa

Esta pesquisa pergunta em qual categoria o destinatário está comprando e vincula cada opção à página de promoção relevante.

Código HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; text-align: center; }
  h2 { font-size: 18px; margin-bottom: 6px; color: #222; }
  p { font-size: 13px; color: #888; margin-bottom: 20px; }
  .option {
    display: block;
    width: 100%;
    padding: 14px;
    margin-bottom: 10px;
    background: #f5f5f5;
    border: 2px solid transparent;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    box-sizing: border-box;
    text-decoration: none;
    color: #222;
  }
  .option:hover { border-color: #CC0000; background: #fff5f5; }
</style>
</head>
<body>

<h2>What are you shopping for?</h2>
<p>Pick a category and go straight to your deals</p>

<a class="option" href="https://example.com/sale/clothing">👗 Clothing</a>
<a class="option" href="https://example.com/sale/electronics">📱 Electronics</a>
<a class="option" href="https://example.com/sale/beauty">💄 Beauty</a>
<a class="option" href="https://example.com/sale/home">🏠 Home & Living</a>

</body>
</html>

Vídeo

Este exemplo incorpora um vídeo promocional da Promoção de Ano Novo no e-mail.

Código HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    text-align: center;
  }
  .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
  }
  .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
</head>
<body>

<h1>New Year Sale — Up to 50% Off</h1>

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/YOUR_VIDEO_ID"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen></iframe>
</div>

</body>
</html>

Nota

Você também pode adicionar um link de cancelamento de inscrição diretamente no bloco HTML:

<a href=%%PW_EMAIL_UNSUBSCRIBE%%>Unsubscribe</a>

O marcador de posição %%PW_EMAIL_UNSUBSCRIBE%% é substituído pela URL de cancelamento de inscrição da Pushwoosh quando o e-mail é enviado.

Menu

O bloco Menu posiciona vários itens clicáveis em uma linha ou coluna. Use-o para uma barra de navegação ou uma lista de contatos da empresa.

Para cada item do menu, defina:

• Rótulo: o texto que os destinatários veem
• URL: onde o item abre
• Destino: mesma aba ou uma nova aba

Nas configurações do bloco, você também pode definir:

• Direção: Horizontal ou Vertical
• Alinhamento: Esquerda, Centro ou Direita
• Separador: um divisor opcional entre os itens
• Fonte, tamanho, peso, espaçamento entre letras e cores de link/texto

Social

O bloco Social exibe uma linha de ícones de mídia social que levam aos seus perfis. Use-o para enviar destinatários para o Facebook, Instagram, X e outras plataformas a partir do e-mail.

Adicione as entradas da plataforma e, em seguida, defina o alinhamento, o tamanho do ícone e o espaçamento entre os ícones.

Cronômetro de contagem regressiva

O bloco Cronômetro é uma contagem regressiva no e-mail. Use-o para ofertas por tempo limitado, vendas relâmpago e lembretes de eventos.

Para configurá-lo:

1. Em Contagem regressiva, defina a Data de término e a Hora de término, depois escolha o Fuso horário e o Idioma para os rótulos do cronômetro.
2. Ative os Rótulos para mostrar as legendas “dias / horas / minutos / segundos” sob os dígitos, ou desative para mostrar apenas os números.
3. Em Aparência, defina o Plano de fundo, a Cor dos dígitos, a Cor dos rótulos e o tamanho da fonte para os dígitos (padrão 40px) e rótulos (padrão 16px).
4. Ajuste o Espaçamento (padding) conforme necessário.

Colunas

Colunas dividem o canvas em seções lado a lado para que você possa posicionar o conteúdo um ao lado do outro em uma única linha.

Arraste um destes blocos para o canvas:

• 2 colunas: duas colunas iguais
• 3 colunas: três colunas iguais
• 4 colunas: quatro colunas iguais
• 33 / 67: coluna esquerda com cerca de 33% de largura, direita com cerca de 67%
• 67 / 33: coluna esquerda com cerca de 67% de largura, direita com cerca de 33%

Em seguida, adicione conteúdo a cada coluna. Para alterar o espaçamento de todas as colunas no e-mail, abra Configurações → Padrões de colunas e ajuste o padding externo, o padding da coluna e o espaçamento entre as colunas.

Adicionar links

Use a caixa de diálogo Inserir/Editar Link para definir o que acontece quando um destinatário clica em um botão ou texto selecionado. Escolha um Tipo de ação e preencha os campos para essa ação.

Abrir site

Abre um link quando o destinatário clica. Insira o endereço em URL.

Link para gerenciar preferências

Adiciona um link para o centro de preferências de inscrição onde os destinatários podem escolher quais categorias de e-mail recebem. O link é inserido automaticamente.

Link de cancelamento de inscrição

Permite que os destinatários cancelem a inscrição de acordo com os regulamentos e suas preferências.

Dica

Você também pode adicionar um link de cancelamento de inscrição em um bloco HTML:

<a href=%%PW_EMAIL_UNSUBSCRIBE%%>Unsubscribe</a>

O marcador de posição %%PW_EMAIL_UNSUBSCRIBE%% é substituído pela URL de cancelamento de inscrição da Pushwoosh quando o e-mail é enviado.

O que acontece quando o destinatário clica no link de cancelamento de inscrição

Se o centro de preferências de inscrição estiver ativado

O destinatário cancela a inscrição apenas da categoria atribuída a esse e-mail (por exemplo, Newsletter). O nome da categoria é adicionado à sua tag Categorias de e-mail com inscrição cancelada.

Uma tela de confirmação aparece com as opções Reinscrever-se e Gerenciar preferências. Saiba mais.

Se o centro de preferências de inscrição não estiver ativado

O destinatário opta por não receber todos os e-mails de marketing e a tag E-mails com inscrição cancelada é definida como true. E-mails transacionais não são afetados e continuarão a ser entregues. Saiba mais sobre tipos de mensagem.

Importante

Para permitir que você entregue e-mails importantes aos seus clientes, não excluímos usuários com inscrição cancelada da sua base de usuários.

Para continuar enviando mensagens para destinatários engajados, crie um segmento filtrado por E-mails com inscrição cancelada = false. Para evitar reclamações, não envie e-mails para destinatários que cancelaram a inscrição.

Os cliques são contados na taxa de cancelamento de inscrição no Histórico de mensagens.

Link da versão web

Dá aos destinatários acesso a uma versão web do e-mail, útil se eles tiverem problemas para visualizá-lo em sua caixa de entrada.

Link de confirmação do formulário de inscrição

Insere um link de confirmação para o envio de um formulário de inscrição (por exemplo, para confirmar um double opt-in). Saiba mais sobre double opt-in.

Configure a estilização de todo o e-mail

As configurações de e-mail controlam a estilização de todo o e-mail: tamanho e plano de fundo do documento, opções voltadas para o remetente e estilos padrão para os blocos.

Abra a aba Configurações no painel direito.

Seções disponíveis:

• Documento: tamanho e aparência de toda a área do e-mail: largura, padding, cor de fundo, imagem ou gradiente de fundo, cor do texto, família da fonte e o espaçamento entre os blocos.
• Opções de e-mail: ative ou desative Ver no navegador e Link de cancelamento de inscrição para o e-mail.
• Padrões de bloco: estilos iniciais compartilhados para blocos que você adiciona posteriormente, para que o novo conteúdo corresponda ao e-mail até que você substitua um bloco no canvas.
• Padrões de colunas: espaçamento para cada layout de Colunas: padding externo, padding dentro de cada coluna e o espaçamento entre as colunas.
• Padrões de cartão: aparência inicial para contêineres de Cartão que agrupam conteúdo no layout, aplicada até que você estilize um cartão individualmente.
• Padrões de grupo de botões: espaçamento e alinhamento quando vários botões estão juntos como um grupo.
• Padrões de botão: aparência inicial para novos blocos de Botão para que os CTAs permaneçam consistentes em todo o e-mail até que você estilize um separadamente.
• Padrões de divisor: estilo de linha inicial, cor, espessura e largura para novos blocos de Divisor.

Os padrões se aplicam onde um bloco individual não os substitui.

Configure o rodapé do e-mail

Todo e-mail inclui um bloco de Rodapé para as informações do remetente legalmente exigidas e o link de cancelamento de inscrição. Selecione Rodapé no Painel de camadas para abrir suas configurações.

Use Carregar da conta para buscar seu rodapé salvo no nível da conta, ou Salvar como padrão da conta para reutilizar o rodapé atual como ponto de partida para e-mails futuros.

• Tipo de e-mail: Marketing ou Transacional. A visibilidade do cancelamento de inscrição segue esta configuração.
• Logotipo: defina a URL do logotipo ou escolha um da galeria, depois defina a largura em px e um link de clique opcional.
• Nome da empresa, Endereço postal e Copyright: sua identidade de remetente no rodapé.

Cuidado

E-mails de marketing devem incluir um endereço postal físico (CAN-SPAM).

Em Links e selos:

• Links do rodapé: adicione links rotulados, como Política de Privacidade ou Termos.
• Selos de loja de aplicativos: adicione selos da App Store ou Google Play com URLs de destino.
• Links sociais: adicione ícones que levam aos seus perfis sociais.

Em Estilo:

• Cor do texto: defina a cor do texto do rodapé.
• Tamanho da fonte (px): defina o tamanho da fonte do rodapé.
• Alinhamento: esquerda, centro ou direita.
• Sublinhar links: ative para sublinhar os links do rodapé.

Em Opções:

• Texto do link de cancelamento de inscrição: o rótulo para o link de cancelamento de inscrição gerenciado em e-mails de marketing. E-mails transacionais o omitem.

Localize o conteúdo do seu e-mail

Use o seletor de idioma acima do canvas para adicionar idiomas e editar o conteúdo por idioma. Saiba como adicionar idiomas.

O conteúdo que você ainda não traduziu para o idioma atual aparece esmaecido. Comece a digitar para criar a tradução. O idioma padrão continua sendo exibido até que você o faça.

Nota

Qualquer bloco que você adicionar aparecerá com o mesmo conteúdo para todos os idiomas. Lembre-se de traduzir novos textos e rótulos de botões para cada idioma que você usa em seu e-mail.

Salve seu e-mail

Clique em Salvar na barra superior para salvar suas alterações. Use Desfazer/Refazer na barra superior para retroceder e avançar 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, gerenciá-lo e usá-lo em suas campanhas. Saiba mais

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. Clique em E-mail de teste na barra superior.

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

3. Clique em Enviar 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