Pular para o conteúdo principal

​
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:
  1. Configure estilos globais em Configurações
  2. Adicione estrutura de layout usando Linhas
  3. Insira blocos de Conteúdo
  4. Adicione personalização e links
  5. Adicione um link de cancelamento (para emails de marketing)
  6. 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
Configuração de DesignDescrição
Largura da área de conteúdoLargura do email em pixels. Recomendado: 600px.
Alinhamento da área de conteúdoAlinhar conteúdo à esquerda ou ao centro.
Cor de fundoCor atrás da área de conteúdo.
Cor de fundo da área de conteúdoCor dentro da área de conteúdo.
Fonte padrãoAplicada a todo o texto, a menos que substituída. Fontes personalizadas requerem HTML.
Cor do linkCor padrão para todos os links.
IdiomaDefine 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
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
Acesse linhas salvas em Rows > Saved rows.
Selecting a saved row
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 LinhaDescrição
FundosCor ou imagem atrás da linha. Recomendado: defina a cor de fundo em Configurações para consistência.
BordasCor, largura e estilo da borda.
LayoutMostrar ou ocultar linhas em mobile ou desktop.
ColunasAdicionar, remover ou redimensionar colunas e ajustar o padding das colunas.
Excluir/DuplicarSelecione 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
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

  • 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)
  • 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
  • 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
  • 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
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.
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:

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

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.
ClienteComportamentoRespeita CSS prefers-color-scheme?
Apple Mail (iOS/macOS)Inversão total de coresSim
Gmail (apps iOS/Android)Inversão parcial — altera fundos claros, mas não todas as coresNão
Gmail (Web)Sem renderização em modo escuroN/A
Outlook (Windows)Inversão total usando mecanismo de renderização do WordNão — ignora a maioria das substituições CSS
Outlook (Mac/iOS)Inversão parcialSim
Yahoo MailInversão parcialNão
Samsung MailInversão totalNã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.
1

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
2

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>
3

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>
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

​
FAQ

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:
  1. Encaminhe o email para o OneSignal usando Encaminhamento de Template de Email
  2. Use a API Create Template para fazer upload de HTML programaticamente
  3. 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.