Anúncios incomodam? Ir Sem anúncios Hoje 

Gerador de Modelo de E-mail em HTML

DesenvolvedorTexto

[iotools_html_email_template_generator]

Guia

Gerador de Modelo de E-mail em HTML

Crie HTML de e-mail responsivo com CSS embutido ao compor blocos modulares – cabeçalho, hero, imagem, texto do corpo, botão, separador e rodapé – com uma prévia em tempo real em desktop e celular. A saída utiliza layout baseado em tabelas e condições MSO, para renderização consistente em Outlook, Gmail, Apple Mail e outros clientes de e-mail.

Como usar

Defina a linha do assunto, o preheader, a família de fontes e a marca, os cores de fundo e de texto no topo do formulário.
Ative os blocos que deseja incluir e preencha o conteúdo por bloco – logotipo e frase de tagline, título e subtítulo do hero, URL da imagem, parágrafos do corpo, botão de chamada para ação, separador e rodapé.
Observe a atualização da prévia em tempo real à direita. Alterne entre as larguras de desktop e celular para verificar ambas as layouts.
Clique Copiar HTML para obter o HTML com CSS embutido, ou Baixar .html para salvá-lo como um arquivo pronto para colar em seu ESP, remetente de transações ou ferramenta de campanha.

Características

Blocos modulares – Ative ou desative independentemente o cabeçalho, hero, imagem, texto do corpo, botão, separador e rodapé.
Saída com CSS embutido – Cada estilo está embutido e baseado em tabelas, então não há folhas de estilo externas e não há renderização quebrada em Outlook ou Gmail.
Condições MSO – Marcas específicas para Microsoft Outlook (motor Word) são incluídas para manter as larguras e espaçamentos corretos no Outlook do Windows.
Pré-visualização em tempo real – Prévia em desktop (600px) e celular (360px) renderizada em um iframe isolado.
Personalização da marca – Seletores de cores para acenho da marca, fundo e texto, além de quatro predefinições de fonte.
Exportação em um clique – Copie o HTML para a área de transferência ou baixe um arquivo pronto para enviar .html arquivo.
Executa no seu navegador – Nada é enviado ou armazenado. A geração ocorre totalmente no lado do cliente.

 Perguntas frequentes

Por que os e-mails HTML usam tabelas em vez de layouts modernos como flexbox ou grid?

Muitos clientes de e-mail – especialmente o Outlook no Windows – renderizam mensagens com o motor Word, que tem suporte muito limitado ao CSS e ignora flexbox, grid e a maioria das regras de posicionamento. As tabelas aninhadas continuam sendo o único sistema de layout que se renderiza de forma previsível em todos os clientes, incluindo Gmail, Outlook, Apple Mail, Yahoo e e-mail móvel. É por isso que os e-mails HTML de produção ainda parecem com markup da web de 2003: é o menor denominador comum que sobrevive a todos os motores de renderização.
O que são condições MSO e por que os e-mails precisam delas?

As condições MSO são comentários HTML que apenas o Outlook (motor Word) interpreta. Elas parecem assim  e permitem enviar markup ou estilos específicos para o Outlook sem afetar outros clientes. São comumente usadas para definir uma largura fixa com uma tabela fantasma, corrigir o VML para botões e fundos e desativar recursos que o Outlook renderiza incorretamente. Sem elas, os layouts muitas vezes se colapsam ou se esticam de forma estranha no Outlook, mesmo quando parecem perfeitos em todos os outros lugares.
Por que o CSS dos e-mails deve estar embutido em vez de declarado em uma tag de estilo?

Vários grandes clientes de e-mail – historicamente o Gmail – removem <style> ou aplicam de forma inconsistente, especialmente em dispositivos móveis e em mensagens encaminhadas. O embutido move cada regra diretamente ao elemento que a recebe via o style atributo, que todos os clientes respeitam. A desvantagem é a verbosidade e a manutenção mais difícil, o que é a razão pela qual ferramentas – incluindo esta geradora – existem para embutir estilos automaticamente a partir de um modelo mais alto.
O que é um preheader e como ele afeta as taxas de abertura de e-mails?

O preheader é um trecho curto de texto exibido após a linha do assunto nas maioria das previsões de caixa de entrada. Por padrão, ele é extraído do primeiro texto visível no corpo do e-mail, o que muitas vezes é uma saudação ou trecho padrão que desperdiça o espaço. Incluir um elemento oculto de preheader no início do HTML permite que você controle exatamente o que aparece lá. Um preheader bem escrito complementa a linha do assunto e está correlacionado com taxas de abertura mais altas em testes A/B realizados por grandes ESPs.