Como adicionar uma imagem de fundo a um modelo de e-mail ou seção
O que você vai aprender
Saiba como sobrepor texto, imagens e outros conteúdos de e-mail em imagens de fundo. Você pode adicionar uma imagem de fundo a um e-mail inteiro ou a uma única seção. Ao usar esses recursos, você pode colocar uma imagem sobre a outra ou adicionar um botão ou texto sobre uma imagem.
Sobre imagens de fundo
Você pode adicionar uma imagem de fundo atrás de um modelo de e-mail inteiro ou atrás de uma seção específica no modelo. Os fundos do modelo são adicionados usando a guia Estilos do modelo e, em geral, abrangem toda a largura e altura do e-mail.
No entanto, os fundos das seções são isolados em áreas específicas do e-mail. Eles permitem que você crie imagens e chamadas à ação dinâmicas e chamativas. Você também pode incluir várias chamadas à ação em 1 imagem (por exemplo, “Comprar sapatos” e “Comprar acessórios”). Essas imagens de fundo específicas da seção podem ser adicionadas pela aba Estilos de uma seção.
Usar uma imagem de fundo com texto e outro conteúdo sobrepostos pode aumentar a acessibilidade do seu e-mail, em comparação com inserir uma única imagem que contém texto. Se sua mensagem contiver principalmente conteúdo de imagem com pouco texto, os destinatários que usam leitores de tela e outros dispositivos de acessibilidade que não exibem imagens dependem do texto alternativo para entender o conteúdo da mensagem.
Além disso, os destinatários que usam caixas de entrada somente de texto ou configuram a caixa de entrada para ocultar imagens por padrão não vão conseguir entender sua mensagem com facilidade. Quando você usa blocos de texto padrão com uma imagem por trás deles, fica mais fácil para os destinatários com necessidades de acessibilidade ou dispositivos alternativos entenderem sua mensagem.
Selecionar imagens de fundo
Ao selecionar uma imagem para usar como plano de fundo de uma seção ou de um modelo, escolha uma imagem com resolução alta o suficiente para aparecer nítida e profissional na caixa de entrada. No entanto, certifique-se de não usar um arquivo desnecessariamente grande, pois isso pode levar a tempos de carregamento lentos dos seus e-mails. Em geral, use imagens de 1 MB ou menos como plano de fundo de seções.
Defina uma imagem de fundo da seção
Depois de escolher uma imagem para usar, adicione uma nova seção ao modelo do seu e-mail.
- Na guia Estilos da seção, localize a seção Plano de fundo.
- Clique em + para adicionar uma imagem.
- Clique em Procurar biblioteca de imagens e, em seguida, faça upload da sua imagem.
- Depois de estilizar a imagem de fundo, adicione conteúdo à seção. Você pode adicionar qualquer tipo de bloco (por exemplo, bloco de texto, bloco de botão, bloco de tabela) e qualquer quantidade de blocos à sua seção.
Depois de definir uma imagem de fundo, escolha também uma cor de fundo. Essa cor aparecerá se a imagem de fundo não puder ser carregada por qualquer motivo.
- Abra a guia Estilos da seção.
- Ative/desative a opção Cor da seção.
- Escolha uma cor que combine bem com a cor da imagem que você escolheu.
Opções de estilo do plano de fundo da seção
Para escolher se a imagem ocupa toda a largura do seu e-mail ou fica contida no conteúdo do e-mail, escolha entre Conteúdo ou Seção na configuração Exibir em.
Na seção Formato, escolha entre as seguintes opções:
- Tamanho original
Sua imagem será exibida no tamanho original e não será restrita de nenhuma forma. - Ajustar
Sua imagem se ajustará completamente à área da seção e pode expor a cor de fundo abaixo se não tiver exatamente o tamanho da área da seção. - Preencher
Sua imagem vai preencher a área da seção completamente, e parte da imagem pode ser cortada. - Lado a lado
A imagem se repetirá para preencher toda a área da seção, e você pode alternar o Tamanho do mosaico para escolher a escala.
Defina uma imagem de fundo do modelo
Para adicionar uma imagem de fundo a um modelo de e-mail:
- Navegue até a aba Estilos do modelo.
- Clique em + para adicionar uma imagem.
- Selecione uma imagem na biblioteca de imagens ou faça upload de uma nova.
Depois que você adicionar sua imagem, você pode mudar como ela é posicionada e se ela deve se repetir (ou ser lado a lado) horizontal e verticalmente.
As imagens definidas como imagens de fundo de um modelo podem cobrir toda a largura da área do modelo. Talvez você queira definir uma cor de Fundo do modelo em um tom parecido com o da sua imagem, já que a cor de fundo pode aparecer enquanto a imagem carrega ou se um destinatário estiver com as imagens desativadas no e-mail.
Suporte da caixa de entrada para imagens de fundo
Embora a maioria das caixas de entrada ofereça suporte a imagens de fundo, há algumas situações em que elas podem não aparecer. Nesses cenários, a cor de fundo será exibida.
As seguintes caixas de entrada não oferecem suporte a imagens de fundo:
- Outlook para Windows
- Yahoo! Mail (suporte parcial)
- AOL (suporte parcial)
Além disso, se um destinatário tiver acesso à internet limitado ou lento, a imagem de fundo pode carregar lentamente ou não carregar, revelando a cor de fundo no lugar.
Recursos adicionais
- About email images best practices
Learn about best practices when using images in Klaviyo emails, including size recommendations and how to add images.
- Dark mode email design best practices
Learn about dark mode, a device setting some users turn on to darken their displays. This setting impacts how emails are displayed. Dark mode is an end user setting that is selected at the device level, and Klaviyo does not have direct control over how dark mode is implemented on each device.
- Coding HTML email backgrounds