O tamanho ideal do banner de e-mail para seus modelos

Os banners são uma ferramenta incrível para tornar seus e-mails mais sistematizados, chamar a atenção dos destinatários para os elementos críticos da sua mensagem e permitir que você se destaque nas caixas de entrada lotadas dos seus leitores. No entanto, um banner de e-mail com tamanho impreciso pode devastar a estrutura do seu conteúdo e prejudicar todos os esforços que você fez.

Neste artigo, você aprenderá mais sobre a largura e altura ideais de uma imagem de banner e os aspectos fundamentais a serem considerados ao criar um para suas campanhas de marketing por e-mail. Também forneceremos dicas úteis para criar banners atraentes com o Stripo em poucos minutos.

O que é um banner de e-mail?

É uma imagem de alta qualidade posicionada na parte superior da sua mensagem para destacar seu objetivo e tom principais. As imagens de banner podem ser acompanhadas pelo nome da sua marca, logotipo da empresa, chamada para ação, sua oferta e fotos do produto. Você pode equipar seu banner com textos breves e diretos, como “15% de desconto em itens selecionados” ou “Promoção relâmpago para o fim de semana”, para tornar a ideia do seu e-mail o mais clara possível.

(Fonte: Modelo Stripo)

A importância do tamanho do banner do e-mail

Uma imagem de banner transmite sua UVP (proposta de valor única) e componentes associados à marca, como o logotipo da marca, CTA, esquemas de cores corporativas e gráficos. Esses recursos diferenciam você de centenas de e-mails promocionais que inundam as caixas de entrada dos destinatários e motivam os assinantes a realmente abrir e ler suas mensagens.

Um banner de e-mail com tamanho inadequado pode arruinar toda a estrutura do seu conteúdo. Um banner excessivamente largo forçará o seu cliente de e-mail a ativar a função de rolagem horizontal, enquanto um banner muito pequeno fará com que os destinatários tenham que apertar os olhos para perceber o seu conteúdo.

As dimensões perfeitas para um modelo de e-mail

O tamanho de banner de e-mail mais usado é 600-700 px de largura para dispositivos desktop, o que garante uma exibição adequada em todos os dispositivos. Enquanto isso, as dimensões de altura geralmente ficam entre 350-500 px.

Seguir as dimensões do banner de e-mail que compartilhamos abaixo ajuda você a criar designs visualmente atraentes e responsivos para telas de desktop e dispositivos móveis, evitando criar o tamanho errado de banner de e-mail.

É possível usar vários tipos de banners de e-mail em sua newsletter para atingir diferentes objetivos. Agora, discutiremos o tamanho ideal do banner de e-mail para seus banners, cabeçalhos e rodapés responsivos no corpo do e-mail.

Tamanho do banner do cabeçalho do e-mail

Uma imagem de cabeçalho vibrante e cativante motivará seus leitores a continuar rolando a página. Você pode equipar esse cabeçalho com o logotipo da sua empresa, um breve texto explicando o objetivo principal do seu e-mail e uma CTA. Recomendamos que você limite a largura do banner de e-mail a 600-700 px e a altura a 90-200 px para computadores.

Em dispositivos móveis, você deve usar editores de e-mail modernos que suportem imagens responsivas ao criar banners de e-mail. Uma abordagem responsiva permite que a imagem ajuste seu tamanho automaticamente, dependendo do tamanho da tela em que é exibida. Imagens responsivas vão livrá-lo da dor de cabeça, já que você não pode saber com certeza em qual dispositivo móvel seu e-mail será aberto. Portanto, seu principal objetivo é proporcionar uma experiência de e-mail consistente, e imagens responsivas são a ferramenta certa para essa tarefa.

Em outros casos, você pode seguir o conselho de Roman acima.

Aqui está um exemplo de cabeçalho de e-mail com 650 px (largura) e 200 px (altura):

Tamanho do banner do corpo do e-mail

Um banner atraente no corpo do seu e-mail pode transmitir a ideia central da sua mensagem sem sobrecarregar os leitores com longos parágrafos de texto. Aqui, você pode revelar mais detalhes sobre a sua oferta e explicar quais problemas um cliente pode resolver ao utilizá-la.

Para telas de desktop, sugerimos que você crie um banner com 650-700 px de largura e 350-500 px de altura. Em dispositivos móveis, a situação é a mesma. Considere os tamanhos de tela populares, como mencionamos, ou use editores de e-mail modernos com recursos que permitem criar imagens dinâmicas que se ajustam automaticamente.

(Fonte: Modelo Stripo)

Tamanho do banner do rodapé do e-mail

Posicionado na parte inferior da sua newsletter, um rodapé pode incluir os detalhes de contato da sua organização para quaisquer dúvidas, contas de redes sociais e a opção “Cancelar inscrição”. Esses detalhes permitem que seu conteúdo evite a pasta de spam e chegue às caixas de entrada dos seus destinatários.

Mantenha os rodapés de seus e-mails com 650-700 px de largura e até 150 px de altura para telas de desktop. Em dispositivos móveis, sugerimos seguir nossa recomendação sobre tamanhos de imagem predefinidos que correspondem aos tamanhos de tela mais populares ou criar e-mails com editores que suportam imagens responsivas para facilitar sua vida como profissional de marketing por e-mail. Dê uma olhada no nosso exemplo de rodapé de mensagem de e-mail (700 px de largura e 150 px de altura):

(Fonte: Modelo Stripo)

Tamanho do banner da assinatura do e-mail

As assinaturas também são frequentemente colocadas na parte inferior dos e-mails e podem ser criadas usando banners de e-mail. As dimensões da sua assinatura de banner são praticamente as mesmas que as do rodapé comum, portanto, você pode defini-las entre 650 px e 700 px de largura e até 150 px de altura para a versão de e-mail do seu desktop.

(Fonte: Modelo Stripo)

Quanto ao celular, use tamanhos de imagem predefinidos ou uma abordagem de imagem responsiva se o seu editor de e-mail suportar recursos semelhantes que permitem criar partes de e-mail com imagens dinâmicas.

O que considerar ao criar um banner de e-mail

Agora que você sabe tudo sobre as dimensões ideais para vários tipos de banners de e-mail, vamos dar uma olhada em mais algumas coisas essenciais a serem consideradas durante o processo de design para tornar seus banners atraentes:

Tamanho do botão

Os botões nos banners de e-mail devem ser suficientemente visíveis, por isso é fundamental garantir que não se confundam com a imagem de fundo e outros elementos da sua mensagem.

(Fonte: Modelo Stripo)

Texto sobre imagens de banner

Um banner de e-mail típico é composto por uma imagem e texto sobreposto. Aqui, é vital definir as fontes e combinações de cores adequadas para tornar seu texto legível e vibrante. Por exemplo, seria difícil notar seu texto em marrom sobre uma imagem preta. O mesmo vale para cores claras: texto branco sobre um fundo cinza claro é uma má ideia.

Recomendamos que você experimente diferentes fontes, cores, tamanhos e posicionamentos do texto para torná-lo visível e legível. Nas imagens abaixo, você pode ver que um banner com uma fonte ilegível e texto cinza sobre uma imagem de fundo marrom parece confuso, enquanto a primeira opção, com uma fonte mais legível e uma cor contrastante, é muito mais fácil de perceber.

Tamanho da imagem

Também é fundamental ter uma boa velocidade de carregamento. Quanto menos tempo levar para o seu e-mail carregar, melhor. Certifique-se de compactar as imagens do banner antes de adicioná-las aos seus e-mails para evitar aumentar o tamanho do arquivo do banner do e-mail.

Ao trabalhar com o Stripo, você pode compactar todas as imagens que adicionar automaticamente. Basta ativar a Compactação de Imagens e escolher a porcentagem de compactação necessária nas configurações da sua Área de Trabalho.

Otimização do dispositivo

Os banners de e-mail com imagens temáticas de festas de fim de ano exigem otimização do dispositivo para garantir que seu modelo seja acessível e eficaz em todos os dispositivos. Durante a temporada de festas, quando as pessoas estão com pressa, elas usam principalmente seus dispositivos móveis ou tablets. E é aqui que é crucial garantir que seu modelo seja otimizado junto com todos os botões CTA e ilustrações.

Marca

Ao criar um banner de fim de ano para e-mail com imagens da marca, você pode aumentar o reconhecimento da marca e atrair novos clientes, o que é essencial para o negócio. Certifique-se de que o banner de fim de ano tenha uma aparência consistente com outros materiais da marca; adicione o modelo da marca e personalize o design do banner para se adequar à identidade visual da sua marca. Como resultado, suas campanhas de e-mail de fim de ano serão facilmente identificadas. Um logotipo, tipografia e esquema de cores ajudam os consumidores e as empresas a construir confiança e lealdade, levando a um maior engajamento, vendas e ROI.

Criação de links

Certifique-se de que a imagem do banner de fim de ano tenha um link para a página de destino necessária! É muito fácil adicionar um link a qualquer imagem que você precisar; por exemplo, um link para a página de um produto pode ser uma ótima opção se você estiver promovendo um produto específico. Os destinatários clicam e interagem diretamente com o seu conteúdo. Dessa forma, você aumenta sua CTR e gera conversões diretamente no mesmo banner de fim de ano.

Montando um banner com o Stripo

Ao utilizar nosso editor, você pode começar a criar banners para e-mails em poucos minutos. Selecionamos algumas dicas para facilitar esse processo para você:

Preparando seu banner

Primeiro, você precisa adicionar um banner ao seu modelo de e-mail. Temos um bloco de banner dedicado que você precisa arrastar e soltar no seu modelo.

Depois disso, clique no banner adicionado para abrir este menu. Antes de ajustar as dimensões e outros parâmetros, você precisa anexar uma imagem de banner de e-mail. Você tem várias opções, desde simplesmente enviar uma imagem do seu dispositivo ou usar imagens de banco de imagens, até gerar uma imagem exclusiva usando nosso recurso de imagem AI.

Para o nosso exemplo, escolhemos a opção Photostock. Tudo o que você precisa fazer é clicar na imagem desejada (digite uma consulta de pesquisa no campo respectivo se não encontrar imagens adequadas para suas ideias de design imediatamente) e ela será anexada automaticamente ao banner.

Quando terminar, você pode prosseguir com o ajuste dos parâmetros do banner do e-mail.

Alterando a largura e a altura para desktop

Para definir o tamanho correto do banner do e-mail, acesse a guia Configurações. A seção Tamanho é tudo o que você precisa para definir as dimensões necessárias.

Existem vários botões que você precisará usar para definir o tamanho certo para o seu banner (da esquerda para a direita):

• ajusta a imagem ao tamanho do contêiner;
• restaura o tamanho real da imagem;
• modo de ajuste da largura;
• modo de ajuste de altura;
• botões de ajuste de tamanho (funcionam separadamente para os modos de ajuste de largura e altura).

Basta definir as dimensões corretas usando esses botões e pronto.

Você também pode definir uma forma de recorte na seção correspondente, escolhendo entre orientações predefinidas (vertical e horizontal).

Alterando a largura e a altura para telas de dispositivos móveis

Para que o banner do seu e-mail seja exibido corretamente em telas de dispositivos móveis, clique na opção Visualização móvel para abrir as configurações da versão móvel no Stripo.

Temos uma opção de imagem responsiva ativada por padrão, portanto, na maioria dos casos, você não precisa fazer nada, pois essa opção garante que a imagem do seu banner se ajuste automaticamente às dimensões da tela.

Você pode desativar essa opção, mas não recomendamos isso, pois, uma vez desativada, a imagem do seu banner permanecerá estática, independentemente da resolução da tela em que for exibida. Isso pode prejudicar a exibição das imagens e do conteúdo do seu banner.

Alterar o formato do recorte é igual à versão para desktop.

Adicionando imagens e links

Para adicionar um botão ao seu banner, temos uma opção que permite adicionar outra imagem na parte superior do seu banner. Você pode misturar e combinar sua imagem de fundo relevante com outra,  criando designs exclusivos para o seu e-mail ou chamando a atenção para o seu banner.

Para fazer isso, clique na opção Imagem enquanto estiver nas configurações do bloco Banner.

Você verá o mesmo menu para adicionar uma imagem que viu anteriormente para o banner inteiro. Basta escolher a opção certa para adicionar uma imagem e continuar.

Depois de adicionada, sua imagem aparecerá no centro do banner e você verá um pequeno menu com opções para definir a opacidade dessa imagem, sua rotação, invertê-la da maneira que precisar e aplicar filtros visuais sobre ela.

Para alterar o tamanho desta imagem adicional, você precisará arrastar os cantos da moldura, e sua imagem mudará de tamanho. Você também pode arrastar a imagem dentro das bordas do banner clicando e arrastando a imagem, bem como girá-la manualmente tocando no ponto acima da moldura.

Você adicionou sua imagem CTA para chamar a atenção. Agora, como tornar seu banner clicável? Tudo o que você precisa fazer é definir o link no campo correspondente e, depois de adicioná-lo, todo o seu banner se transformará em um grande botão CTA que transfere o destinatário para a página que você precisa.

Adicionando textos e ajustando-os

Se precisar de mais opções para decorar a imagem do seu banner, você pode adicionar texto sobre ela. Clique na opção Texto acima do seu banner.

O nó de texto aparecerá automaticamente no centro do seu banner e você verá uma guia com diferentes opções de texto.

Para digitar seu texto, basta clicar duas vezes no nó de texto para selecionar o texto padrão e digitar o novo.

Quanto às opções de ajuste, há uma grande variedade delas. Você pode alterar a posição, o tamanho e a rotação manualmente, arrastando os cantos do quadro do nó Texto ou arrastando o próprio nó inteiro, da mesma forma que fez com a imagem.

Quanto ao texto em si, você pode:

• selecionar a fonte, o tamanho e a cor do texto;
• escolher o alinhamento do texto;
• ajustar estilos como negrito, itálico, sublinhado ou riscado;
• alterar as letras para maiúsculas ou minúsculas;
• definir a opacidade, rotação e inverter o texto da maneira que você precisar.

Aqui está como fica nosso nó de texto depois que a maioria das opções foi aplicada. Ajuste os textos para atender às suas necessidades de design de e-mail com facilidade.

Conclusão

O tamanho certo do banner do e-mail manterá sua mensagem estruturada e chamará a atenção dos assinantes para os elementos centrais da sua mensagem. Agora que você sabe qual é a largura e a altura perfeitas para um banner de e-mail e entende como criar um com o Stripo, está tudo pronto para tornar sua próxima campanha um sucesso!