Email Template Builder: Emails HTML

O que é o Email Template Builder?

O Email Template Builder é um editor visual baseado em blocos para criar templates de email HTML responsivos diretamente no navegador. Você adiciona blocos de conteúdo — cabeçalhos, parágrafos de texto, botões, imagens, divisores, layouts de duas colunas e rodapés — organiza-os com controles de subir/descer e edita cada um por meio de um painel de propriedades. Um preview ao vivo com iframe é atualizado durante a criação. Quando terminar, a ferramenta gera um email HTML completo baseado em tabelas com CSS inline, compatível com Gmail, Outlook e Apple Mail. Sem software de design, sem programação e sem conta necessária.

Funcionalidades principais

• Editor de email visual baseado em blocos — Construa seu email adicionando e reorganizando blocos de conteúdo. Sete tipos de bloco: cabeçalho, texto, botão, imagem, divisor, duas colunas e rodapé.
• Blocos de cabeçalho, texto, botão, imagem, divisor e rodapé — Cada bloco tem seu próprio painel de propriedades. Os blocos de cabeçalho têm seletores de cor de fundo e texto. Os blocos de texto permitem escolher o tamanho da fonte (12px–24px) e o alinhamento (esquerda, centro, direita). Os blocos de botão aceitam um rótulo, URL e par de cores. Os blocos de imagem recebem uma URL, texto alternativo e largura.
• Preview ao vivo com alternância mobile/desktop — O painel do editor inclui um preview em tempo real com iframe. Alterne entre desktop (largura completa) e mobile (375px) sem sair da aba do editor.
• Personalizar cores, fontes e espaçamento — As configurações globais do email controlam o fundo do corpo (#f4f4f4 padrão), o fundo do conteúdo (#ffffff), a cor primária, a largura máxima (480px, 600px ou 640px) e a família de fontes (Arial, Georgia, Helvetica ou Verdana).
• Exportar HTML limpo e responsivo — A aba HTML mostra o código-fonte completo gerado: um layout baseado em tabelas conforme os padrões com CSS inline, texto de pré-cabeçalho, fallbacks de botões MSO VML para Outlook e uma media query responsiva que colapsa para largura total em telas menores de 600px.
• Copiar HTML para a área de transferência — O botão "Copiar HTML" copia toda a string HTML gerada com um clique, com um estado de confirmação "Copiado!".
• Templates de início prontos — Três templates de início carregam instantaneamente: Boas-vindas, Newsletter e Promo. Cada um inclui blocos pré-configurados para seu propósito. Boas-vindas e Newsletter usam sua cor primária atual; Promo usa seu próprio destaque vermelho.
• 100% do lado do cliente — Nenhum conteúdo de email é transmitido a nenhum servidor. Funciona completamente offline após o carregamento da página.

Como usar o Email Template Builder

Passo 1: Configurar as definições globais

Abra o Em breve: Email Template Builder e localize o cartão "Configurações de email" no painel esquerdo. Preencha:

• Linha de assunto — Torna-se a tag <title> no HTML exportado (visível em alguns clientes de email e usada para acessibilidade).
• Texto de pré-cabeçalho — A linha de preview oculta que aparece após o assunto nos previews da caixa de entrada. O padrão é "Texto de preview que aparece na caixa de entrada...". Configure como um resumo convincente de uma linha.
• Fundo do corpo / Fundo do conteúdo — Os seletores de cor permitem digitar um valor hexadecimal ou usar o seletor de cor nativo. O corpo cinza claro padrão (#f4f4f4) sobre conteúdo branco (#ffffff) corresponde ao padrão visual usado pela maioria das grandes marcas.
• Cor primária — Usada automaticamente como fundo padrão para novos blocos de cabeçalho e botão.
• Largura máxima — Escolha 480px (compacto), 600px (padrão, padrão) ou 640px (mais largo).
• Família de fontes — Arial (padrão), Georgia, Helvetica ou Verdana.

Passo 2: Carregar um template ou adicionar blocos

Opção A: Carregar um template de início. Clique em "Boas-vindas", "Newsletter" ou "Promo" no cartão "Templates de início". O editor carrega um conjunto completo de blocos pré-configurados para esse caso de uso. O template Boas-vindas inclui um cabeçalho, um bloco de texto de saudação, um botão CTA "Começar", um divisor e um rodapé. O template Promo usa uma cor de cabeçalho e botão vermelha codificada (#e53e3e) e inclui um espaço reservado para imagem. Os inícios Boas-vindas e Newsletter usam sua configuração atual de cor primária; o template Promo usa seu próprio esquema de cores vermelho.

Opção B: Construir do zero. Clique em qualquer tipo de bloco no cartão "Adicionar bloco". Blocos disponíveis: Cabeçalho, Texto, Botão, Imagem, Divisor, Duas colunas, Rodapé. Cada novo bloco aparece no final da lista e abre automaticamente seu painel de edição.

Passo 3: Editar cada bloco

Clique em um bloco na lista "Blocos" para abrir seu editor. As alterações se refletem imediatamente no preview ao vivo.

• Bloco de cabeçalho: Campos de texto para título e subtítulo, mais seletores de cor de fundo e texto.
• Bloco de texto: Uma área de texto para conteúdo (quebras de linha criam tags <p> separadas), um menu suspenso de tamanho de fonte (12px a 24px) e alinhamento esquerda/centro/direita.
• Bloco de botão: Texto do rótulo, URL de destino, cor de fundo do botão e cor do texto do botão. O HTML gerado inclui marcação MSO VML para que o Outlook renderize um botão real em vez de um link simples.
• Bloco de imagem: URL da imagem (ou faça upload de um arquivo local), texto alternativo e largura (por exemplo, 100% ou 400px). As imagens enviadas são incorporadas como URIs de dados Base64.
• Bloco divisor: Seletor de cor e entrada de espessura (1–10px).
• Bloco de colunas: Duas áreas de texto separadas para o conteúdo da coluna esquerda e direita.
• Bloco de rodapé: Uma área de texto para o texto do rodapé (quebras de linha tornam-se parágrafos separados), um par de campos de rótulo de link e URL de link (para adicionar um link de cancelamento de assinatura, por exemplo), mais seletores de cor de fundo e texto.

Use os botões de seta para cima/baixo para reordenar blocos. Use o ícone de lixeira para excluir um bloco.

Passo 4: Preview e exportação

Mude para a aba Preview para uma visão de página inteira do email. Use o alternador Desktop/Mobile para verificar o layout responsivo a 375px.

Mude para a aba Código HTML para ver o código-fonte gerado. Clique na área de texto para selecionar todo o texto, ou clique em "Copiar HTML" para copiá-lo para a área de transferência. O código está pronto para colar em qualquer ESP (provedor de serviços de email) como Mailchimp, SendGrid ou HubSpot.

Exemplos práticos

Exemplo 1: Anúncio de lançamento de produto

Comece com o template de início "Promo". Substitua o texto do cabeçalho pelo nome do seu produto e slogan de lançamento. Atualize o fundo do cabeçalho #e53e3e para a cor da sua marca usando o seletor de cor. Troque a URL da imagem de espaço reservado pela captura de tela do seu produto. Edite o bloco de texto para descrever o principal benefício em uma ou duas frases. Atualize o rótulo do botão ("Pré-encomendar agora") e a URL. Configure o texto do pré-cabeçalho para "Apresentando [Produto] — disponível hoje." Exporte o HTML e cole no seu ESP.

Exemplo 2: Newsletter semanal

Carregue o template "Newsletter". Configure o assunto para "Digest semanal — Semana de 3 de março de 2026". Edite o bloco de texto do artigo em destaque com seu artigo principal. Adicione um segundo bloco "Duas colunas" abaixo para dois itens mais curtos lado a lado. Adicione um bloco "Botão" com "Ler o arquivo completo" vinculado ao seu site. Ajuste o texto do rodapé para incluir seu link de cancelamento de assinatura e o endereço postal físico conforme exigido pelo CAN-SPAM.

Exemplo 3: Sequência de email de boas-vindas

Use o template "Boas-vindas". Altere o subtítulo do cabeçalho para "Sua conta está pronta." Edite o texto do corpo em três parágrafos curtos: o que o usuário pode fazer, onde encontrar ajuda e como entrar em contato com o suporte. Substitua a URL do botão "Começar" pela URL real de integração. Mude para a aba Preview, alterne para a visualização mobile e confirme que todo o texto é legível a 375px. Exporte e faça upload para o fluxo de trabalho de automação do seu ESP.

Dicas e melhores práticas

Configure sua cor primária antes de carregar um template. Os templates de início aplicam sua cor primária atual aos novos blocos de cabeçalho e botão. Alterar a cor primária após carregar um template não atualiza retroativamente os blocos existentes — o seletor de cor de cada bloco é editável de forma independente.

Use o campo de pré-cabeçalho. Muitos construtores o ignoram, mas o texto do pré-cabeçalho influencia diretamente as taxas de abertura. O HTML gerado o oculta com display:none; ... max-height:0px; overflow:hidden — não aparecerá visualmente no email, mas será exibido nos previews da caixa de entrada.

Tamanhos de fonte menores de 14px são renderizados de forma ruim no mobile. O menu suspenso de tamanho de fonte do bloco de texto vai até 12px. Na prática, use 14px ou maior para o texto do corpo. Use 12px apenas para avisos legais ou letras miúdas do rodapé.

Teste a largura máxima de 600px. A largura máxima padrão de 600px funciona bem em todos os principais clientes. A opção de 480px é adequada para designs de layout estreito; 640px só é adequado para clientes que não aplicam suas próprias restrições de largura.

Os botões VML do Outlook não exigem etapas extras. O HTML gerado já inclui o bloco de comentário condicional MSO VML em torno de cada botão. Se estiver colando em um ESP, certifique-se de que o ESP não remova comentários HTML, pois a marcação VML depende deles.

Problemas comuns e solução de problemas

O preview ao vivo mostra uma área branca em branco. Isso acontece antes de qualquer bloco ser adicionado. Adicione pelo menos um bloco ou carregue um template de início — o iframe será preenchido imediatamente.

O bloco de imagem mostra uma imagem quebrada. A ferramenta exibe a URL da imagem diretamente em uma tag <img>. Verifique se a URL é acessível publicamente (não protegida por autenticação) e usa HTTPS. O texto alternativo que você inserir é incluído no HTML exportado para acessibilidade.

O HTML copiado mostra layout quebrado no Outlook. Confirme que a configuração de família de fontes usa uma pilha segura para a web (por exemplo, Arial, Helvetica, sans-serif). Fontes web (Google Fonts, fontes personalizadas) não são renderizadas no Outlook. As quatro opções de fonte na ferramenta são todas pilhas seguras para a web.

O bloco de duas colunas colapsa para uma única coluna no mobile. Este é o comportamento esperado dos comentários condicionais MSO e do layout de bloco inline. Em telas menores de 600px, a media query define .email-container para width: 100%, e as colunas de bloco inline com 48% de largura se agrupam naturalmente. Não há opção para forçar colunas lado a lado no mobile.

O template de início não usa a cor da minha marca. Verifique a configuração de cor primária no cartão de configurações de email antes de clicar em um botão de template de início. Os templates leem a cor primária no momento do carregamento — alterá-la depois requer atualizar manualmente o seletor de cor de cada bloco.

Privacidade e segurança

O Email Template Builder constrói e visualiza o HTML de email completamente no seu navegador. Nenhum conteúdo de template, linhas de assunto ou URLs de imagem são transmitidos a nenhum servidor. O preview ao vivo usa um iframe com sandbox="allow-same-origin" — nenhum script é executado dentro do preview. A ferramenta funciona completamente offline após o carregamento da página, tornando-a segura para conteúdo de marketing confidencial ou materiais de clientes.

Perguntas frequentes

O Email Template Builder é gratuito? Sim. O editor de blocos completo, todos os sete tipos de bloco, três templates de início, preview ao vivo e exportação de HTML são completamente gratuitos, sem necessidade de conta. Acesse a ferramenta em Em breve: /web/social/email-template-builder.

O Email Template Builder funciona offline? Sim, após o carregamento da página. Toda a geração de HTML acontece em JavaScript no seu dispositivo. O preview ao vivo carrega URLs de imagem de sua fonte (o que requer conexão), mas o editor, o gerenciamento de blocos e a exportação de HTML funcionam offline.

Meus dados estão seguros com o Email Template Builder? O conteúdo do seu email, linhas de assunto e escolhas de design nunca saem do seu navegador. A ferramenta gera HTML localmente e não faz nenhuma solicitação ao servidor com seus dados. É seguro criar emails confidenciais de clientes ou conteúdo de campanha proprietário.

Quais clientes de email o HTML gerado suporta? A ferramenta gera HTML baseado em tabelas com CSS inline, o método de layout com a mais ampla compatibilidade de clientes de email. Inclui condicionais MSO VML para renderização de botões do Outlook e uma media query responsiva para clientes mobile. Foi projetado para Gmail, Outlook (2016–2024), Apple Mail e Yahoo Mail.

Posso adicionar mais de sete tipos de bloco? O editor atual suporta sete tipos de bloco: cabeçalho, texto, botão, imagem, divisor, colunas e rodapé. Você pode adicionar o mesmo tipo de bloco várias vezes para criar layouts complexos — por exemplo, alternando blocos de texto e imagem, ou vários blocos de botão.

Como adiciono um link de cancelamento de assinatura? Adicione um bloco de rodapé. O editor de rodapé inclui um campo dedicado de rótulo de link e um campo de URL de link. Insira o texto do link (por exemplo, "Cancelar assinatura") e a URL de destino. O HTML gerado o renderiza como uma tag <a> clicável abaixo do texto do rodapé. Você também pode substituir a URL pela tag de mesclagem de cancelamento de assinatura do seu ESP após a exportação.

O que é o campo de texto de pré-cabeçalho? O texto de pré-cabeçalho é uma string curta (tipicamente 40–130 caracteres) que os clientes de email exibem após a linha de assunto na lista da caixa de entrada. Está oculto no email renderizado usando CSS. A ferramenta o inclui no HTML gerado dentro de um <div> com display:none e max-height:0px.

Posso salvar templates que criei? Sim. Os apoiadores do Glyph Widgets podem usar o PresetsPanel para salvar e recarregar o estado completo do editor — todos os blocos, configurações e conteúdo — como um predefinido nomeado armazenado no IndexedDB local do navegador.

Qual largura máxima devo usar? 600px é o padrão do setor e funciona corretamente em todos os principais clientes. Use 480px se quiser um layout mais estreito e focado. Use 640px somente se tiver confirmado que o ESP de destino e os clientes o tratam corretamente — algumas versões mais antigas do Outlook aplicam suas próprias restrições de largura.

A ferramenta suporta fontes personalizadas? Não. As quatro famílias de fontes no menu suspenso de fontes são todas pilhas seguras para a web: Arial, Georgia, Helvetica e Verdana. Fontes web não são suportadas porque a maioria dos clientes de email — especialmente o Outlook — não carrega arquivos de fontes externos.

Ferramentas relacionadas

• Em breve: Email Extractor — Extraia e valide endereços de email de qualquer texto, depois use-os com os templates que você criar aqui.
• Em breve: Social Meta Tags — Gere tags Open Graph e Twitter Card para otimizar como as páginas de destino da sua campanha aparecem quando compartilhadas nas redes sociais.
• Em breve: Hashtag Generator — Gere hashtags relevantes para as publicações nas redes sociais que direcionam tráfego para seus formulários de inscrição de email.

Experimente o Email Template Builder agora: Em breve: Glyph Widgets Email Template Builder