Como criar um e-mail HTML sem programar
Um e-mail HTML é a mensagem com cara de site: logo, cores, imagens e botão. Ele é o padrão em e-mail marketing, newsletter e comunicação de CRM, e dá para montar um sem escrever código.
E-mail HTML não é uma página da web
Os programas de e-mail entendem bem menos HTML e CSS do que um navegador. Por isso, quem monta e-mail segue regras próprias:
- Layout em tabelas. Recursos modernos como flexbox e grid não funcionam em todos os programas. Tabelas funcionam em todos.
- Estilos inline. O estilo vai em cada elemento (
style="..."), porque alguns programas descartam o CSS do cabeçalho. - Largura de cerca de 600 px. É o tamanho que cabe no painel de leitura e se adapta bem ao celular.
- Cuidado com o Outlook. O Outlook clássico para Windows usa o Word para mostrar e-mails, e botões precisam de uma versão em VML. Veja como funciona.
Passo a passo para criar o seu
- Escolha um modelo. No gerador de e-mail HTML há 8 estruturas: cartões, gradiente, minimalista, cupom, newsletter, vitrine, convite e carta pessoal.
- Preencha o topo. Logo, banner e o preview text, a linha que aparece ao lado do assunto na caixa de entrada.
- Escreva o texto. Negrito, listas, links e variáveis como
{{nome}}, que o seu ESP troca pelo nome de cada pessoa. - Configure o botão. Texto, link e cores. A versão para o Outlook é gerada sozinha.
- Ajuste as cores e o rodapé. Use uma combinação pronta ou as cores da sua marca, e inclua o texto legal e o link de descadastro.
- Revise. A ferramenta aponta o que falta antes do envio: link vazio, imagem sem texto alternativo, endereço inválido.
- Exporte. Copie o HTML para o seu ESP, cole o e-mail pronto no Gmail ou baixe o arquivo
.html.
Checklist antes de enviar
- Preview text preenchido, com 40 a 90 caracteres. Vazio, o Gmail mostra o começo do e-mail no lugar.
- Texto alternativo nas imagens. Muitos programas bloqueiam imagens por padrão, e o texto alternativo aparece no lugar.
- Link de descadastro. A LGPD e as regras do Gmail e do Yahoo para envios em massa pedem uma forma simples de sair da lista.
- Imagens com o dobro da largura exibida (por exemplo, 1200 px para um banner de 600 px), para ficarem nítidas em telas de alta resolução.
- E-mail leve. O Gmail corta mensagens com mais de 102 KB de HTML e mostra um link “Ver mensagem completa”.
- Teste no celular e clique em todos os links antes do disparo.
Como enviar
Por um ESP (Mailchimp, RD Station, Brevo e outros): cole o HTML no editor de código da campanha. O ESP cuida da lista, do descadastro e da reputação de envio.
Pelo Gmail, para poucos destinatários: use “Copiar p/ Gmail” e cole no corpo de uma mensagem nova. O e-mail vai formatado, com imagens e botão.