E-mail só com imagem: como refazer em HTML com texto e botão editáveis

Seu e-mail parece organizado na prévia, mas o texto fica pequeno no celular e qualquer mudança exige editar a arte inteira. Quando a imagem não carrega, parte importante da mensagem também pode desaparecer. Uma solução é reconstruir o conteúdo com título, parágrafos e botão editáveis, mantendo a fotografia como apoio.

Um e-mail composto por uma imagem já pode ser um documento HTML, inclusive com um link no banner inteiro. A mudança aqui é na estrutura: as palavras deixam de existir apenas como pixels. Este é um processo manual de redesign, usando o conteúdo real da campanha; não uma conversão automática ou recuperação de camadas perdidas.

O que muda na mesma campanha

Uma fotografia, ilustração ou logotipo pode continuar sendo imagem. O ponto é não deixar a oferta, suas condições e a ação dependerem exclusivamente dela. Separar esses elementos melhora a base de edição e leitura, mas não torna qualquer HTML automaticamente acessível nem garante aparência igual em todos os clientes.

1. Separe o conteúdo da arte original

Abra seu próprio banner e anote o que a pessoa precisa entender para decidir. Confirme o texto com quem responde pela campanha. Copie a oferta correta, a URL de destino e todas as condições relevantes; não invente um desconto ou prazo para preencher o novo layout.

Prefira a fotografia original, sem títulos ou botões desenhados por cima. Se você só tem sua arte achatada, prepare o recorte ou recrie a imagem em uma ferramenta externa; também pode omitir uma foto opcional. O bloco de imagem do Mailvex não extrai automaticamente a fotografia nem transforma as letras do banner em texto.

2. Use um exemplo simples como referência

Imagine uma campanha fictícia de uma loja de artigos para escritório anunciando uma nova coleção para a mesa. A mesma informação pode ser distribuída assim. Substitua os produtos e o destino pelos dados reais da sua campanha antes de enviar.

O assunto será configurado no sistema de envio. No design, a foto apresenta os objetos, o parágrafo explica a novidade e o botão identifica o destino. Não é necessário manter uma cópia do banner completo abaixo dos blocos: isso duplicaria a mensagem e preservaria letras pequenas que você acabou de separar.

3. Crie um projeto com blocos nativos no Mailvex

Com e-mail da conta confirmado e cota de exportação disponível, escolha um modelo de uma coluna no catálogo. Use Usar modelo ou Usar este modelo nos detalhes para criar sua própria cópia. Salve com um nome reconhecível e mantenha a arte original como referência, sem alterar o item público do catálogo.

Na nova versão, remova o bloco que contém o banner inteiro. Pela aba Blocos, acrescente Título + texto, Texto, Imagem e Botão centralizado conforme a estrutura escolhida. Esses elementos podem ser editados separadamente; enviar novamente o banner para Imagem não produziria essa separação.

• Selecione Título + texto e preencha Título e Texto. Se preferir um parágrafo independente, deixe Texto vazio nesse bloco e use o bloco Texto abaixo.
• Coloque a explicação e as condições relevantes no corpo. Use uma ordem de leitura simples, sem depender de coordenadas da arte antiga.
• Em Botão centralizado, preencha Texto do botão com uma ação específica e URL do botão com o destino real aprovado.
• Preserve o logotipo que identifica a marca e os elementos necessários do rodapé. Não substitua o botão nativo por uma imagem de botão.

4. Acrescente uma foto e um alt coerente

No bloco Imagem, use Abrir biblioteca de mídia. Escolha um arquivo existente ou use Enviar para adicionar sua foto. Confira se o recorte é adequado antes do upload. Uma imagem muito alta pode empurrar a ação para longe do texto; ajuste o arquivo de origem em vez de esconder informações importantes.

Preencha Descrição da imagem (alt) com texto simples que explique a informação relevante daquela foto. Não cole HTML nem transcreva a campanha inteira nesse campo. Para o logotipo, informe o nome real da marca quando essa for sua função; o editor não precisa adivinhar esse nome.

Uma imagem puramente decorativa e sem link pode ter o alt vazio, o que o bloco permite. Se houver Link ao clicar, a alternativa deve ajudar a entender o destino. A oferta e suas condições continuam no texto visível, mesmo quando o alt estiver bem escrito.

5. Confira leitura e visibilidade antes de exportar

Use os ícones de monitor e telefone para alternar as larguras da prévia. Observe se o título quebra linhas de forma legível, se o parágrafo tem espaço suficiente e se o botão aparece na sequência esperada. Isso é uma prévia de navegador, não uma emulação de todos os celulares ou versões do Outlook.

No conteúdo essencial, no botão e nos blocos que os contêm, confira Visibilidade. Mantenha Ocultar no mobile e Ocultar no desktop desligados. Uma ação separada ainda pode desaparecer se o próprio bloco ou seu contêiner estiver configurado para ficar oculto.

Revise contraste, ordem de leitura, tamanho do texto e rótulos dos links. Se houver leitor de tela disponível, escute a mensagem e procure repetições ou nomes sem significado. Essas verificações ajudam a encontrar problemas; uma única inspeção não é uma auditoria completa de acessibilidade.

6. Exporte o HTML e confira sua estrutura

Para esta amostra estática, remova variáveis de demonstração sem uso e desligue Mostrar por condição em Condição de exibição (ESP) nos blocos que não precisam dessas regras. Preserve o rodapé e os links de serviço exigidos pelo seu sistema. Em uma campanha personalizada, as variáveis reais precisam corresponder ao sistema de envio utilizado.

Abra Exportar HTML, mantenha mailvex em Formato de variáveis (ESP) e use Copiar HTML uma vez. Confira a cota e a assinatura exigida pelo plano. Você pode salvar o código já copiado em um arquivo .html completo; Baixar HTML é uma alternativa, não outra etapa obrigatória.

No código, procure o título, o parágrafo e o texto do botão. Eles devem estar presentes como conteúdo textual, com o destino da ação separado da foto. Tentar selecionar palavras na prévia é uma pista, mas alguns aplicativos têm OCR: esse gesto sozinho não prova que o texto deixou de ser imagem.

Confira também as URLs das imagens fora da sessão do editor. O modo Mailvex mantém URLs hospedadas; alguns recursos podem permanecer em hosts externos. O modo Próprio exige arquivos realmente disponíveis no destino; alterar a base não faz o upload. Mantenha os recursos necessários para os e-mails já enviados.

7. Envie ao seu próprio endereço pelo sistema habitual

Importe ou cole o documento completo no modo HTML que seu sistema de envio realmente aceita. Revise o resultado após a importação e envie apenas ao seu próprio endereço de teste. O Mailvex prepara o conteúdo; esta etapa usa o serviço que você já utiliza para enviar.

Abra a mensagem no computador e no celular, incluindo o Outlook se ele fizer parte do público. Use os controles do cliente para bloquear imagens remotas quando isso for suportado. Não há uma opção de “imagens desligadas” neste roteiro do editor. Colocar o navegador inteiro offline também interrompe links e não substitui esse teste.

Confira se a oferta, as condições e o rótulo da ação permanecem compreensíveis. O alt pode aparecer de formas diferentes ou não aparecer; não conte com um parágrafo longo dentro do espaço da imagem. Um link separado reduz a dependência da foto, mas não contorna políticas do cliente que bloqueiem links.

Registre o que passou e o que precisa mudar

Salve o projeto visual, o HTML e a identificação do teste. Para corrigir uma frase, volte ao bloco original, exporte novamente e atualize o código no sistema de envio: mudar o projeto não altera uma cópia já transferida. Compare versões com o mesmo conteúdo para entender o efeito da alteração.

Se depois avaliar resultados comerciais com um teste A/B, mantenha comparáveis oferta, público e condições de envio. Observe cliques e ações finais, além de aberturas. O teste funcional deste guia não estabelece aumento de vendas nem melhora de entrega.

Perguntas frequentes

Posso manter o hero ou o logotipo como imagem?

Sim. Use a imagem para a parte visual e deixe título, informação essencial e ação em elementos próprios. Não é necessário eliminar todas as imagens para construir uma mensagem legível.

Dividir o banner em imagens menores resolve?

Isso não transforma as letras desenhadas em texto editável. Aumentar a resolução também não cria parágrafos que se reorganizam. A separação útil acontece quando você reescreve o conteúdo em blocos reais.

A importação de screenshot pode ajudar?

Pode ser um ponto de partida opcional para um rascunho, seguido de revisão manual e substituição de imagens. O guia relacionado apresenta esse caminho. Aqui, a reconstrução parte do texto e dos recursos que você escolheu para a campanha.

Texto em HTML é a mesma coisa que um e-mail plain text?

Não. Esta mensagem continua sendo HTML, com texto, estilos e imagens. Uma alternativa de texto simples no formato do e-mail depende do sistema de envio; este procedimento não promete gerar essa parte automaticamente.

Isso evita spam ou traduz a campanha automaticamente?

Não. Entrega depende de outros fatores, e cada idioma exige conteúdo e revisão próprios. Não existe uma proporção universal de imagem e texto que garanta resultados. O objetivo imediato é ter uma mensagem editável e validada no uso real.