Ao criar uma campanha de e-mail, você sempre deve pré-visualizar e testar o e-mail em diferentes provedores antes de enviá-los. Isso porque alguns dos provedores de e-mail não suportam qualquer conteúdo HTLM se o e-mail HTML não tiver sido desenvolvido como HTML web. Elementos interativos como Flash ou JavaScript não funcionarão na maioria dos provedores.

❗️ Importante

Recomendamos a utilização do Bloco HTML apenas para usuários avançados. Adicionar código HTML personalizado pode afetar a exibição de sua campanha de e-mail em alguns clientes de e-mail. O HTML personalizado deve ser o mais compatível com e-mail e responsivo possível. Para garantir que seu e-mail seja exibido conforme esperado nos clientes de e-mail, recomendamos testar sua campanha de e-mail antes de enviá-la para seus contatos.

Qual é a diferença entre o Editor de HTML e o Bloco HTML?

Você pode personalizar o design da sua campanha de e-mail com duas ferramentas HTML diferentes:

O Editor de HTML permite que você crie toda a sua campanha de e-mail em HTML. Para usar o Editor de HTML, crie uma campanha de e-mail e escolha o Editor de HTML na etapa Design. Para saber mais, consulte nosso artigo dedicado Fazer upload de um arquivo HTML para criar sua campanha.

O Bloco HTML pode ser usado no Editor arrastar e soltar para criar alguns elementos do seu e-mail com código HTML. Para usar o Bloco HTML, crie uma campanha de e-mail e, na etapa Design, escolha um modelo e arraste e solte o bloco HTML no design do e-mail:

Que formatos HTML posso usar em minha campanha de e-mail?

Consulte a tabela abaixo para saber que formatos HTML são seguros para usar ou não em sua campanha de e-mail:

✅ Seguro	🟠 Use com atenção	❌ Nunca use
Layouts estáticos, baseados em tabela Tabelas HTML e aninhadas Larguras do modelo de 600px-800px CSS simples, embutido Fontes web seguras Mapas de imagem	Imagens de fundo Fontes web personalizadas Layouts amplos CSS incorporado	JavaScript <iframe> Flash Áudio embutido Vídio embutido Para inserir com segurança um vídeo no design de sua campanha, consulte nosso artigo dedicado. Formulários Estratificação <div>

🌐 CSS

O CSS é limitado ao usar um e-mail HTML. Para obter o melhor resultado ao criar sua campanha de e-mail, recomendamos que você:

Use um CSS muito simples,
Use este site como um dicionário, para conferir se seu CSS será suportado pelos provedores de e-mail dos clientes.
Use CSS apenas para elementos gerais de estilo, como fontes e cores,
Use CSS embutido ao invés do incorporado. No CSS embutido, quaisquer configurações de cores de fundo ou <body> deve ser manuseado com uma <table> 100% ampliada ao redor do seu e-mail.

❗️ Importante
Alguns provedores de e-mail removem linhas de código que comecem com uma vírgula ou ponto. Adicione um espaço no começo de cada linha que comece com uma vírgula ou um ponto, para evitar isso.

🔤 Fontes web seguras

Use fontes que sejam fáceis de serem lidas e facilmente lidas por qualquer provedor de e-mail. Confira as fontes usadas antes de enviar sua campanha de e-mail. Para se certificar de que seus clientes serão capazes de ler sua campanha com a fonte escolhida, adicione uma fonte de reserva no Editor arrastar e soltar. Você será capaz de escolher que fontes usar se uma das que estiver usando não for suportada pelo provedor de e-mail do destinatário. Para saber mais, consulte nosso artigo dedicado Como adicionar fontes Google e reservas no Editor arrastar e soltar.

Recomendamos também que não use mais de duas ou três fontes em uma única campanha de e-mail. Para tornar seu e-mail fácil de ler, escolha um tamanho entre 14 e 16px para o corpo do texto: 14px para e-mails longos, com parágrafos e 16px para e-mails pequenos (duas ou três frases).

🏞 Mapas de imagem

Você pode adicionar mapas de imagem facilmente às suas campanhas, adicionando um link ao seu bloco de imagem no Editor arrastar e soltar:

Adicione um bloco de imagem ao design de sua campanha e clique na imagem.
Clique em Adicionar link. A janela Inserir/editar link vai se abrir.
Preencha as informações sobre:
- Tipo de link, que normalmente é um Link absoluto (URL), mas você pode escolher qualquer outro tipo de link,
- Alvo do link que é o link para onde você quer que a imagem leve,
- Título do link é a palavra que deseja exibir quando o mouse é passado em cima da imagem.
Clique em Inserir.

🚨 Escape automático

Por padrão, escapamos o conteúdo HTML (e JS) de todas as variáveis. Isso significa que qualquer HTML usado dentro de uma variável será escapado e impresso como texto. Por exemplo, se o conteúdo de sua variável for <h1>Meu título</h1>, então seu modelo resultaria exatamente neste texto dentro do seu e-mail: <h1>Meu título</h1> ao invés de resultar na frase “Meu título” formatada como um título H1.

Para saber mais, consulte nosso artigo dedicado Como desabilitar o escape automático e exibir chaves duplas em seus e-mails.

⏩ O que vem a seguir?

🤔 Dúvidas?

Em caso de dúvida, sinta-se à vontade para entrar em contato com nossa equipe de suporte, criando um tíquete a partir da sua conta. Caso ainda não tenha uma conta, entre em contato conosco aqui.