Como adicionar uma imagem de fundo a um modelo ou seção de e-mail
O que você vai aprender
Saiba como colocar texto, imagens e outros conteúdos de e-mail em camadas sobre imagens de fundo. O senhor pode adicionar uma imagem de fundo a um e-mail completo ou a uma única seção. Usando esse recurso, o senhor pode colocar uma imagem sobre outra, ou adicionar um botão ou texto sobre uma imagem.
Sobre imagens de fundo
É possível adicionar uma imagem de fundo a um modelo de e-mail inteiro ou a uma seção específica do modelo. Os planos de fundo dos modelos são adicionados usando a guia Styles (Estilos ) do modelo e, em geral, abrangem toda a largura e altura do e-mail.
Os planos de fundo das seções, no entanto, são isolados em áreas específicas do e-mail. Eles permitem que o senhor crie imagens e chamadas para ação dinâmicas e atraentes. O senhor também pode incluir várias chamadas para ação em uma única imagem (por exemplo, "Shop Shoes" e "Shop Accessories"). Essas imagens de fundo específicas da seção podem ser adicionadas por meio da guia Styles (Estilos ) de uma seção.
O uso de uma imagem de fundo com texto e outro conteúdo sobreposto pode aumentar a acessibilidade do seu e-mail, em comparação com a inserção de uma única imagem com texto. Se a 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 de texto sem formatação ou que configuram suas caixas de entrada para ocultar imagens por padrão não conseguirão entender facilmente sua mensagem. Quando o senhor usa blocos de texto padrão com uma imagem por trás, é mais fácil para os destinatários com necessidades de acessibilidade ou dispositivos alternativos entenderem sua mensagem.
Seleção de imagens de fundo
Ao selecionar uma imagem para usar como plano de fundo da seção ou do modelo, escolha uma imagem que tenha uma resolução suficientemente alta para parecer nítida e profissional na caixa de entrada. No entanto, certifique-se de não usar um arquivo desnecessariamente grande, pois isso pode causar lentidão no carregamento de seus e-mails. Em geral, use imagens com 1 MB ou menos como plano de fundo da seção.
Definir uma imagem de fundo da seção
Depois de escolher a imagem a ser usada, adicione uma nova seção ao seu modelo de e-mail.
- Na guia Styles (Estilos ) da seção, localize a seção Background (Plano de fundo).
- Clique em + para adicionar uma imagem.
- Clique em Browse Image Library e, em seguida, faça o upload da imagem.
- Depois de estilizar a imagem de fundo, adicione conteúdo à seção. É possível adicionar qualquer tipo de bloco (por exemplo, bloco de texto, bloco de botões, bloco de tabela) e qualquer número de blocos à sua seção.
Depois de definir uma imagem de fundo, escolha também uma cor de fundo. Essa cor será exibida se a imagem de fundo não puder ser carregada por qualquer motivo.
- Abra a guia Styles (Estilos ) da seção.
- Ativar a cor da seção.
- Escolha uma cor que se aproxime da cor da imagem que o senhor escolheu.
Opções de estilo de fundo da seção
Para escolher se a imagem se estende por toda a largura do e-mail ou se está contida no conteúdo do e-mail, escolha entre Content (Conteúdo ) ou Section (Seção ) na configuração Display on (Exibir em ).
Na seção Format (Formato ), escolha entre as seguintes opções:
- Tamanho original
Sua imagem será exibida em seu tamanho original e não será restringida de forma alguma. - Ajuste
Sua imagem caberá inteiramente na área da seção e poderá expor a cor de fundo embaixo se não tiver o tamanho exato da área da seção. - Preencher
Sua imagem preencherá completamente a área da seção, e parte da imagem poderá ser cortada. - Ladrilho
A imagem será repetida para preencher toda a área da seção, e o usuário pode alternar o tamanho do Tile para escolher a escala.
Definir uma imagem de fundo do modelo
Para adicionar uma imagem de fundo a um modelo de e-mail:
- Navegue até a guia Styles (Estilos ) do modelo.
- Clique em + para adicionar uma imagem.
- Escolha uma imagem de sua biblioteca de imagens ou carregue uma nova imagem.
Depois de adicionar a imagem, o senhor pode alterar a forma como ela é posicionada e se ela deve ou não ser repetida (ou lado a lado) horizontal e verticalmente.
As imagens definidas como imagens de fundo para um modelo podem cobrir toda a largura da área do modelo. Talvez o senhor queira definir uma cor de fundo do modelo em um tom semelhante ao da sua imagem, pois a cor de fundo pode aparecer enquanto a imagem é carregada ou se o destinatário tiver desativado as imagens 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á determinadas situações em que elas podem não ser exibidas. Nesses cenários, a cor de fundo será exibida em seu lugar.
As caixas de entrada a seguir não são compatíveis com imagens de fundo:
- Outlook para Windows
- Yahoo! Mail (suporte parcial)
- AOL (suporte parcial)
Além disso, se o destinatário tiver acesso limitado ou lento à Internet, a imagem de fundo poderá ser carregada lentamente ou não ser carregada, revelando a cor do fundo.
Recursos adicionais
- Sobre as práticas recomendadas para imagens de e-mail
Saiba mais sobre as práticas recomendadas ao usar imagens nos e-mails da Klaviyo, incluindo recomendações de tamanho e como adicionar imagens.
- Práticas recomendadas de design de e-mail no modo escuro
Saiba mais sobre o modo escuro, uma configuração do dispositivo que alguns usuários ativam para escurecer suas telas. Essa configuração afeta a forma como os e-mails são exibidos. O modo escuro é uma configuração do usuário final que é selecionada no nível do dispositivo, e a Klaviyo não tem controle direto sobre como o modo escuro é implementado em cada dispositivo.
- Codificação de fundos de e-mail em HTML