04 agosto 2019

Tipos de Banners: Como criar um banner com o construtor de e-mails Stripo, em questão de minutos

Crie banner para e-mails
Índice
  1. Como construir um banner com Stripo
  2. Tipos comuns de banners:
  3. Teste seu e-mail
  4. Conclusão
1.
Como construir um banner com Stripo

Difícil imaginar um e-mail de newsletter moderno sem um banner. Você certamente já viu milhares de e-mails com banners bons e ruins.

Todos nós sabemos que um banner é o primeiro elemento que seus destinatários veem. Portanto, ele deve ser cativante, encantador e emocional.

Talvez você já saiba de qual banner precisa para suas futuras campanhas.

Mas será que é fácil construir um banner que realmente atenda a todos os seus requisitos?

Normalmente, você precisa encontrar uma imagem adequada ou tirar uma foto, editá-la com o Photoshop, colocar o texto sobre o banner e, em seguida, exportá-lo para um construtor de templates de e-mail que você usa e verificar se o banner fica adequado com todo o tipo de design de e-mail. Caso isso não aconteça e você precise fazer algumas alterações, mesmo que sejam leves, como adicionar uma vírgula extra ou diminuir o tamanho da fonte, você precisará voltar ao Photoshop e editar o banner novamente e em seguida, importá-lo para seu template de e-mail. É claro que ter acesso imediato ao Photoshop é muito útil, mas ainda assim é um processo complicado e demorado que causa muitos inconvenientes.

Stripo permite a construção de banners sofisticados de várias camadas desde o início, diretamente no editor em menos de 10 minutos:

Como fazer um banner atraente em minutos com Stripo

Se você escolher qualquer um de nossos templates prontos de e-mail para suas campanhas futuras, Stripo divide seu banner em camadas. Você pode editar e otimizar cada camada separadamente, sem sair do construtor. Isso economiza muito tempo. Editor de fotos embutido, capacidade de inserir texto sobre a imagem, muitas fontes decorativas, uma rica paleta de cores e um banco de imagens com milhares de imagens disponíveis - todas essas opções têm como objetivo facilitar significativamente o seu trabalho.

Ao criar um banner, você deve ter uma ideia de como ele deve ser e do que exatamente você precisa.

Vamos revisar alguns dos tipos de banners mais populares e mostrar como implementar facilmente suas ideias com a Stripo.

Como construir um banner com Stripo

Antes de prosseguir para os tipos de banners, vamos mostrar como fazer upload de imagens para seus e-mails e como adicionar um texto de cópia sobre elas nos templates de e-mail, pois você precisará delas para cada banner.

Arrastando bloco de banner para os e-mails

O primeiro passo é arrastar o bloco do banner para seu e-mail. 

Blocos-BannerVocê pode soltá-lo onde quiser em seu template. Mas normalmente os banners vão logo após o cabeçalho (logotipo) do seu e-mail.

Carregando imagens

Existem 4 maneiras de adicionar imagens aos seus e-mails com Stripo:

  • Soltar imagens na área de mesmo nome - para fazer isso, basta arrastar e soltar sua imagem nesta área ou clicar nela para fazer upload de imagens do seu computador.
  • Inserindo link externo - cole o link externo em uma imagem que termine em .jpg, .png.
  • Usando uma imagem do nosso banco de imagens - clique no ícone “banco” e escolha uma imagem de sua preferência entre milhares de imagens disponíveis gratuitamente.
  • Usando uma de suas campanhas anteriores - clique no ícone “e-mail” e selecione qualquer imagem que você usou anteriormente.

Template steps pt

Adicionando texto sobre imagens

Logo acima do template de e-mail HTML com o qual você está trabalhando, no painel de configurações, você verá o ícone “texto”.

  • clique nele para ativar. Coloque a área de texto onde quiser na imagem do banner;

Text on the banner pt 1

  • projete sua cópia - destaque uma determinada parte da cópia, defina o tipo e o tamanho da fonte e sua cor, etc.

image 456 pt

Importante notar:

Não hesite em usar qualquer fonte decorativa de sua preferência para banners. Não se preocupe! Elas serão consideradas um elemento de imagem pelos clientes de e-mail dos destinatários e serão exibidos da maneira que você planejou.

Carregando imagens adicionais

Depois de carregar sua imagem básica, no painel de configurações, você precisará ativar o botão Imagem Adicional. E carregue esta imagem da forma descrita acima no parágrafo “Carregando imagem”.

Foto adicional pt

Importante observar: 

Para colocar qualquer imagem adicional sobre o seu banner com recuos iguais em pelo menos três lados, você precisará usar nossa opção “manter foco na zona fixa”.

Sticky-Zones-Stripo-EditorNota: Basta inserir a imagem adicional, e o sistema recomenda onde colocar o logotipo. Segure a tecla “Shift” enquanto arrasta esta imagem sobre o banner. Depois de escolher o local onde deseja localizar a imagem - ela será destacada com uma linha sólida, basta soltar a tecla “Shift”. A opção “Manter foco na zona fixa” irá alinhá-la aos 3 lados. Dessa forma, seu e-mail ficará mais organizado.

Tipos comuns de banners:

  • Banners com imagem única e sua proposta de valor.
  • banners com duas imagens.
  • Banners com molduras.
  • Banners com um botão de CTA.
  • Banners com colagens de fotos.
  • Banners com imagens adicionais transparentes.
  • Banners com animações em GIF.
  • Banners com vídeos.
  • Banners com carrossel AMP.

1. Banners com imagem única e sua proposta de valor

Este é o tipo de banner mais comumente usado em e-mails promocionais.

O tipo de banner mais comumente usadoVocê o usa para anunciar uma promoção na loja inteira ou para promover um produto. Você que escolhe o uso desejado.

Muitas vezes, abaixo desses banners, as marcas adicionam cronômetros de contagem regressiva. 

2. Banners com duas imagens

Banner com duas imagens

Uma imagem colorida torna difícil escolher uma cor de fonte adequada para o texto sobre o banner. O uso de uma imagem branca adicional será adequado nesta situação. No exemplo a seguir, cobrimos metade do banner com uma imagem adicional e escrevemos nosso texto promocional sobre ela.

3. Banners com molduras.

As molduras são usadas para separar duas imagens em um banner ou para enfatizar a call-to-action do banner.

Você pode usar nossas molduras ou fazer upload das suas. Qualquer editor de fotos oferece muitas opções.

Ao fazer upload de molduras, você pode criar newsletters mais exclusivos. 

No entanto, fique atento: ao enviar uma imagem que já foi emoldurada com uma ferramenta de terceiros para o Stripo, você não poderá fazer nenhuma alteração no construtor de templates.

As molduras também são carregadas como imagens adicionais.

Veja estes dois banners: o primeiro sem moldura, o segundo com moldura preta.

Stripo-Banner-without-Frame

(banner sem molduras)

Stripo-Banner-with-a-Frame

(banner com moldura)

O primeiro banner parece moderno, mas você dificilmente prestará atenção à proposta de valor que eles oferecem, enquanto o segundo parece elegante, com ênfase no texto. As chances de você não notar a oferta são muito baixas.

4. Banners com um botão de CTA;

Banner com imagem sobre eleSeria difícil encontrar um e-mail da Forbes que não teria um Botão CTA sobre o banner. 

Mas a Forbes realmente adiciona um botão? Não. Eles carregam uma imagem do botão como imagem adicional e adicionam um link para o banner inteiro.

Não é mágica! Tudo é muito simples. Ainda assim, todos os e-mails da Forbes tem uma aparência elegante. 

5. Banners com colagens de fotos

Banner de colagem BrightonAqui você precisará trabalhar um pouco mais.

Este banner consiste em três estruturas / linhas de 3 colunas.

Adicionando-Estruturas-em-EmailsBasta adicioná-los ao seu e-mail, arrastar o bloco “Imagem” em cada container, fazer o upload da imagem para cada coluna / container separadamente. Edite essas imagens (para girá-las) com nosso editor de fotos.

Editar imagem ptEm vez da imagem do meio na segunda linha, você apenas adiciona seu texto. E é só isso :)

6. Banners com imagens adicionais transparentes

Qualquer design de newsletter requer uma boa dose de imaginação. Você pode adicionar o que você quiser. Também recomendamos adicionar imagens sazonais. Isso faria seu e-mail corresponder ao espírito das festas, por exemplo.

Neste template de Natal, decidimos usar um floco de neve transparente.

Floco de neveImagens transparentes ajudam você a fazer pequenas alterações em seu newsletter sem alterar o design como um todo.

Dê uma olhada nos dois exemplos abaixo e compare-os:

It-without-aa-Picture

(aquele sem imagens adicionais, mas com oferta de valor sobre o banner)

It-Transparent-Circle

(aquele com imagens adicionais, mas com oferta de valor sobre o banner)

É quase impossível ler a oferta do exemplo 1, pois o texto é colocado diretamente nos produtos que a empresa está promovendo.

Apenas um pequeno detalhe no exemplo 2, a camada transparente, facilita a leitura da oferta. E como bônus: você ainda pode ver os produtos que a empresa está anunciando.

7. Banners animados em GIF

Os banners animados por GIF dão um assunto complexo e já discutimos porque devemos usá-los em newsletters por e-mail. 

GIFs ajudam a chamar sua atenção para sua oferta de valor, para demonstrar um número maior de itens de produtos em uma tela.

Importante notar:

Mas para construir um banner animado, você precisará arrastar o bloco básico "Imagem" em seu template. Em seguida, faça o upload de seu GIF da mesma forma que você faz upload de imagens. No entanto, você não pode adicionar nenhum texto sobre eles.

8. Banners com vídeos

Video-BannersOs vídeos, quando usados corretamente, criam uma conexão emocional mais forte com os destinatários. Vídeos também são úteis quando sua oferta de valor é muito grande para ser expressa em texto, quando você precisa mostrar exatamente como usar sua ferramenta.

Os vídeos colocados na primeira tela servem como banners de e-mail.

Use-os nas suas campanhas de e-mail sempre que necessário. No nosso artigo "Como adicionar vídeo em e-mails”, mostramos como inserir vídeos nos seus e-mails com o Stripo, instantaneamente.

9. Banners com carrossel AMP

Experimente Stripo

Este tipo de banner é, na verdade, uma compilação de 3 a 16 banners colocados em uma só tela. E a necessidade dos usuários clicarem no botão “Slide” aumenta o engajamento e o faz interagir melhor com seu público.

A tecnologia AMP é a última tecnologia em marketing por e-mail. Tanto que as marcas só agora começam a se familiarizar com ela. Mas todas as conferências de e-mail e marketing digital deste ano discutem o uso de AMP nos e-mails. Isso significa que o AMP será amplamente difundido e comum muito em breve.

Seja um dos primeiros a implementá-lo em seus e-mails para surpreender seus destinatários. Eles se lembrarão de você porque os e-mails AMP ajudam você a se destacar entre os outros remetentes.

Não se preocupe! Você pode criar um e-mail AMP com Stripo em poucos minutos, sem precisar saber programar.

Todos os seus usuários do Gmail (e em breve Outlook e Yahoo) poderão ver esses banners.

Teste seu e-mail

Não importa que tipo de banner você está usando nas suas campanhas de e-mail, nós recomendamos fortemente que você visualize e teste seu e-mail com nossa ferramenta de teste incorporada antes de enviá-lo.

Conclusão

O banner é a primeira coisa que os clientes veem em um e-mail. Preste muita atenção ao criá-lo para deixar suas campanhas mais poderosas e eficazes.

Experimente Stripo

Este artigo foi útil?
Tell us your thoughts
Obrigado pelo seu feedback!
2 comentários
Vishnu Goyal há 3 anos
Thanks Rolenko for these great ideas on image-based banners. I'd love to know your thoughts on simple text-based banners and experiment with the same in my own emails. I know banner with images is a norm but I am looking forward to create just text-based emailers [writing-focused] and I think text-only banners will help.
Hanna Kuznietsova há 3 anos
Hello, Vishnu Goyal. Thank you for your question. Could you clarify what exactly you mean? Conversion, or ways to build those banners? Or are they easy/appropriate to use? Thank you... As for the way to build those banners, there are lots of tools on the web. As for their efficiency and conversion, we can't really say anything. Because, in order to provide you with accurate data on this subject, we'd need to run an A/B test a few times. But we prefer HTML and AMP HTML emails for our campaigns. So, we did not run those tests. Also, we did not find much info on this subject. But we wish you the best of luck and hope you'll find an answer to your question.
Tipo
Indústria
Estações
Integração
Editor da Stripo
Simplifique o processo de produção de e-mail.
Plug-in da Stripo
Integre o editor arrastar e soltar da Stripo ao seu aplicativo da web.
Solicite um modelo personalizado
Nossa equipe pode criá-lo e programá-lo para você. Basta preencher o briefing, e entraremos em contato com você em breve.

Editor da Stripo

Para equipes de marketing por e-mail e criadores solo.

Plug-in da Stripo

Para produtos que poderiam se beneficiar de um desenvolvedor de e-mails integrado de white-label.