# Banners

Banners são ferramentas amplamente utilizadas em publicidade para destacar informações e captar a atenção dos visitantes. 

\
Eles são projetados para direcionar o usuário a uma página específica de um site ou loja virtual por meio de um link.

\
Neste tutorial você irá aprender sobre como realizar todas as configurações nos banners da sua loja virtual, vamos lá? 

### **Como gerenciar os banners?** 

\
1- Para gerenciar os banners de publicidade da sua loja virtual, acesse o painel administrativo da sua loja virtual e clique em **Personalização >>Banners**.

![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FWsmfUncnopElVXxdY2sX%2F0.jpeg?alt=media)

\
2- Nesse painel você verá a lista de banners existentes e em frente a cada banner existem algumas possíveis ações a serem realizadas. 

![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FozIADOYdJcYK4LAe0558%2F1.jpeg?alt=media)

\
3- Na lista de banners, em **Grupos,** você pode ver o grupo de banners que foi filtrado.

* **Marcações**, é possível ver as Tags do banners, que irei explicar detalhadamente mais a frente neste tutorial;
* **Cliques**, você pode ver o número de cliques que o banners possui;
* **Vencimento** e **Agendado para**, é possível ver as datas configuradas para o banner;
* **Status**, o sinal verde significa que o banner está ativo e o vermelho significa que ele foi desativado;
* **Ações**, você pode **editar** (clicando no lápis amarelo), **excluir** (clicando no botão vermelho) e **ver as estatísticas do banner** (clicando no botão branco).

### **Como adicionar um novo banner?**

\
1- Para adicionar um banner, clique na opção **+ Novo banner** disponível na tela de listagem dos banners. 

![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2Fn7JXVP50mUGOT3OzDlm5%2F2.jpeg?alt=media)

\
2- Após clicar em novo banner **defina as configurações** do banner através dos campos abaixo:

* **Título do banner**: defina o título do banner;
* **Grupo do banner**: utilizado apenas para categorização do registro. É possível selecionar uma opção existente ou criar uma nova.

![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FOAtf9KA9nBoCEXSPbFnn%2F3.jpeg?alt=media)

#### **HTML**

\
No modo **HTML**, você poderá inserir um código em **HTML** para colocar um banner em flash ou pop up em sua loja. Caso use este campo, os campos referentes à imagem e links informados serão desconsiderados.

![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FPvT96TZHT7TRkHgJCyOl%2F4.jpeg?alt=media)

#### **Carrossel**

\
No modo **Carrossel**, você pode definir imagens e/ou vídeos para exibição no banner que será mostrado no estilo carrossel, podendo também ser totalmente customizado via **CSS**.

\
1- Para adicionar as imagens, clique em **Adicionar imagem** ou jogue a imagem no espaço embaixo.

\
É recomendado que as dimensões das imagens estejam **proporcionalmente 3 vezes maiores** para que a **qualidade seja mantida.** Caso o arquivo fique muito pesado, é possível utilizar um **compressor de imagens online.**

\
Para comprimir imagens em PNG, **clique** [aqui](https://compresspng.com/)**!**

\
Para comprimir imagens em JPEG, **clique** [aqui](https://compressjpeg.com/)**!**

![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FWQ0cEarkLb7V2cdxp170%2F5.jpeg?alt=media)

\
2- Depois disso, é preciso configurar as seguintes opções:

* **Reprodução automática: defina se deseja que a reprodução do banner rotativo deve ser automática ou não;**
* **Loop infinito**: duplica a última e a primeira imagem dando a impressão de loop infinito;
* **Setas de navegação**: exibe os botões de navegação esquerda/direita no banner;
* **Pontos de navegação**: exibe os botões de navegação;
* **Itens visíveis**: número de imagens visíveis ao mesmo tempo no banner;
* **Tempo de transição**: tempo de espera (em segundos) para transação de uma imagem para outra no banner;
* **Velocidade de transição**: define a velocidade do efeito de transição (em milisegundos) de uma imagem para outra;
* **Tipo**: esta opção altera o tipo de efeito utilizado nas transições das imagens em seu banner.

![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2Fw2ExEHzstCxQJn4Zk6BV%2F6.jpeg?alt=media)

### **Agendamento**

* **Programado para**: se uma programação foi definida, o banner será ativado na data informada. Todos os banners programados são marcados como desativados até que a data informada tenha chegado e então serão marcados automaticamente como ativos;
* **Expira em:** se não desejar que o banner expire automaticamente em uma data específica, deixe o campo em branco.

![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FDTEC06nKhbL4rbbTXUY6%2F7.jpeg?alt=media)

### **Exibir em uma ou mais categorias**

\
Neste campo é possível escolher em qual categoria o banner deverá ser exibido, caso seja definido para exibir na Página Principal, o banner será exibido apenas na pagina de entrada da loja conforme posição definida.

![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FdviuYVxUMrobOspTah1t%2F8.jpeg?alt=media)

### **Referenciamento do banner**

* **Posicionamento do Banner**: define o posicionamento na tela do banner;
* **Tags/Keywords**: se quiser, é possível criar tags para os seus banners. Porém, a principal função das tags é selecionar onde o banner irá aparecer na loja virtual.

![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FrXWRMkIsC5evjdowGczy%2F9.jpeg?alt=media)

\
1- Após terminar as configurações você pode clicar em **Inserir**. Se estiver editando um banner, clique em **Salvar & manter edição** ou **Atualizar**.

![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FjUFcwDkmwRVuS7LEnfhc%2F10.jpeg?alt=media)

### **As Tags/Keywords**

\
Para usar as configurações dos banners da melhor maneira possível é preciso entender um pouco como as tags funcionam!

* **billboard: essa tag é usada para banners posicionados abaixo do cabeçalho da loja virtual, em qualquer página, como páginas de produtos ou categorias;**

![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FRrR6aLp1l7jpRviLuNDg%2F11.gif?alt=media)

* **billboard\_home**: essa tag é usada para banners posicionados abaixo do cabeçalho da loja virtual, assim como na tag Billboard. Porém, o banner só será exibido na página inicial da loja virtual;

![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2Fhz3FsCV8M5q2Z73kdyKl%2F12.gif?alt=media)

* **mobile**: essa tag é usada apenas para banners posicionados abaixo do cabeçalho da loja virtual. Usando esta tag, é possível exibir o banner apenas em telas pequenas, como as de celulares. Caso a loja seja acessada por um aparelho com a tela maior que a tela de um celular, o banner é desativado;

![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FB4j45bBpEr89ZRjHyZsv%2F13.gif?alt=media)

* **center\_top:** essa tag exibe o banner abaixo do cabeçalho da loja virtual e entre as colunas laterais;

![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2F5VVtUVvbRChS4YDIJyl7%2F14.gif?alt=media)

* **center\_bottom:** essa tag exibe o banner acima do rodapé da loja virtual e entre as colunas laterais;

![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2Fi7E3nq6Ix4JEIHWIck2B%2F15.gif?alt=media)

* **footer:** essa tag exibe o banner acima do rodapé da loja virtual e embaixo das colunas laterais, fora das estrutura da loja;

![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FZaqNiT6lalFtbMbfjR3Q%2F16.gif?alt=media)

* **desktop:** usando essa tag, é possível deixar de exibir o banner apenas para telas pequenas, como celulares.

![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FXGGLowU6Ga08s6Ql1DKE%2F17.jpeg?alt=media)

\
Ficou com alguma dúvida? Entre em contato através do nosso chat online.