Ir para conteúdo principal

Realize seu trabalho de forma profissional

De treinamentos a marketing completo, nossa comunidade de parceiros pode ajudar você a fazer as coisas acontecerem.

Contrate profissionalmente

Adicionar uma imagem de fundo a um modelo HTML personalizado

Copie o URL do artigo
Copiado

Nota

As informações neste artigo se aplicam apenas ao Criador Clássico. Para saber como usar o novo criador, confira Criar um e-mail no Novo Criador.

Para aprimorar ainda mais o design das suas campanhas de marketing, você pode adicionar uma imagem de plano de fundo a um modelo Code your own (Programe você mesmo) no Template Builder (Construtor de modelos) do Mailchimp.

Modelos HTML são um recurso avançado, recomendado para usuários familiarizados com programação personalizada. Se precisar de ajuda, entre em contato com o desenvolvedor ou contrate um Especialista em Mailchimp.

Neste artigo, você vai aprender como adicionar uma imagem de plano de fundo ao seu modelo HTML personalizado.

Antes de começar

Vejamos algumas coisas que você deverá saber antes de iniciar esse processo.

  • As imagens de plano de fundo podem não ser exibidas para todos os clientes de e-mail, por isso veja mais detalhes sobre quais clientes de e-mail aceitam imagens de plano de fundo em nosso artigo Compatibilidade de clientes de e-mail com CSS.
  • Imagens grandes podem fazer com que as campanhas sejam exibidas de forma incorreta nas caixas de entrada dos destinatários. Para obter melhores resultados, defina a resolução como 920 x 1080 px ou menos e comprima a imagem.
  • Hospede as suas imagens em um servidor público ou use um serviço gratuito como o Imgur ou o Flickr, e use um caminho de arquivo absoluto que aponte diretamente para o local do arquivo no código. Saiba que, caso você hospede suas imagens em um servidor privado, os destinatários que não tiverem acesso ao servidor não poderão visualizá-las.
  • O Mailchimp também pode hospedar as suas imagens no Estúdio de Conteúdo se elas forem menores do que 10 MB.
  • Você também pode adicionar uma imagem de plano de fundo a uma campanha normal. Para saber mais, confira o nosso artigo Adicionar uma imagem de plano de fundo a uma página de destino ou e-mail.

Adicionar uma imagem de fundo ao seu modelo HTML personalizado

Esse processo usa CSS, HTML e VML para exibir uma imagem e cor de plano de fundo. Você deve colar o nosso código de exemplo no seu modelo e alterar o espaço reservado para a imagem e cor de plano de fundo de acordo com as suas especificações.

Para adicionar uma imagem de plano de fundo a um modelo HTML personalizado, siga estas etapas:

  1. Clique em Content (Conteúdo) e, em seguida, clique em Email templates (Modelos de e-mail).
  2. Clique em Create Template (Criar modelo).
  3. Clique na guia Code your own (Programado por você) e selecione Paste in code (Colar código).
    Cursor no botão Colar código
  4. No Editor de código, insira o seguinte código logo após a etiqueta<body> de abertura para adicionar a cor e a imagem de fundo do espaço reservado:
    <div style="background-color:#7bceeb;">
<!--[if gte mso 9]>
 <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
 <v:fill type="frame" src="http://www.yoursite.com/yourimages/photo.jpg"color="#7bceeb" />
 <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
     <![endif]-->
 <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
  <td valign="top" align="left" background="http://www.yoursite.com/yourimages/photo.jpg" style="background-repeat:no-repeat; background-size:cover;">

    Este código exibe URLs e cores da imagem do espaço reservado. Você as substituirá pelas informações de imagem e cor na próxima etapa.

  5. Substitua as duas URLs de espaço reservado da imagem de fundo e os valores de espaço reservado da cor de fundo neste exemplo de código pelo código hexadecimal da cor de sua escolha e o caminho absoluto do arquivo para a URL da imagem.

  6. Insira o seguinte código antes da etiqueta <body> de fechamento. 

    </td>
</tr>
 </table>
 <!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</div>

  7. Substitua ou edite o restante do código da campanha com o seu próprio HTML personalizado.

  8. Quando terminar de editar o código, clique em Save (Salvar).
  9. Clique em Save and Exit (Salvar e sair).
  10. No modal pop-up Save Template (Salvar modelo), dê um nome para o seu modelo.
  11. Clique em Save (Salvar).

Você pode acessar o novo modelo no Criador de Campanhas ou na página Templates (Modelos).

Testes e solução de problemas

Antes de enviar sua campanha de e-mail, visualize e teste minuciosamente seu modelo e envie alguns e-mails de teste para si mesmo. Para ver como determinados clientes de e-mail exibirão sua imagem de plano de fundo, use a ferramenta Inbox Preview.

Visualizar e testar uma campanha de e-mail
Testar com Inbox Preview

Aqui estão algumas outras dicas para trabalhar com imagens de fundo.

  • A imagem de plano de fundo não será exibida se as imagens estiverem desativadas na caixa de entrada do destinatário. Por esse motivo, escolha uma cor de plano de fundo que exibirá seu texto corretamente se a imagem de plano de fundo não carregar.

  • Ao editar seu CSS, verifique se você não possui outras propriedades de plano de fundo em seu código, pois elas podem substituir a imagem de plano de fundo.

  • Quando você trabalha no Editor de modelos, as etiquetas de mesclagem não são renderizadas nas visualizações ou nos e-mails de teste. Se você quiser ver como as etiquetas de mesclagem serão renderizadas para os contatos, crie uma campanha a partir do modelo e use nossas opções para visualizar e testar.

Servicio técnico

Está com alguma dúvida?

Os usuários de planos pagos podem fazer login para acessar o suporte via e-mail e chat.

Este artigo foi útil?

Relacionados

Onde editar o código do modelo

Com a linguagem de modelos do Mailchimp, é possível programar um modelo de e-mail dentro da sua própria conta. Saiba como inserir imagens de modelo e encontrar o HTML do seu modelo.

Sobre imagens de modelos

Limites de imagens variam de acordo com seu modelo do Mailchimp. Veja dicas sobre como usar imagens em diferentes opções de modelos.