Resumo
Audiência
Marca
Campanhas
Informação detalhada
Resumo
Mailchimp 101
Dicas de marketing
Guías y tutoriales
Mailchimp Presents
Adicionar uma imagem de fundo a um modelo HTML personalizado
Adicione uma imagem de plano de fundo ou de destaque às suas campanhas com modelos de e-mail em HTML personalizado. Obtenha dicas para testar suas imagens e resolver problemas comuns.
Adicionar uma imagem de plano de fundo a uma campanha
Copie o URL do artigo
Copiado
Deixe o seu marketing ainda melhor: adicione uma imagem de fundo aos e-mails, landing pages e campanhas automatizadas.
Neste artigo, você aprenderá como adicionar uma imagem de plano de fundo a uma campanha.
Antes de começar
Algumas coisas que você deve saber antes de iniciar esse processo:
- Este artigo explica como adicionar uma imagem de segundo plano a um modelo ou campanha básica de arrastar e soltar. Se você quiser usar uma campanha de e-mail HTML personalizada, dê uma olhada no nosso artigo Adicionar uma imagem de fundo a um modelo HTML personalizado.
- Verifique se sua imagem de plano de fundo atende aos requisitos de imagem para garantir que ela não estique ou distorça seu layout.
- Como nossos modelos de arrastar e soltar funcionam em dispositivos móveis, é melhor adicionar uma imagem de fundo a uma seção de campanha com uma só coluna. Inserir imagens de fundo em seções de campanha com várias colunas pode distorcer o design em dispositivos móveis.
- É possível adicionar imagens de fundo à seção Page (Página) de campanhas de landing page, mas não à seção Page (Página) de campanhas de e-mail. Para colocar uma imagem de fundo aqui, você precisará usar um modelo de e-mail HTML personalizado.
- Se você quiser que uma imagem de plano de fundo seja exibida no Outlook para suas campanhas de e-mail, use um modelo HTML personalizado.
- Este artigo usa uma campanha de e-mail normal para mostrar como adicionar uma imagem de plano de fundo. Algumas opções podem parecer um pouco diferentes, dependendo do tipo de campanha com a qual você está trabalhando.
Sobre imagens de plano de fundo
É possível usar imagens de fundo para criar um padrão de plano de fundo repetido ou para exibir uma imagem completa por trás do conteúdo da sua campanha. Os modelos de arrastar e soltar do Mailchimp aceitam imagens de plano de fundo nas seções de pré-cabeçalho, cabeçalho, corpo, coluna e rodapé de uma campanha de e-mail e nas seções de página, cabeçalho, corpo e rodapé de uma landing page de campanha.
As imagens de plano de fundo não são reproduzidas em todos os clientes de e-mail e podem ser exibidas de forma diferente nos clientes de dispositivos móveis, por isso é importante visualizar e testar totalmente suas campanhas antes de enviá-las ao público.
Imagens de plano de fundo e clientes de e-mail
Se você estiver trabalhando com uma campanha de e-mail ou automação, confira esta tabela para descobrir quais clientes de e-mail aceitam imagens de plano de fundo.
| Email Client (Cliente de e-mail) | Supports Background Images (Aceita imagens de plano de fundo) |
|---|---|
| Outlook 2003 |  |
| Outlook 2007 | |
| Outlook 2010 | |
| Outlook 2013 | |
| Gmail |  |
| Outlook.com | |
| Yahoo! | |
| iOS Mail | |
| Apple Mail | |
Adicionar uma imagem de plano de fundo
Para adicionar uma imagem de plano de fundo a uma campanha, siga estes passos.
- No designer da página de e-mail ou de landing page, clique na guia Design no painel de edição.
- Clique na seção em que gostaria de adicionar uma imagem de plano de fundo.
- Em Background (Plano de fundo), clique em Add an image instead (Prefiro adicionar uma imagem) para abrir o Content Studio (Estúdio de conteúdo) e carregar uma nova imagem do seu computador, escolher uma imagem do Content Studio ou importar uma imagem de um endereço da web.
A imagem será inserida na seção que você escolher. Continue lendo para saber como estilizar uma imagem de plano de fundo.
Estilizar uma imagem de plano de fundo
Personalize o estilo e o posicionamento de sua imagem de plano de fundo para garantir que sua campanha tenha a aparência certa.
Para estilizar uma imagem de plano de fundo, siga estes passos.
- No designer da página de e-mail ou de landing page, clique na guia Design no painel de edição.
- Escolha a seção que contém a imagem de fundo.
- Em Background (Plano de fundo), clique em Edit (Editar) para fazer alterações na imagem no Editor de Fotos.
- Quando terminar de fazer alterações no editor de fotos, clique em Save (Salvar) para voltar à campanha.
Clique no menu suspenso Size (Tamanho) e escolha o tamanho desejado para a imagem.
- Escolha Auto (Automático) para exibir a imagem no tamanho real.
- Escolha Cover (Cobrir) para preencher a largura de toda a seção. Isso funciona melhor para imagens maiores com conteúdo centralizado e pode ficar cortado quando visualizado em dispositivos diferentes.
- Escolha Contain (Contém) para dimensionar a imagem para um tamanho que se ajuste à altura dentro do contêiner, para que toda a imagem de plano de fundo possa ser visualizada em qualquer dispositivo.
Clique no menu suspenso Position (Posição) e escolha alinhar a sua imagem com as partes Top (Superior), Center (Central) ou Bottom (Inferior) da seção.
Clique no menu suspenso Repeat (Repetir) e escolha o padrão de repetição da imagem.
- Escolha None (Nenhum) para que sua imagem seja exibida apenas uma vez.
- Escolha Vertical para repetir a imagem da esquerda para a direita.
- Escolha Horizontal para repetir a imagem de cima para baixo.
- Escolha Both (Ambos) para posicionar a imagem nas duas direções.
Escolha uma Fallback color (Cor padrão) para ser exibida em clientes de e-mail que não aceitam imagens de fundo. Escolha uma cor que permita a exibição correta do texto.
Depois de definir suas preferências de estilo, clique em Save (Salvar).
Depois de estilizar sua imagem de fundo, você pode adicionar qualquer bloco de conteúdo de arrastar e soltar sobre ela no layout da campanha. É melhor usar mensagens claras e curtas em seções com imagens de fundo, como um bloco de imagem que contenha seu logotipo, um bloco de texto que promova sua marca ou um botão com links para sua loja ou site online.
Dicas de etilo
- Em caso de dúvida, use uma imagem centralizada simples se você pretende sobrepor um bloco de conteúdo.
- O preenchimento pode ser adicionado à parte superior e inferior de cada seção da campanha. Isso permite controlar a posição do seu bloco de conteúdo na seção.
- Por padrão, o menu suspenso Repeat (Repetir) é definido como None (Nenhum). Essa configuração é melhor para imagens maiores. Se você tiver uma imagem menor e quiser criar um efeito padronizado, escolha Horizontal, Vertical ou Both (ambos).
Nota
Para saber mais sobre opções de estilo para diferentes seções em uma campanha, confira o nosso artigo Visualizar ou editar o design da seção.
Testar imagens de plano de fundo
Sempre recomendamos que você visualize todas as campanhas criadas no Mailchimp.
Se estiver trabalhando com uma campanha de e-mail, também recomendamos que você teste completamente o design. As imagens de fundo não são compatíveis com todos os clientes de e-mail e, por isso, é importante enviar alguns e-mails de teste para você mesmo. Outra opção é usar a nossa ferramenta Inbox Preview, para ver como a imagem de fundo vai aparecer em diferentes clientes de e-mail.