Ao criar uma campanha de e-mail, você deve sempre visualizar e testar o e-mail em diferentes clientes de e-mail antes de enviá-lo. De fato, alguns clientes de e-mail não suportam todo o conteúdo HTML, pois o e-mail HTML não é tão desenvolvido quanto o HTML da Web. Elementos interativos, como Flash ou JavaScript, não funcionarão na maioria dos clientes de e-mail.
Recomendamos o uso do bloco HTML apenas para usuários avançados. A adição do 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 e responsivo possível com o e-mail. Para garantir que seu e-mail seja exibido conforme esperado no cliente de e-mail, recomendamos que você teste 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 de 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 usando 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 Como carregar um arquivo HTML para criar sua campanha.
O bloco HTML pode ser usado no editor de arrastar e soltar para projetar 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 em seu design de e-mail:
Quais formatos HTML posso usar em minha campanha de e-mail?
Consulte a tabela abaixo para saber quais formatos HTML são seguros para uso ou não em sua campanha de e-mail:
✅ Seguro de usar | 🟠 Use com cuidado | ❌ Nunca use |
|
|
|
CSS é limitado quando usado no HTML de e-mail. Para obter os melhores resultados ao projetar sua campanha de e-mail, recomendamos que você:
- Use um CSS muito simples
Use este site como um dicionário para verificar se o seu CSS será aceito no cliente de e-mail. - Use CSS somente para elementos de estilo geral, como fonte e cores,
- Use CSS em linha em vez de CSS incorporado. No CSS em linha, as cores de fundo ou configurações de <body> devem ser tratadas com uma <table> de 100% de largura ao redor do seu e-mail.
❗️ ImportanteAlguns clientes de e-mail removem linhas de código que começam com uma vírgula ou ponto. Adicione um espaço no início de cada linha que começa com uma vírgula ou ponto para evitar isso.
Use fontes que sejam fáceis de ler e facilmente legíveis por qualquer cliente de e-mail. Verifique as fontes que está usando antes de enviar sua campanha de e-mail. Para garantir que os clientes consigam ler sua campanha de e-mail com a fonte que você escolheu, adicione uma fonte alternativa no editor de arrastar e soltar. Você poderá escolher quais fontes usar se a fonte escolhida não for compatível com o cliente de e-mail do destinatário. Para saber mais, consulte nosso artigo dedicado Adicionar fontes do Google e alternativas no editor de arrastar e soltar.
Também recomendamos que você use no máximo duas ou três fontes em uma campanha de e-mail. Para facilitar a leitura do e-mail, 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 curtos (duas ou três frases).
Você pode adicionar facilmente mapas de imagens às suas campanhas adicionando um link ao bloco de imagens no editor de arrastar e soltar:
- Adicione um bloco de imagem ao design de sua campanha e clique na imagem.
- Clique em Add link (Adicionar link). A janela Insert/edit link (Inserir/editar link) é aberta.
-
Preencha as informações sobre:
- Tipo de link, que geralmente é um link absoluto (URL), mas você pode escolher qualquer outro tipo de link,
- Destino do link, que é o link para o qual você quer que a imagem seja direcionada,
- Título do link é a palavra que você quer exibir ao passar o mouse sobre a imagem.
- Clique em Insert (Inserir).
Por padrão, delimitamos o conteúdo HTML (e JS) de todas as variáveis. Isso significa que qualquer HTML passado em uma variável será automaticamente delimitado e impresso como texto. Por exemplo, se o conteúdo da variável for <h1>Meu título</h1>
, o modelo exibirá exatamente este texto no e-mail: <h1>Meu título</h1>
em vez de exibir a frase "Meu título" formatada como um título H1.
Para saber como desativar o escape automático, consulte nosso artigo dedicado Desativar o escape automático e exibir chaves duplas em seus e-mails.
⏩ O que vem a seguir?
- Série de artigos para o editor de arrastar e soltar
- Como carregar um arquivo HTML para criar sua campanha
- Como criar uma campanha de e-mail
- Adicione fontes Google e de substituição 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.
Se você está procurando ajuda com um projeto usando o Brevo, podemos encontrar o parceiro especialista certificado em Brevo.