Gerador de Modelo de E-mail em HTML
Gere um modelo HTML de e-mail responsivo e compatível com clientes de e-mail (layout baseado em tabelas com estilos inline) a partir de um cabeçalho, texto do corpo, botão de chamada para ação, rodapé e cores da marca. Copie o HTML pronto para envio ou visualize-o ao vivo.
Entrada
Usado na tag <title> do e-mail.
Trecho de pré-visualização oculto que a maioria das caixas de entrada mostra ao lado do assunto.
Cada linha em branco inicia um novo parágrafo; quebras de linha simples viram <br>.
Usada no texto do cabeçalho e no botão.
Saída
A pré-visualização do seu e-mail aparecerá aqui.
Layout baseado em tabelas com estilos inline — cole no seu provedor de serviço de e-mail.
Mais formas de usar esta ferramenta
API REST
curl -X POST https://api.iotools.cloud/v1/tool/html-email-template-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"subject": "Welcome to Acme",
"preheader": "Everything you need to get started.",
"headerText": "Acme",
"bodyContent": "Hi there,\n\nThanks for signing up. Your account i…",
"buttonText": "Get Started",
"buttonUrl": "https://example.com/start",
"footerText": "You received this email because you signed up at…",
"brandColor": "#464aff",
"bgColor": "#f4f4f7"
}'Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.
Peça a um agente de IA
Use the IOTools `html-email-template-generator` tool (HTML Email Template Generator) on this input:
YOUR_INPUT_HERECole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.
Widget para incorporar
<iframe
src="https://iotools.cloud/embed/html-email-template-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Gerador de Modelo de E-mail em HTML — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Coloque isso na sua própria página — grátis, sem chave, só um link de volta.
| Custo por chamada de API/MCP | A partir de 5 créditos |
|---|---|
| Precisa de mais créditos? | Ver preços |
Também disponível via
Guias
Crie um e-mail HTML responsivo e pronto para envio em segundos. Preencha um cabeçalho, alguns parágrafos de texto, um botão de chamada para ação, um rodapé e as cores da sua marca, e a ferramenta gera HTML limpo, com layout baseado em tabelas e estilos inline, que é exibido com confiabilidade no Gmail, Outlook, Apple Mail, Yahoo e nos demais clientes — depois copie ou baixe como um arquivo .html.
Por que o HTML de e-mail é diferente do HTML da web
O HTML que você escreve para um site não funciona em uma caixa de entrada. Os clientes de e-mail estão anos atrás dos navegadores e são extremamente inconsistentes: o Outlook no Windows renderiza mensagens com o mecanismo de layout do Microsoft Word, o Gmail remove blocos <style> e folhas de estilo externas, e quase nenhum deles oferece suporte a flexbox, grid ou posicionamento CSS moderno. Um código que fica perfeito no Chrome pode se desmontar por completo em uma caixa de entrada.
Desenvolvedores de e-mail contornam isso com uma abordagem deliberadamente antiquada, que este gerador segue:
- Layout baseado em tabelas. A estrutura é montada com elementos
<table>aninhados, e não com<div>+ flexbox, porque tabelas são o único recurso de layout que todos os clientes entendem. - Somente estilos inline. Todo estilo fica em um atributo
style=""diretamente no elemento. Não há um bloco<style>que possa ser removido. - Atributos
width. O contêiner principal usawidth="600"— uma largura de conteúdo segura e muito usada — como atributo HTML, porque o Outlook respeita o atributo mesmo quando ignora o CSS. - Uma estrutura de documento adequada. Inclui o invólucro
<!DOCTYPE html>, um<title>e um<div>de pré-cabeçalho oculto (a linha curta de pré-visualização que a maioria das caixas de entrada exibe ao lado do assunto).
Como usar
- Digite uma linha de assunto (usada no
<title>) e um pré-cabeçalho. - Digite o texto do cabeçalho/logotipo e o conteúdo do corpo. Deixe uma linha em branco entre os parágrafos — cada um vira seu próprio
<p>; quebras de linha simples viram<br>. - Adicione um texto e uma URL para o botão da sua chamada para ação (deixe o texto em branco para omitir o botão).
- Escolha uma cor da marca (texto do cabeçalho e botão) e uma cor de fundo.
- Acompanhe a pré-visualização ao vivo sendo atualizada e depois copie o HTML ou baixe
email-template.html.
Tudo é executado no seu navegador — nada do que você digita é enviado a um servidor.
Posso colar isto no Mailchimp ou em outro ESP?
Sim. A saída é HTML padrão e autocontido. A maioria dos provedores de serviço de e-mail tem a opção "colar seu próprio código" ou "importar HTML" — basta colar o marcado gerado ali.
Minhas entradas são seguras?
Todo texto que você digita recebe escape de HTML antes de ser colocado no modelo, de modo que caracteres como <, >, & e aspas aparecem como texto literal em vez de quebrar o marcado.
Funciona no Outlook?
Sim. O layout em tabelas, os estilos inline e os atributos width são exatamente as técnicas usadas para manter as mensagens intactas no renderizador do Outlook, que é baseado no Word.