Templates de e-mail HTML grátis (com tabelas e prontos para modo escuro)
Templates de e-mail HTML grátis
Templates de e-mail HTML grátis: 8 com tabelas e modo escuro, para copiar e colar | We.Inc
Oito templates de e-mail HTML grátis que você pode editar e visualizar na página: boas-vindas, recibo, redefinição de senha, newsletter, verificação de e-mail, pedido enviado, convite para evento e pedido de feedback. Layout com tabelas, botões à prova de falhas, suporte a modo escuro e um checklist de testes.
Um e-mail HTML confiável usa tabelas aninhadas para o layout, estilos inline, uma largura de conteúdo de cerca de 600 pixels, botões feitos de links com padding em vez de imagens, e texto alternativo em todas as imagens. Os oito templates abaixo seguem essas regras, suportam modo escuro onde os clientes de e-mail permitem e podem ser editados e visualizados ao vivo antes de você copiá-los.
Os oito templates
Template
Enviado quando
Boas-vindas
Alguém se cadastra
Recibo
Um pagamento é aprovado
Redefinição de senha
Alguém pede para redefinir
Newsletter
Notícias periódicas
Verificação de e-mail
Depois do cadastro
Pedido enviado
Um pedido sai para entrega
Convite para evento
Ao convidar clientes
Pedido de feedback
Depois de uma visita ou pedido
Edite o código à esquerda de qualquer template e a prévia à direita é atualizada. As prévias são renderizadas pelo seu navegador, então use-as como referência: os clientes de e-mail variam, e é por isso que o checklist de testes no final importa.
Escolha o template que corresponde ao e-mail de que você precisa.
Mude o texto, os links e as cores na caixa de código e acompanhe a prévia.
Copie o HTML para a opção de HTML personalizado da sua plataforma de e-mail.
Envie testes para caixas de entrada reais no celular e no computador, em modo claro e escuro.
Mantenha uma ação principal por e-mail; um segundo botão divide a atenção pela metade.
Escreva o preheader de propósito; senão os clientes de e-mail mostram o primeiro texto que encontrarem.
Hospede as imagens no seu próprio domínio ou na sua plataforma de e-mail, com URLs https absolutas.
Use o nosso criador de templates de e-mail HTML se preferir preencher um formulário.
Perguntas frequentes
Por que e-mails HTML ainda usam tabelas?
Alguns clientes de e-mail, principalmente os de desktop mais antigos, renderizam com motores que ignoram o layout CSS moderno. Tabelas são o único método de layout que funciona em todos eles.
Como fazer um e-mail funcionar no modo escuro?
Adicione as meta tags color-scheme e uma media query prefers-color-scheme com as suas cores escuras. Os clientes que suportam usam essas cores; outros podem inverter as cores por conta própria, então evite texto embutido em imagens e teste os dois modos.
Posso usar esses templates comercialmente?
Sim. Nós os escrevemos para esta página; copie, altere e envie em qualquer projeto.
O que é um botão à prova de falhas (bulletproof button)?
Um botão feito de um link com padding dentro de uma célula de tabela colorida, em vez de uma imagem. Ele continua aparecendo e funcionando quando as imagens estão bloqueadas.
O texto puro também importa
Envie uma versão em texto puro junto com o HTML. A maioria das plataformas de e-mail gera uma; leia-a uma vez, porque um recibo ou um link de redefinição precisa continuar fazendo sentido sem formatação.
Oito templates, ao vivo
E-mail de boas-vindas
Agradece a pessoa, diz o que acontece em seguida e oferece uma ação clara.
Recibo
Uma tabela aninhada mantém os nomes dos itens e os preços alinhados em todos os clientes, inclusive os de desktop antigos.
Redefinição de senha
Curto, com o prazo de validade e o que fazer se a pessoa não tiver pedido. Inclua o link também como texto, para clientes que bloqueiam botões.
Newsletter
Uma notícia por bloco, com título, uma frase e um link. A URL da imagem aqui é um placeholder, então a prévia mostra o que os leitores veem com imagens bloqueadas: o texto alternativo em uma caixa do tamanho certo.
Verificação de endereço de e-mail
Usado depois do cadastro. Um código além do botão ajuda quem abre o e-mail em outro dispositivo.
Pedido enviado
Coloca o link de rastreio primeiro; foi para isso que o leitor abriu o e-mail.
Convite para evento
Data, hora e local em um bloco fácil de ler de relance, e depois a única ação.
Pedido de feedback
Uma pergunta com respostas de um toque recebe muito mais respostas do que um link para uma pesquisa longa.
Por que o código é assim
Regras que fazem o e-mail HTML renderizar em todo lugar
Regra
Por quê
Faça o layout com tabelas (role="presentation")
Alguns clientes de desktop ainda ignoram flexbox, grid e muitas regras de posicionamento
Coloque inline os estilos importantes
Alguns clientes e webmails removem ou ignoram blocos style
Mantenha a largura do conteúdo em cerca de 600px
Cabe no painel de leitura da maioria dos clientes
Faça os botões com um link com padding dentro de uma célula colorida
Sobrevive a clientes que bloqueiam imagens e ignoram parte do CSS
Defina width, height e alt em todas as imagens
As imagens costumam ficar bloqueadas até o leitor permitir
Adicione um preheader oculto
Controla o texto de prévia exibido depois do assunto
Use a meta color-scheme e prefers-color-scheme
Clientes que suportam modo escuro usam as suas cores escuras em vez de inverter
Inclua um link de descadastro em e-mails de marketing
Exigido pelas leis antispam e pelos grandes provedores de e-mail
Antes de enviar
Checklist de testes
Teste
Como
Clientes reais
Envie para contas nos grandes serviços de webmail, um cliente de desktop e um celular
Imagens desligadas
Desative o carregamento de imagens e confira se o e-mail ainda faz sentido
Modo escuro
Mude o celular e o cliente de desktop para o modo escuro
Links
Clique em todos os links, incluindo o de descadastro
Parte em texto puro
Envie também uma versão em texto; alguns leitores e filtros usam essa versão
Verificação de spam
Autentique o seu domínio (SPF, DKIM, DMARC) antes de enviar em volume