Você quer importar HTML de um URL (ou seja, pegar uma página do seu site e transformá-la em newsletter)? Esse é um fluxo muito comum: você já tem uma landing page, uma página de promoção, um artigo do blog ou uma página de produto, e quer enviar “a mesma coisa” por email para economizar tempo.
O problema é que um cliente de email não é um navegador. O que funciona no Chrome pode quebrar no Gmail, ficar diferente no Apple Mail e virar um caos no Outlook (principalmente no Windows). Se isso já aconteceu com você, este artigo é exatamente o mapa do caminho.
Com o Mailpro, você consegue importar o HTML diretamente a partir de um URL: Importar Newsletter HTML a partir de um URL. Mas para ter um resultado que realmente “rende bem” em todos os clientes, você precisa entender o que normalmente quebra e como corrigir sem refazer tudo do zero.
Se você quer um contexto rápido sobre por que a mesma newsletter parece diferente em cada caixa de entrada, este artigo ajuda: Por que sua newsletter parece diferente em cada caixa de entrada.
Por que “página do site → newsletter” quebra (quase sempre) em algum ponto
Páginas modernas usam tecnologias que simplesmente não foram feitas para email. Nos emails, muita coisa é bloqueada, limitada ou “limpa” pelo cliente para proteger o usuário.
- JavaScript (em email, quase sempre é desativado)
- CSS moderno (flexbox, grid, posicionamento avançado: especialmente problemático no Outlook)
- CSS externo (arquivos .css linkados podem ser ignorados ou removidos)
- Webfonts (nem todos os clientes suportam)
-
Paths relativos (ex.:
/img/banner.jpgpode não carregar corretamente em email) - Elementos interativos (carrosséis, menus, popups: raramente funcionam em email)
- Bloqueio de imagens (muitos provedores mostram imagens só após clique do usuário)
Se você quer revisar definições rapidamente: O que é HTML? e O que é Email Responsivo?.
Como importar HTML de um URL no Mailpro (passo a passo)
-
Escolha o URL certo
Prefira uma página pública, estável, que tenha o conteúdo principal já no HTML (não apenas gerado via JavaScript). -
Faça o import por URL
Use esta funcionalidade: Importar Newsletter HTML a partir de um URL. Cole o link da página e importe. -
Depois do import, confira imediatamente 3 pontos críticos
- Imagens: todas carregam? são URLs absolutas?
- Links: apontam para o domínio certo (não staging)? estão clicáveis?
- Layout: está “muito web” (grid/flex) ou já parece “email-safe” (blocos simples)?
-
Se estiver “web demais”, estabilize no construtor
Recrie os blocos críticos (hero + CTA + footer) com o editor de newsletter: Criação De Newsletter. -
Rode um teste anti-spam antes de enviar
Teste sua newsletter com nosso verificador anti-spam - Envie testes (Gmail + Outlook + pelo menos um celular) e só então dispare a campanha.
Se você já tem um template “email-friendly” (HTML próprio, pensado para email), pode preferir importar direto: Importar Newsletter HTML.
E se você quer ver o processo (URL, arquivo ou colar código) de forma visual: Como Importar ou Criar sua Mensagem em HTML.
Antes de importar: como deixar uma página “import-safe” (regras 80/20)
Se você controla a página (ou pode pedir ao designer para preparar), estas regras reduzem drasticamente retrabalho:
- Não dependa de JavaScript para o conteúdo principal (texto, preços, botões, CTA).
- Coloque CSS crítico inline (tipografia, cores, botões, espaçamento).
-
Use apenas URLs absolutas em links e imagens (sempre
https://...). - Simplifique o layout: 1 coluna ou blocos lineares (emails amam simplicidade).
- Otimize imagens (peso menor, dimensões corretas, ALT text sempre).
- Pense em largura “email-friendly” (conteúdo principal geralmente funciona bem em torno de ~600px).
Se você quer uma referência prática sobre estrutura e formatação: Criar uma newsletter, a importância da estrutura e formatação.
O que mais quebra depois do import de URL (e como corrigir de forma prática)
Abaixo, uma tabela “problema → causa → correção” para você usar como checklist interna.
| Problema depois do import | Causa típica | Correção que funciona em email |
|---|---|---|
| Imagens quebradas ou não aparecem | Paths relativos / recursos não públicos | Trocar tudo para URL absoluta HTTPS + ALT text |
| No Gmail está ok, no Outlook está ruim | Suporte limitado de CSS no Outlook | Layout mais simples (blocos/tabelas), evitar flex/grid na estrutura |
| Botões “estranhos” ou não clicáveis | CSS ignorado ou sobrescrito | Reconstruir CTA com estrutura simples e CSS inline (ou refazer o bloco no editor) |
| Espaçamentos inconsistentes | Margin/line-height interpretados de forma diferente | Preferir padding e separadores robustos; testar em mais de um cliente |
| No celular fica pequeno / largo / com scroll | Página web não “email responsive” | 1 coluna, fonte maior, CTAs grandes + revisar responsividade |
| Import “vazio” ou incompleto | Conteúdo renderizado via JavaScript | Usar uma versão estática em HTML (sem JS) para o import |
| Caracteres estranhos / símbolos | Formatação “suja” (copiado de editores) | Limpar formatação e garantir UTF-8 |
| Risco de spam alto | Links quebrados, palavras “gatilho”, email pesado, desequilíbrio imagem/texto | Rodar anti-spam + ajustar conteúdo + corrigir links |
| Falta link de descadastro / versão web | HTML importado não tem elementos típicos de email | Usar gerenciamento de cancelamento + variáveis de links automáticos |
1) CSS some, muda ou é “limpo”
Sintoma: tipografia, cores, colunas e alinhamentos ficam diferentes do site. Em email, isso é comum porque cada cliente aplica suas próprias regras e limitações.
Correções mais confiáveis:
- Colocar estilos essenciais como CSS inline nos elementos críticos (especialmente botões e textos).
- Evitar layouts complexos como base (prefira blocos lineares).
- Se o layout for importante, recriar seções críticas no editor: Criação De Newsletter.
2) Imagens não carregam (quase sempre por URL relativa)
No site, /images/banner.jpg funciona. No email, muitas vezes não. Regra de ouro: cada imagem deve estar como URL absoluta, por exemplo: https://seudominio.com/images/banner.jpg.
- Garanta que as imagens sejam públicas (sem login, sem bloqueio de IP).
- Sempre use ALT text (imagens podem vir bloqueadas por padrão).
- Otimize o peso (emails pesados pioram mobile e podem afetar entregabilidade).
Se você quer dicas práticas sobre imagem em email: Erros comuns de email marketing (inclui imagem vs texto).
3) Outlook: o “teste mais difícil” (e o mais importante)
O Outlook é famoso por renderizar HTML de email de forma diferente. Então sim: pode ficar bonito no Gmail e quebrar no Outlook.
FAQ direta sobre isso: Minha campanha de email parece estranha no Outlook.
Fixes que funcionam melhor na prática:
- Evitar flex/grid na estrutura principal.
- Usar blocos simples ou tabelas quando precisar de estabilidade.
- Reconstruir CTAs importantes no editor (muito mais compatível): Criação De Newsletter.
Reaproveitando conteúdo web? Os planos do Mailpro importam HTML de qualquer URL para o editor — transforme uma página em newsletter em minutos.
4) Responsivo no celular: legibilidade e cliques
Não basta “caber na tela”. Uma newsletter mobile-friendly precisa ser: fácil de ler, fácil de clicar e sem scroll horizontal.
Referências úteis: Definição: Email Responsivo e a funcionalidade: Newsletters e E-mails Responsivos para Mobile.
5) Links e CTAs: revise tudo (clicando de verdade)
Depois do import, é muito comum você encontrar:
- links apontando para staging / ambiente interno
- links relativos (funcionam no site, mas não são confiáveis no email)
- links âncora (tipo “pular para preços”) que nem sempre funcionam em todos os clientes
- URLs longas com parâmetros que quebram em linhas e viram erro
Duas definições úteis para pensar “clique e clareza”: O que é Hiperligação? e Propósito do Texto Âncora.
6) Risco de spam após importar HTML (teste antes de enviar)
HTML importado do site pode aumentar seu risco de spam, especialmente se:
- existirem links quebrados
- o email estiver pesado (muitas imagens grandes)
- houver palavras “gatilho” no assunto ou corpo
- o conteúdo tiver desequilíbrio entre imagem e texto
Antes do envio, rode: Teste sua newsletter com nosso verificador anti-spam. Se você quiser uma FAQ específica: Existe alguma forma de testar o meu nível de SPAM?.
E duas referências que ajudam muito no dia a dia: Lista de palavras proibidas e Porque os meus informativos enviados estão na pasta SPAM?.
7) Caracteres estranhos (acentos quebrados, símbolos)
Isso costuma acontecer quando conteúdo é copiado de editores que inserem caracteres invisíveis, ou quando há mistura de codificação. A solução geralmente é “limpar” e garantir que tudo esteja em UTF-8.
Se você também usa links automáticos e variáveis, esta FAQ mostra como inserir de forma correta: Como personalizar as ligações automáticas dentro das newsletters.
8) Descadastro e versão web: não deixe isso “de fora” por causa do import
Quando você importa uma página do site, ela não vem com os elementos típicos de email (descadastro, web version). Com Mailpro, isso é gerenciado automaticamente: Gerenciamento de Subscrições Canceladas.
E se você quiser controlar texto e posição do descadastro e da versão web, use as variáveis $UnsubscriptionLink$ e $WebVersion$ (explicado na FAQ): Como personalizar as ligações automáticas dentro das newsletters.
Duas estratégias “salva-vidas” quando o import por URL está difícil
Estratégia A: importar um HTML feito para email (não uma página web)
Se o seu time pode gerar um HTML “email-safe” (CSS inline, estrutura simples), normalmente é mais estável importar o template: Importar Newsletter HTML.
Estratégia B: usar o import só como fonte de conteúdo e reconstruir o layout no editor
Esse é o método “profissional” quando a página depende muito de grid/flex/JS: você importa para reaproveitar textos e imagens, e reconstrói as seções críticas no editor para compatibilidade máxima: Criação De Newsletter.
Bônus: personalização (transforma “copiar e colar” em campanha que converte)
Importar HTML economiza tempo, mas a performance costuma melhorar quando você personaliza: nome, cidade, preferências, conteúdo por segmento etc.
Veja a página de campanhas (inclui recursos úteis, como campos dinâmicos): Campanhas de E-mail com Mailpro.
Entregabilidade: um ajuste pequeno que ajuda muito (SPF)
Para aumentar as chances de cair na Caixa de Entrada (e não no spam), autenticação é essencial. Um primeiro passo prático: Registro SPF | Configurar SPF com Mailpro.
Se importar do URL for trabalhoso: comece com modelos prontos
Às vezes, o caminho mais rápido para um resultado perfeito é usar um modelo responsivo pronto e colar o conteúdo do site lá dentro. A biblioteca do Mailpro tem centenas de opções: Mais de 500 modelos de e-mail profissionais e responsivos.
FAQ rápida: importar HTML de um URL
Eu posso importar qualquer página do site e enviar “como está”?
Nem sempre. Páginas que dependem de JavaScript para renderizar conteúdo ou usam layout avançado (grid/flex) normalmente precisam de simplificação ou reconstrução parcial no editor. Se puder, crie uma versão HTML estática da página para o import.
Por que no Gmail fica bom e no Outlook fica estranho?
Porque o Outlook interpreta HTML e CSS de forma diferente e com limitações. Veja a FAQ: Minha campanha de email parece estranha no Outlook. O fix mais confiável é simplificar estrutura e testar especificamente no Outlook.
O que é melhor: importar por URL ou importar o HTML (arquivo/código)?
Import por URL é ótimo para o fluxo “designer publica → marketing importa”: Importar Newsletter HTML a partir de um URL.
Import do HTML costuma ser mais estável se você já tem um template otimizado para email: Importar Newsletter HTML.
Como eu vejo rápido se meu email tem risco de ir para spam?
Rode o teste: Verificador anti-spam. E, se quiser, confira a FAQ: Existe alguma forma de testar o meu nível de SPAM?.
Checklist final (copiar e colar antes de enviar)
- Imagens: URLs absolutas HTTPS + públicas + ALT text
- Links/CTAs: clicar em tudo; evitar links relativos; texto âncora claro
- CSS/Layout: estilos críticos inline; estrutura simples
- Outlook: teste dedicado; se quebrar, refaça blocos-chave no editor
- Mobile: 1 coluna; fonte legível; botões grandes
- Spam: rodar anti-spam; corrigir links; equilibrar imagem/texto
- Descadastro/WebVersion: garantir gerenciamento e/ou variáveis ($UnsubscriptionLink$, $WebVersion$)
Workflow recomendado: Importar por URL → ajustar imagens/links/CSS → estabilizar no Editor de Newsletter → checar com Anti-Spam → testes → envio.
O Mailpro e transformar páginas web em e-mails
Transforme qualquer página web em uma newsletter pronta para enviar
Refazer uma página como e-mail na mão é tedioso. O Mailpro importa o HTML direto de uma URL e coloca no editor, para você ir da página web à newsletter em minutos.
