O fluxo de trabalho do Canva: como transformar um design gráfico em um email enviado

Principais conclusões

• O Canva cuida do design visual. O HTML cuida da estrutura do email. Essas são etapas separadas, e o fluxo de trabalho conecta as duas. Você cria o design no Canva, exporta os arquivos e usa a IA para gerar o HTML que transforma esses arquivos em um email pronto para envio.
• Crie o design pensando no email antes de exportá-lo. Os emails geralmente têm 600 px de largura e uma única coluna. Configurar isso no Canva antes de criar o design evita retrabalho mais tarde.
• Hospede suas imagens antes de criar o HTML. O email não incorpora imagens da mesma forma que um documento. Suas imagens precisam de uma URL pública, e o HTML aponta para essa URL.
• A IA gera a estrutura do email com base nos seus arquivos do Canva. Você descreve seu design e fornece as URLs das imagens, e a IA produz um HTML seguro para emails, com suas imagens posicionadas corretamente.
• As ferramentas de IA podem gerar, depurar e converter códigos HTML de email a partir de descrições em linguagem simples, mas sempre teste os códigos gerados por IA antes de enviá-los
• O editor de HTML da Benchmark Email é a etapa final. Cole o HTML, visualize e envie. Não é preciso recriar seu design dentro de uma ferramenta de arrastar e soltar.

Se você trabalha com marketing em uma pequena empresa, provavelmente o Canva já está aberto em outra aba. É lá que você cria suas publicações para redes sociais, seus materiais gráficos promocionais, anúncios de ofertas e talvez até os flyers dos seus eventos. Os designs ficam ótimos. Então você tenta transformar um deles em email e não sabe como continuar.

O Canva não envia emails. Não dá para simplesmente exportar um design e colocá-lo na sua plataforma de email, como você faria ao salvar um JPEG e publicá-lo no Instagram. O email tem sua própria estrutura, formato de arquivo e particularidades relacionadas ao carregamento das imagens e ao comportamento dos layouts em diferentes clientes de email.

Mas a distância entre um design finalizado no Canva e um email enviado é menor do que parece. Neste post, mostramos todo o fluxo: o que considerar ao criar um design para email, como exportar o que você precisa, como usar a IA para criar a estrutura HTML em torno dos seus elementos visuais e como reunir tudo no editor HTML da Benchmark Email antes de enviar.

Por que você não pode simplesmente exportar um design do Canva como email

O mais comum é exportar seu design do Canva como JPEG ou PNG e inseri-lo no email como uma única imagem grande. Isso funciona tecnicamente, mas cria problemas reais:

• A maioria dos clientes de email bloqueia imagens por padrão. Um assinante que não autorizou o carregamento das imagens vê um email em branco e sem contexto.
• Emails com uma única imagem prejudicam a entregabilidade. Os filtros de spam procuram uma proporção equilibrada entre texto e imagem. Um email com 100% de imagem e 0% de texto levanta suspeitas.
• As imagens não se ajustam corretamente em dispositivos móveis. Uma imagem com 600 px de largura que é reduzida para 375 px em um celular pode continuar legível, mas suas fontes ficam minúsculas e seu botão de CTA fica difícil de tocar.
• Você não consegue personalizar nem rastrear links dentro de uma imagem. Se o seu design inclui um botão visual “Compre agora” dentro de um JPEG, ele não é um link clicável. Você não consegue rastrear quem clicou nele nem usar campos dinâmicos para personalizar o texto.

A abordagem certa é usar o Canva para o que ele faz de melhor — criar elementos visuais — e usar HTML para o que ele faz de melhor: estruturar um email funcional e fácil de ler em torno desses elementos.

Etapa 1: crie o design no Canva pensando no email

Você não precisa refazer nada do que já criou. Mas, nos próximos designs de email no Canva, algumas escolhas feitas desde o início vão poupar seu tempo mais tarde.

• Defina o tamanho da tela como 600 x 800 px. Essa é a largura padrão de um email. A altura pode variar, mas começar com 800 px dá espaço para um cabeçalho, uma seção de conteúdo e um CTA sem deixar o design apertado.
• Crie o design em seções claras e separadas. Um email é formado por módulos empilháveis: um cabeçalho com seu logotipo, uma imagem ou um elemento gráfico de destaque, uma seção de texto, um botão de CTA e, talvez, um rodapé. Se você criar o layout no Canva em faixas horizontais distintas, essas faixas se tornarão os blocos básicos da estrutura HTML.
• Use texto de verdade para tudo o que precisa ser legível, clicável ou personalizado. Sua imagem de destaque ou foto do produto deve ser um arquivo de imagem. O título, o texto do corpo e o botão de CTA devem existir como texto HTML real no email, não como texto incorporado a uma imagem. Crie o texto no Canva como referência visual, mas planeje reproduzi-lo em HTML.
• Exporte os elementos visuais separadamente. Sua imagem de destaque, foto do produto, elemento gráfico de fundo e logotipo devem ser exportados individualmente do Canva, e não como uma única imagem combinada que inclua textos que você queira reproduzir em HTML.

Etapa 2: exporte seus arquivos do Canva

Quando seu design estiver pronto, exporte cada componente visual como um arquivo separado.

• Para fotos e elementos gráficos coloridos: Exporte como JPG. Ele oferece boa qualidade com um tamanho de arquivo menor que o PNG.
• Para logotipos, ícones e imagens com fundo transparente: Exporte em PNG. A transparência é preservada.
• O tamanho do arquivo é importante. Imagens grandes deixam o carregamento mais lento e podem aumentar demais o tamanho do arquivo de email. No Canva, você pode redimensionar as dimensões da exportação. Para uma imagem principal em um email com 600 px de largura, a imagem não deve ter mais de 1200 px de largura (2x para telas retina). Reduza o tamanho antes de exportar, em vez de deixar o cliente de email fazer isso.
• Dê nomes claros aos seus arquivos. Você fará referência a eles pelo nome do arquivo ao hospedá-los, então um nome como june-sale-hero.jpg é mais útil do que design-export-final-v3.jpg.

Etapa 3: hospede suas imagens

O email não incorpora imagens da mesma forma que um documento do Word ou PDF. O HTML do email aponta para imagens hospedadas online usando uma URL. Se a imagem não estiver hospedada publicamente, os assinantes não a verão.

Opções para hospedar imagens:

• Seu próprio site. Se você tem um site no WordPress, Webflow ou Squarespace, pode enviar as imagens para sua biblioteca de mídia e usar a URL pública.
• Google Drive ou Dropbox com compartilhamento público. Envie o arquivo, defina o compartilhamento como “qualquer pessoa com o link” e use o link direto. Lembre-se de que alguns clientes de email e filtros de spam podem desconfiar de links de serviços de hospedagem de arquivos. Por isso, seu próprio domínio é preferível quando estiver disponível.
• Um serviço gratuito de hospedagem de imagens. Se você não tem um site, ferramentas como Imgur, Cloudinary (plano gratuito) ou Postimages permitem enviar uma imagem e obter uma URL pública instantaneamente. Envie o arquivo exportado do Canva, copie o link direto da imagem e pronto.

Depois que cada imagem estiver hospedada, copie e salve cada URL antes de começar a criar o HTML. Você fará referência a elas na próxima etapa.

Etapa 4: use a IA para gerar o HTML do email em torno dos seus recursos

É aqui que o fluxo de trabalho se completa. Você criou o design do email no Canva, exportou os componentes visuais e já tem URLs de imagens prontas para usar. Agora, descreva o layout para uma ferramenta de IA e peça que ela gere a estrutura HTML.

Veja um exemplo de prompt:

“Gere um modelo de email HTML responsivo usando um layout baseado em tabelas e CSS inline. O email deve ter 600px de largura, ficar centralizado em um fundo claro (#f8f8f8). Área de conteúdo: fundo branco, padding de 32px. A estrutura deve ser: 1) Uma imagem de logotipo no topo, centralizada, com esta URL: [your-logo-url]. 2) Uma imagem principal ocupando toda a largura abaixo, com esta URL: [your-hero-url]. 3) Um título centralizado em Arial negrito de 26px, na cor #1A1A1A, com o texto: ‘Nossa liquidação de verão começa agora.’ 4) Dois parágrafos curtos de texto em Arial de 16px, na cor #555555, com altura de linha de 1.6. 5) Um botão de CTA centralizado: cor de fundo #E83030, texto branco, com o texto: ‘Aproveite a liquidação’, link para [your-url], padding de 14px em cima e embaixo, padding de 28px à esquerda e à direita e raio da borda de 4px. Adicione media queries para que o email seja responsivo em dispositivos móveis com até 600px.”

A IA vai retornar um HTML completo, pronto para email. Suas imagens do Canva aparecem no contexto, seu texto é inserido em HTML real e seu CTA é um botão com link correto, não uma imagem.

Veja algumas dicas para criar prompts:

• Inclua as URLs das imagens no prompt. A IA não consegue acessar arquivos no seu computador, mas pode usar como referência uma URL que você fornecer.
• Descreva as seções na ordem em que aparecem. De cima para baixo, da forma como o leitor vai percorrer o email.
• Peça especificamente CSS inline. Isso é fundamental para garantir a compatibilidade com emails. Se a IA usar por padrão um <bloco de estilo> no cabeçalho.
• Faça quantas alterações quiser. Cole o HTML em um navegador para visualizá-lo. Se algo estiver errado, descreva o problema para a IA: “O botão está alinhado à esquerda; centralize-o” ou “Adicione mais 20 px de espaço entre a imagem principal e o título”.

Etapa 5: cole na Benchmark Email e envie

Com o HTML pronto, vá para a Benchmark Email:

1. Crie uma nova campanha e selecione o editor de HTML.
2. Cole o HTML gerado no editor.
3. Visualize o email no computador e no celular.
4. Envie um email de teste para você mesmo e verifique-o no Gmail, no Apple Mail e no seu celular.
5. Faça os ajustes finais no modo de visualização do código, atualize a linha de assunto e o nome do remetente e envie.

Seu design do Canva agora é um email totalmente funcional, pronto para ser entregue, com texto de verdade, links reais e rastreamento de cliques. O que parecia uma grande lacuna no fluxo de trabalho acabou se resumindo a uma série de pequenas etapas fáceis de gerenciar.

Alguns pontos para ficar de olho

• Verifique se suas imagens realmente carregam. No email de teste, confira cada imagem. Se alguma aparecer como um link quebrado ou uma caixa vazia, a URL de hospedagem está incorreta ou a imagem não está acessível publicamente.
• Verifique se todos os links funcionam. Clique em todos os links do seu teste: o CTA, qualquer link no logotipo e os links de texto. É muito melhor identificar uma URL quebrada durante o teste do que em um relatório da campanha.
• Confira no celular. Abra o teste no seu celular. Confirme o tamanho das fontes, as áreas de toque dos botões e se as seções com duas colunas são empilhadas corretamente.
• Confira a versão em texto simples. A Benchmark Email gera automaticamente uma versão em texto simples do seu email. Revise essa versão para garantir que o conteúdo esteja claro e que todos os links importantes apareçam como URLs completas.

Perguntas frequentes

Posso usar um design do Canva exatamente como está, exportado como uma única imagem grande?

Tecnicamente, sim, mas não é recomendado. Para a maioria dos assinantes, uma única imagem grande é bloqueada por padrão, prejudica a entregabilidade, não permite links clicáveis dentro do design e não se adapta bem a dispositivos móveis. A abordagem em HTML descrita neste post oferece resultados melhores em todos esses aspectos.

O Canva tem alguma opção integrada para exportar emails?

O Canva tem o recurso “Enviar email” em alguns planos, mas ele é limitado a templates básicos e não se conecta a plataformas completas de email marketing. Para campanhas com gerenciamento de listas, rastreamento e infraestrutura de entregabilidade de verdade, o fluxo de trabalho deste post — Canva para o design e Benchmark Email para o envio — é o melhor caminho.

E se eu não quiser usar IA para gerar o HTML?

Você tem algumas opções. Pode usar um template de email pronto na Benchmark Email e substituí-lo pelas imagens e pelo conteúdo do Canva. Ou, se tiver familiaridade com HTML, pode escrever a estrutura manualmente usando os padrões do nosso guia de email em HTML. Para quem não é desenvolvedor, a IA é o caminho mais rápido e prático.

Como hospedo imagens se não tenho um site?

A opção mais simples é usar um serviço gratuito de hospedagem de imagens. Ferramentas como Imgur, Postimages ou Cloudinary (plano gratuito) permitem fazer upload de uma imagem e gerar uma URL pública em poucos segundos. Você também pode usar o Google Drive ou o Dropbox com o compartilhamento de links públicos ativado. Só confira se a URL aponta diretamente para o arquivo de imagem, e não para uma página de pré-visualização.

Com que frequência posso reutilizar esse fluxo de trabalho?

Quantas vezes quiser. Depois de criar um template de HTML funcional para o seu primeiro projeto do Canva para email, você pode reutilizar essa estrutura em todas as campanhas futuras. Atualize as imagens e o conteúdo, ajuste os links e a estrutura da marca continuará no lugar. O fluxo de trabalho completo só demora mais na primeira vez.

O HTML gerado por IA funciona em todos os clientes de email?

HTML baseado em tabelas com CSS inline é a abordagem mais compatível para emails, e é isso que os prompts deste post produzem. Ainda assim, vale testar no Gmail, Outlook e Apple Mail, já que cada cliente renderiza o conteúdo de uma forma um pouco diferente. A estrutura gerada por IA lida com as diferenças mais comuns, e a etapa de envio de teste identifica qualquer outro problema.