Olá Pessoal, neste artigo vou mostrar a vocês como usar todo o potencial do banner da sua loja Brasil na Web, o banner é uma das peças mais importantes do seu ecommerce, é aqui que vamos colocar nossas melhores ofertas e diferenciais para podermos vender, afinal o banner é a vitrine da sua loja 😉

1) Entendo a mecânica da ferramenta

O banner funciona com o conceito de camadas, como em programas de edição visual (photoshop, illsutrators, corel, etc…). A diferença é que temos um plano de fundo. E em cima dele vamos colocar nossos elementos.

De forma visual, tente imaginar o banner visto de lado, como a imagem abaixo:

Ou seja, temos uma plano de fundo e por cima dele vamos adicionar os elementos.

2) Diagrama do banner

Agora vamos mostrar uma imagem com algumas notas, e abaixo vamos comentar e exemplificar de como construir seu banner usando a mecânica de camadas citada acima. Antes de mais nada, este não é um artigo sobre como criar um banner, temos um vídeo só para isso, veja aqui.

Agora de uma olhada neste diagrama:

Depois de configurar o banner, como nome, efeito, link e etc… vamos primeiro colocar uma imagem de fundo (área vermelha do diagrama), esta imagem de fundo deve ser do tamanho do banner (saiba mais sobre tamanho do banner), basta selecionar por este grande Botão Laranja, em seguida podemos utilizar os ícones da esquerda para acrescentar imagem ou texto ao banner, neste exemplo do diagrama (área azul) criamos uma imagem com fundo transparente que simula um botão. Ainda, nesta área, podemos controlar o tipo de animação, tempo e posição dela no banner.

Ao acrescentar esta imagem ela vai para a área de Linha do Tempo (área laranja), aqui podemos controlar o tempo de exibição dela dentro do banner. Uma detalhe importante; note que na área ROXA temos o primeiro item que colocamos neste banner, e na área VERDE temos um espaço, este espaço é o tempo em que leva o a imagem de fundo (área vermelha) para poder “entrar” (fazer sua animação), por isso de forma automática o banner posiciona o primeiro item um pouco a frente a linha do tempo. Por isso deixe este espaço e trabalhe a entrada dos demais itens (imagens ou textos) na linah do tempo.

Para exemplificar este banner acima, acesse nossa loja de demostração de Lazer e Esportes, note que todos os itens do banner são imagens, temos o fundo, e depois os textos e botão que são imagens com fundo transparente.

Bom agora que já sabemos como funciona a mecânica do banner e como funciona de forma avançada cada item aqui, dê asas a suas criatividade. Se esta não é sua praia contate nossa equipe de Ninjas Designers para criar orçar excelentes banners para você. Abaixo vou deixar alguns links legais para que possa complementar seu estudo aqui:

1. Personalizando Banner
2. Tamanho do Banner na Loja
3. Criando um novo grupo de banner da loja
4. Mapa de posições da Loja

Espero ter ajuda e até mais!