Criar emails com arrastar e soltar

Visão geral

O Editor de Email Arrastar e Soltar do OneSignal permite criar emails responsivos visualmente, exatamente como aparecem nas caixas de entrada dos destinatários — sem escrever HTML completo. Você cria emails usando três componentes principais:

Configurações – estilos globais e layout aplicados em todo o email
Linhas – contêineres de layout horizontal que controlam estrutura e responsividade
Conteúdo – blocos individuais como texto, imagens, botões e HTML

As seções abaixo cobrem cada componente e a ordem recomendada para criar um email.

Use o Editor de Email Arrastar e Soltar se você quiser:

Criar emails visualmente sem gerenciar HTML completo (blocos HTML disponíveis)
Reutilizar linhas ou templates entre campanhas
Permitir que membros não técnicos da equipe editem conteúdo com segurança

Se você precisar de controle HTML completo, fontes personalizadas em todo lugar ou lógica avançada de modo escuro, use o Editor HTML.

Fluxo de criação recomendado

Siga esta ordem para melhores resultados e menos problemas de renderização:

Configure estilos globais em Configurações
Adicione estrutura de layout usando Linhas
Insira blocos de Conteúdo
Adicione personalização e links
Adicione um link de cancelamento (para emails de marketing)
Salve como template ou envie

Quando terminar, seu email deve:

Ter no máximo 600px de largura
Renderizar corretamente em mobile e desktop
Incluir os links de conformidade obrigatórios

Erros comuns que causam problemas de renderização ou entregabilidade:

Link de cancelamento ausente — obrigatório para emails de marketing. Sem ele, os provedores de caixa de entrada têm mais chance de classificar seu email como spam.
Email mais largo que 600px — causa rolagem horizontal em mobile e quebra layouts em muitos clientes.
Imagens de fundo em linhas — o Outlook e vários clientes mobile não as renderizam. Use blocos de Imagem.
Sem fontes alternativas — fontes web personalizadas carregam em poucos clientes. Sempre declare fontes do sistema como fallback.
Imagens muito grandes — emails acima de 1 MB carregam lentamente e podem ser bloqueados. Imagens individuais devem ter menos de 200 KB.

Configurações

As configurações definem o layout fundamental e os estilos do seu email. Esses valores se propagam para linhas e blocos de conteúdo, a menos que sejam explicitamente substituídos.

Global settings panel in the Drag and Drop Editor — Painel de configurações globais no Editor Arrastar e Soltar

Configuração de Design	Descrição
Largura da área de conteúdo	Largura do email em pixels. Recomendado: `600px`.
Alinhamento da área de conteúdo	Alinhar conteúdo à esquerda ou ao centro.
Cor de fundo	Cor atrás da área de conteúdo.
Cor de fundo da área de conteúdo	Cor dentro da área de conteúdo.
Fonte padrão	Aplicada a todo o texto, a menos que substituída. Fontes personalizadas requerem HTML.
Cor do link	Cor padrão para todos os links.
Idioma	Define o atributo HTML `lang` para acessibilidade. Padrão é inglês.

Padrão recomendado: Configure o máximo de estilos possível em Configurações para garantir consistência e reduzir substituições por bloco.

Linhas

As linhas definem o layout horizontal do seu email. Cada linha pode conter uma ou mais colunas, e cada coluna pode conter blocos de conteúdo. Arraste e solte linhas no editor para construir sua estrutura.

Adding rows to structure an email — Adicionando linhas para estruturar um email

Use linhas para controlar layout e espaçamento. Evite depender de blocos de conteúdo individuais para decisões de layout principais.

Linhas salvas

Linhas salvas permitem reutilizar cabeçalhos, rodapés ou seções repetidas entre emails e templates. Clique no ícone salvar em uma linha para salvá-la.

Saving a row for reuse — Salvando uma linha para reutilização

Acesse linhas salvas em Rows > Saved rows.

Selecting a saved row — Selecionando uma linha salva

Categorias de linhas salvas:

Empty – templates de linha em branco
My Saved Rows – linhas criadas por você ou sua equipe
Sample Rows – exemplos do OneSignal

Propriedades da linha

Clique na borda externa de uma linha para editar configurações no nível da linha.

Se você vir Conteúdo em vez de Linha ao passar o mouse, você selecionou um bloco de conteúdo. Clique na borda do contêiner externo até que o rótulo mostre Linha.

Propriedade da Linha	Descrição
Fundos	Cor ou imagem atrás da linha. Recomendado: defina a cor de fundo em Configurações para consistência.
Bordas	Cor, largura e estilo da borda.
Layout	Mostrar ou ocultar linhas em mobile ou desktop.
Colunas	Adicionar, remover ou redimensionar colunas e ajustar o padding das colunas.
Excluir/Duplicar	Selecione uma linha e use os ícones de excluir ou duplicar para removê-la ou copiá-la.

Evite imagens de fundo em linhas. O suporte entre clientes de email é inconsistente. Se a linha contém apenas uma imagem, use um Bloco de Imagem.

Conteúdo

Os blocos de conteúdo são os elementos que os destinatários veem — texto, imagens, botões, divisores e HTML. Arraste um bloco de conteúdo para uma coluna de linha. Ele se adapta automaticamente à largura da coluna.

Available content blocks — Blocos de conteúdo disponíveis

Regras de decisão para blocos de conteúdo:

Use blocos de Texto para a maior parte do conteúdo.
Use blocos de Imagem para visuais ou tipografia personalizada.
Use blocos HTML apenas quando precisar de estilo ou comportamento avançado.

Fontes personalizadas

O Editor Arrastar e Soltar suporta fontes do sistema por padrão. Para usar fontes personalizadas, você deve usar um bloco HTML.

HTML block

<!-- Place this into a HTML block at the top of your email -->
<style type="text/css">
  /* Declare Bebas Neue (only loads in clients that support web fonts) */
  @font-face {
    font-family: 'Bebas Neue';
    font-style: normal;
    font-weight: 400;
    src: url('https://fonts.gstatic.com/s/bebasneue/v9/JTUSjIg69CK48gW7PXoo9Wlhzg.ttf') format('truetype');
  }
</style>

<h1 style="font-family:'Bebas Neue', Arial, Helvetica, sans-serif;
           font-size:36px; line-height:1.2; margin:0; text-transform:uppercase;">
  Bem-vindo!
</h1>
<p style="font-family:Arial, Helvetica, sans-serif; font-size:16px; margin:12px 0 0;">
  Obrigado por se inscrever.
</p>

Muitos clientes de email (incluindo Gmail e Outlook para Windows) não carregam fontes web. Use fontes do sistema para o corpo do texto e reserve fontes personalizadas apenas para títulos. Sempre inclua fontes alternativas ou use imagens para tipografia garantida.

Imagens e vídeo

Faça upload de imagens diretamente no painel do OneSignal para que sua equipe possa reutilizá-las. O editor suporta corte, filtragem e outros efeitos. Você também pode referenciar imagens e vídeos hospedados externamente por URL — certifique-se de que cada URL seja acessível publicamente.

Tamanhos de imagem recomendados para email

Proporções de aspecto

Imagens de cabeçalho/banner: 3:1 ou 4:1 (ex.: 600×200 ou 600×150)
Imagens hero: 16:9 ou 2:1 (ex.: 600×338 ou 600×300)
Imagens quadradas: 1:1 (ex.: 300×300) — bom para grades de produtos
Miniaturas: 1:1 ou 4:3
Largura máxima: 600–700px é o padrão (maioria dos clientes de email)
Design em 2x para displays retina (ex.: 1200px de largura, exibido em 600px)

Tamanho do arquivo

Mantenha imagens individuais abaixo de 100–200 KB
Tamanho total do email (incluindo imagens) abaixo de 1 MB
Imagens menores significam tempos de carregamento mais rápidos e melhor entregabilidade

Formatos de arquivo

JPG — melhor para fotos
PNG — melhor para gráficos, logos e imagens com transparência
GIF — para animações simples (mantenha o tamanho do arquivo pequeno)
WebP — ainda não amplamente suportado em emails; evite

Dicas gerais

Sempre inclua texto alternativo para acessibilidade e para quando as imagens não carregam
Use CSS inline para estilos (muitos clientes removem tags <style>)
Evite imagens de fundo (suporte inconsistente entre clientes)
Teste em vários clientes — Gmail, Outlook e Apple Mail renderizam de forma diferente
O Outlook frequentemente ignora dimensões de imagem, então defina os atributos width e height no HTML

Links

O OneSignal habilita o rastreamento de links por padrão e suporta rastreamento de múltiplos links.

Links

Configure rastreamento de links, rastreamento de múltiplos links e análise de cliques para email.

Deep linking

Direcione destinatários para telas específicas no seu app a partir de links de email.

Links de cancelamento

Todos os emails de marketing devem conter um link de cancelamento. Emails sem um têm mais chance de serem sinalizados como spam pelos provedores de caixa de entrada. Quando um destinatário clica no link de cancelamento padrão do OneSignal, sua Assinatura de email é automaticamente definida como cancelada. Adicione a tag [unsubscribe_url] ao seu email usando qualquer um dos métodos:

Editor (Special links)
HTML block

Selecione o texto que deseja transformar no link de cancelamento.
Clique no ícone de link na barra de ferramentas.
Escolha Special links > Unsubscribe.

Adding the unsubscribe link using Special links in the editor — Adicionando o link de cancelamento usando Special links no editor

Cole o seguinte em um bloco HTML:

<a href="[unsubscribe_url]">Unsubscribe</a>

Links de cancelamento

Requisitos de conformidade e como o OneSignal trata cancelamentos.

Página de cancelamento personalizada

Substitua o fluxo de cancelamento padrão pela sua própria página com marca.

Blocos HTML

Use blocos HTML quando precisar de controle que os blocos de conteúdo arrastar e soltar não oferecem:

Substituições de modo escuro — adicione CSS prefers-color-scheme. Veja Estilo de modo escuro abaixo.
Fontes personalizadas — declare regras @font-face com pilhas de fallback.
Layouts avançados — grades de múltiplas colunas, conteúdo condicional ou markup específico do Outlook.

JavaScript não é suportado em email. Use CSS inline — muitos clientes removem tags <style>, classes e IDs.

Personalização

Use templates Liquid para inserir conteúdo específico do assinante, como nomes, tags ou valores de fallback. Exemplo: {{ first_name | default: "there" }}

Using Liquid templating to personalize messages — Usando templates Liquid para personalizar mensagens

Personalização de mensagem

Variáveis de personalização disponíveis e como usá-las.

Usando sintaxe Liquid

Condicionais, filtros, loops e padrões avançados de Liquid.

Modo escuro

A maioria dos emails é renderizada de forma aceitável no modo escuro sem alterações. Porém, emails com cores de marca, logos em fundos brancos ou seções coloridas frequentemente precisam de ajustes.

Preciso de estilo de modo escuro?

Adicione substituições de modo escuro se seu email incluir qualquer um dos seguintes:

Seções com cores de marca — cores saturadas ficam agressivas no modo escuro e prejudicam a legibilidade
Logos ou ícones em fundos brancos/claros — o fundo pode ser invertido enquanto a imagem permanece clara, tornando-a invisível
Texto em fundos coloridos — fundos invertidos podem colidir com cores de texto não invertidas
Botões de call-to-action — fundos de botões podem ser invertidos para cores inesperadas

Se seu email é predominantemente texto com estilo mínimo, a renderização padrão geralmente é aceitável.

Pré-visualizar modo escuro no editor

Use o botão Preview Mode para obter uma pré-visualização geral da renderização no modo escuro. Essa pré-visualização é uma aproximação — a renderização real varia por provedor de caixa de entrada (veja a tabela de comportamento de clientes abaixo).

Preview mode in the Drag and Drop Editor

Light and dark mode toggle in the Drag and Drop Editor

Como os clientes de email lidam com o modo escuro

Cada cliente de email aplica o modo escuro de forma diferente. Você não pode controlar esse comportamento diretamente, mas pode criar emails que renderizam bem em todos os modos.

Cliente	Comportamento	Respeita CSS `prefers-color-scheme`?
Apple Mail (iOS/macOS)	Inversão total de cores	Sim
Gmail (apps iOS/Android)	Inversão parcial — altera fundos claros, mas não todas as cores	Não
Gmail (Web)	Sem renderização em modo escuro	N/A
Outlook (Windows)	Inversão total usando mecanismo de renderização do Word	Não — ignora a maioria das substituições CSS
Outlook (Mac/iOS)	Inversão parcial	Sim
Yahoo Mail	Inversão parcial	Não
Samsung Mail	Inversão total	Não

Falhas comuns no modo escuro a observar:

Logos que desaparecem — um logo escuro em PNG transparente torna-se invisível em um fundo escuro. Adicione um contorno branco ou claro, ou use uma versão com fundo claro integrado.
Texto ilegível — texto escuro em fundo claro pode permanecer escuro após a inversão do fundo. Sempre combine substituições de cor de texto com substituições de fundo.
Cores de marca conflitantes — cores de marca saturadas que ficam ótimas no branco ficam agressivas em fundos escuros. Teste alternativas dessaturadas ou mais suaves.
Botões invisíveis — botões CTA com texto escuro em fundo da cor da marca podem perder contraste após inversão parcial.

Dicas de design:

Evite branco puro (#FFFFFF) e preto puro (#000000). Use tons próximos ao branco e cinzas escuros para reduzir o impacto dos clientes com inversão total.
Use PNGs transparentes com cuidado. Eles se misturam bem com qualquer fundo, mas logos escuros em fundos transparentes ficam invisíveis no modo escuro. Adicione um contorno claro ou use uma versão com fundo integrado para logos.
Em imagens que incluem texto, contorne texto escuro em branco para garantir legibilidade. Para texto branco em fundo escuro, contorne em preto.

Estilo de modo escuro com arrastar e soltar

Se apenas alguns elementos renderizam mal no modo escuro, você pode substituí-los por blocos HTML e sobrepor o estilo diretamente usando classes CSS e declarações !important.

Adicione um bloco HTML ao topo do seu email

Arraste um bloco HTML para a primeira linha do seu email.

Adding an HTML block to the top of your email

Adicione CSS para modo escuro

Cole o seguinte no bloco HTML. A media query prefers-color-scheme: dark aplica estilos apenas quando o cliente de email do destinatário está no modo escuro.

HTML block

<meta name="color-scheme" content="light dark" />
<meta name="supported-color-schemes" content="light dark" />
<style>
  :root {
    color-scheme: light dark;
  }

  @media (prefers-color-scheme: dark) {
    .email-body {
      background-color: #1a1a1a !important;
      color: #f0f0f0 !important;
    }

    .email-header {
      background-color: #2d2d2d !important;
    }

    .email-button {
      background-color: #0a84ff !important;
    }
  }
</style>

Substitua o conteúdo problemático por blocos HTML

Substitua qualquer bloco de conteúdo que não renderize corretamente no modo escuro por blocos HTML que usem as classes CSS definidas acima.

<div class="email-header" style="background-color: #f5f5f5; padding: 0; text-align: center;">
  <img src="https://dashboard.onesignal.com/assets/email/your-email-strategy-starts-here.jpg"
       alt="Your email strategy starts here"
       width="600"
       style="display: block; width: 100%; max-width: 600px; height: auto;" />
</div>

<div class="email-body" style="background-color: #ffffff; color: #333333; padding: 24px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.5;">
  <p style="margin: 0 0 16px;">Hi {{ first_name | default: 'there' }}!</p>
  <p style="margin: 0 0 16px;">Ready to craft a stunning email? Here's how to get started:</p>
  <ul style="margin: 0 0 16px; padding-left: 20px;">
    <li style="margin-bottom: 8px;"><strong>Drag &amp; drop simplicity:</strong> Add text, images, and buttons to your email.</li>
    <li style="margin-bottom: 8px;"><strong>Build smarter with Saved Rows:</strong> Create reusable headers and footers for consistent branding.</li>
    <li style="margin-bottom: 8px;"><strong>Test &amp; preview:</strong> Verify your email on every device before sending.</li>
  </ul>
</div>

<div class="email-body" style="background-color: #ffffff; padding: 0 24px 24px; text-align: center;">
  <a class="email-button" href="https://example.com"
     style="background-color: #0066cc; color: #ffffff; padding: 14px 32px;
            text-decoration: none; border-radius: 4px; display: inline-block;
            font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold;">
    Get Started
  </a>
</div>

Retorne ao modo de pré-visualização para verificar se os estilos de modo escuro estão sendo aplicados corretamente.

Salvar seu trabalho

Salve seu design de email como um template para uso futuro.

Save email as a template — Salvar email como template

FAQ

Como adicionar um link de cancelamento personalizado?

Substitua o [unsubscribe_url] padrão pela sua própria URL. Você é responsável por atualizar o status da Assinatura de email no OneSignal quando um destinatário cancela. Veja Criar uma página de cancelamento personalizada para detalhes de configuração.

Por que meu email parece diferente no Outlook?

O Outlook no Windows usa o mecanismo de renderização do Microsoft Word, que não suporta CSS moderno. Problemas comuns incluem max-width ignorado, imagens de fundo colapsadas e fontes web ausentes. Teste no Outlook especificamente e use CSS inline com atributos explícitos de width e height em imagens.

Qual é o tamanho máximo do email?

Mantenha o tamanho total do email (HTML + imagens) abaixo de 1 MB. Emails com mais de 102 KB de HTML são recortados pelo Gmail, que oculta o conteúdo abaixo de um link “Ver mensagem completa”. Otimize imagens e remova código não utilizado para ficar abaixo desse limite.

Posso reutilizar partes de um email em várias campanhas?

Sim. Salve qualquer linha como Linha Salva clicando no ícone de salvar na linha. Linhas salvas aparecem em Rows > My Saved Rows e podem ser arrastadas para qualquer email. Para reutilização de email completo, salve o design inteiro como um template.

Como pré-visualizar meu email antes de enviar?

Use o botão Preview na barra de ferramentas superior para ver como seu email renderiza em desktop e mobile. Para enviar um teste ao vivo, clique em Send Test Email e insira um endereço de destinatário. Emails de teste são entregues na caixa de entrada para que você possa verificar renderização, links e personalização em clientes de email reais.

Emojis funcionam em emails?

Sim, mas renderizam de forma diferente entre clientes de email. O Outlook no Windows é o mais inconsistente — emojis podem aparecer como contornos em preto e branco ou caixas. Se emojis fazem parte do assunto ou texto de CTA, teste em vários clientes antes de enviar.

Como importar um template HTML de email existente?

Você pode trazer templates HTML existentes para o OneSignal de três formas:

Encaminhe o email para o OneSignal usando Encaminhamento de Template de Email
Use a API Create Template para fazer upload de HTML programaticamente
Copie e cole seu HTML diretamente no Editor HTML

Páginas relacionadas

Visão geral de email

Guia completo para enviar email com o OneSignal.

Criar emails com HTML

Controle HTML completo, substituições de modo escuro e estilo avançado.

Templates de email

Salve e reutilize designs de email entre campanhas.

Links de cancelamento

Adicione links de cancelamento padrão ou personalizados para conformidade.

Personalização de mensagem

Personalize emails com tags, sintaxe Liquid e conteúdo dinâmico.

Teste AB

Teste linhas de assunto, conteúdo e horários de envio para otimizar o engajamento.

​Visão geral

​Fluxo de criação recomendado

​Configurações

​Linhas

​Linhas salvas

​Propriedades da linha

​Conteúdo

​Fontes personalizadas

​Imagens e vídeo

​Tamanhos de imagem recomendados para email

​Links

Links

Deep linking

​Links de cancelamento

Links de cancelamento

Página de cancelamento personalizada

​Blocos HTML

​Personalização

Personalização de mensagem

Usando sintaxe Liquid

​Modo escuro

​Preciso de estilo de modo escuro?

​Pré-visualizar modo escuro no editor

​Como os clientes de email lidam com o modo escuro

​Estilo de modo escuro com arrastar e soltar

​Salvar seu trabalho

​FAQ

​Como adicionar um link de cancelamento personalizado?

​Por que meu email parece diferente no Outlook?

​Qual é o tamanho máximo do email?

​Posso reutilizar partes de um email em várias campanhas?

​Como pré-visualizar meu email antes de enviar?

​Emojis funcionam em emails?

​Como importar um template HTML de email existente?

​Páginas relacionadas

Visão geral de email

Criar emails com HTML

Templates de email

Links de cancelamento

Personalização de mensagem

Teste AB

Visão geral

Fluxo de criação recomendado

Configurações

Linhas

Linhas salvas

Propriedades da linha

Conteúdo

Fontes personalizadas

Imagens e vídeo

Tamanhos de imagem recomendados para email

Links

Links de cancelamento

Blocos HTML

Personalização

Modo escuro

Preciso de estilo de modo escuro?

Pré-visualizar modo escuro no editor

Como os clientes de email lidam com o modo escuro

Estilo de modo escuro com arrastar e soltar

Salvar seu trabalho

FAQ

Como adicionar um link de cancelamento personalizado?

Por que meu email parece diferente no Outlook?

Qual é o tamanho máximo do email?

Posso reutilizar partes de um email em várias campanhas?

Como pré-visualizar meu email antes de enviar?

Emojis funcionam em emails?

Como importar um template HTML de email existente?

Páginas relacionadas