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.
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 |
|
|
|
🌐 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.
❗️ ImportanteAlguns 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?
- Séries de artigos para o Editor arrastar e soltar
- Como fazer o upload de um arquivo HTML ao design de sua campanha
- Como criar uma campanha de e-mail
- Como adicionar fontes Google e reservas no Editor arrastar e soltar
- Como testar sua campanha de e-mail
🤔 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.