Pular para o conteúdo principal

​
Visão geral

O Editor de Email Drag and Drop do OneSignal permite que você crie visualmente emails exatamente como eles aparecerão nas caixas de entrada dos seus usuários. Ele consiste em três componentes principais:
  • Settings – configurações globais que se aplicam em toda a sua mensagem
  • Rows – contêineres estruturais para organizar conteúdo horizontalmente
  • Content – blocos individuais como imagens, texto e botões
Este guia mostrará cada componente e como usá-los para criar seu email. Para detalhes sobre recursos adicionais:

​
Importar seus próprios templates

Já tem templates de email? Você pode adicioná-los ao seu aplicativo OneSignal com as seguintes opções:
  1. Encaminhamento de template de email
  2. API Create Template
  3. Copiar e colar seu HTML no Editor HTML

​
Settings

As configurações controlam o estilo e layout fundamental da sua mensagem. Essas configurações se aplicam em cascata para linhas e blocos de conteúdo, a menos que sejam explicitamente substituídas.

Imagem mostra as configurações do builder

Configurações de DesignDescrição
Content area widthLargura do email em pixels. Padrão é 600px.
Content area alignmentAlinhar conteúdo à esquerda ou centralizado.
Background colorCor de fundo atrás da área de conteúdo.
Content area background colorCor de fundo dentro da área de conteúdo.
Default fontFonte aplicada em todo o email, a menos que personalizada no nível da linha ou conteúdo. Fontes personalizadas requerem HTML.
Link colorCor para todo o texto de hiperlink.
LanguageDefine o atributo lang em HTML para acessibilidade. Padrão é Inglês.

​
Rows

As linhas são os blocos de construção horizontais do seu layout de email. Cada linha pode conter múltiplas colunas e blocos de conteúdo. Simplesmente arraste e solte linhas no editor de email para adicioná-las.

Imagem mostra a capacidade de usar múltiplas linhas

Cada linha e suas colunas podem substituir configurações globais, dando a você controle granular sobre design e responsividade.

​
Excluir e duplicar linhas

Selecione a linha e use os ícones delete e duplicate.

Imagem mostra a capacidade de excluir e duplicar linhas

​
Linhas salvas

Clique no ícone salvar em qualquer linha para reutilizá-la em templates. Atualizações em uma linha salva podem opcionalmente se aplicar a todos os templates que a usam.

Como salvar uma linha

Para acessar linhas salvas, vá para a aba Rows e abra o dropdown de linhas salvas:

Selecionar linha salva

Categorias do dropdown:
  • Empty – templates de linha em branco
  • My Saved Rows – linhas que você salvou
  • Sample Rows – templates pré-construídos pelo OneSignal

​
Propriedades da linha

Clique em uma linha para editar propriedades. Certifique-se de ver a palavra “Row” ao passar o mouse sobre a linha. Caso contrário, você selecionará o bloco de Content.
Propriedades da LinhaDescrição
BackgroundsCor de fundo ou imagem atrás da área de conteúdo. Recomendado: Defina a cor de fundo em Settings para consistência. Se não houver conteúdo clicável, considere usar um Image Block em vez de uma imagem de fundo de linha.
BordersCor, largura e estilo da borda.
LayoutPersonalize ou oculte a linha em mobile vs desktop.
ColumnsAdicione, remova, ajuste colunas dentro da linha adicione mais blocos de Content. Ajuste o padding específico da coluna.

​
Content

Blocos de conteúdo representam o núcleo da sua mensagem — imagens, texto, botões e muito mais. Arraste um bloco de conteúdo para uma coluna de linha e ele se ajustará à largura. Cada bloco tem suas próprias configurações como padding, tamanho de fonte e alinhamento.

Selecionando os blocos de Content drag-and-drop para criar seu email

​
Fontes personalizadas

Se você precisar de uma fonte que não está nas Configurações, você pode adicionar fontes personalizadas usando o bloco HTML. Por exemplo: 
<!-- Paste 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;">
  Welcome!
</h1>
<p style="font-family:Arial, Helvetica, sans-serif; font-size:16px; margin:12px 0 0;">
  Thanks for subscribing.
</p>
Como usar no editor Drag & Drop:
  1. Adicione um bloco HTML no topo do seu email e cole o snippet.
  2. Se você quiser mais títulos com Bebas Neue, você pode:
    • Usar blocos HTML adicionais e copiar o mesmo estilo h1, ou
    • Usar um bloco Text e definir seu CSS Inline como font-family:'Bebas Neue', Arial, Helvetica, sans-serif;.
Muitos clientes de email (por exemplo, Gmail, Outlook para Windows) não carregam fontes web. Eles automaticamente retornarão para Arial/Helvetica da pilha acima.Para “forçar” uma fonte específica, considere usar imagens com a fonte desejada e adicione a imagem ao email. Isso permite mais controle em alguns casos.

​
Imagens e vídeo

Imagens carregadas são acessíveis em toda a sua equipe. Altere e aplique efeitos a imagens como corte, filtragem e muito mais diretamente no editor. URLs para imagens e vídeos podem ser usados. Certifique-se de que estão disponíveis através da URL fornecida. O rastreamento de links está habilitado por padrão. Rastreamento de múltiplos links está disponível. Veja Links e Deep Linking para mais detalhes. Todos os emails de marketing devem conter um link de cancelamento. Sem um link de cancelamento, seus emails terão uma chance maior de serem marcados como spam. Veja Links de cancelamento para mais detalhes. O OneSignal fornece um link de cancelamento padrão que, quando usado, cancelará a Assinatura de email do usuário. Você também pode incluir sua própria URL de cancelamento personalizada, se desejar. Apenas certifique-se de gerenciar corretamente a Assinatura de email (detalhes em Criar uma página de cancelamento personalizada). Adicione o [unsubscribe_url] padrão do OneSignal em seus emails via:
  • Bloco HTML: <a href="[unsubscribe_url]">Unsubscribe</a>
  • Selecione seu texto e use a opção Special links no editor ou defina [unsubscribe_url] no campo URL

Adicionando o link de cancelamento ao seu email

​
Blocos HTML

Adicione HTML personalizado com Blocos HTML. JavaScript não é suportado. CSS inline é recomendado. Alguns clientes de email removem atributos de classe ou ID.
Blocos HTML personalizados são o melhor lugar para adicionar estilização avançada, como substituições de modo escuro. Veja Melhores práticas de estilização de modo escuro para orientação.
<div style="background: red;">This now has custom styling!</div>

​
Personalização

Use templates liquid para personalizar mensagens. Exemplo: {{ first_name | default: "there" }}

Imagem mostra o uso de substituição de tag

Mais detalhes:

​
Emojis

Emojis podem renderizar de forma diferente em plataformas de email.

Imagem mostra como emojis renderizam em diferentes clientes de email

​
Salvar seu trabalho

Você pode salvar seu design de email como um template para uso futuro.

Imagem mostra como salvar como template

​
FAQ

​
Como considerar o modo escuro?

A maioria dos emails será exibida corretamente nos modos escuro e claro, mas recomendamos testar! Para orientação adicional, veja Melhores práticas de estilização de modo escuro. Veja Criar uma página de cancelamento personalizada para detalhes.

​
Artigos relacionados