Banners

Resumo do Conteúdo

Os banners são uma forma comum de usar para fazer propagandas para divulgação ou chamar a atenção do visitante para alguma informação. É criado para atrair um usuário a um site ou página específica da loja virtual através de um link.

Como ter acesso às novas configurações de banners

Desde a atualização da plataforma (versão 4.26.84), o posicionamento dos banners começou a permitir o uso de TAGs. 

A tag poderá ser definida de forma customizada ou utilizando as pré-definidas de acordo com as posições dos banners.

Na listagem de banners, teremos a nova coluna relacionada às TAGs e também a possibilidade de filtragem por meio de TAGs, que irei explicar neste tutorial.

Antes de começar a gerenciar os seus banners de publicidade, é preciso ter um arquivo específico em sua loja virtual. Para isso, siga o seguinte tutorial:

Antes de começarmos é importante lembrar que toda a edição de banners é via código HTML. Você não deverá ter dificuldade em realizar as edições se seguir todos os passos deste tutorial. Entretanto, caso haja dúvidas, não hesite em entrar em contato com nosso setor de suporte.

Se o template da sua loja virtual é algum destes:

  • Boutique;
  • Secret;
  • Calçados;
  • Geek;
  • Magazine.

Acesse o painel administrativo da sua loja virtual e clique em “Layout >> Definir CSS (Folha de Estilos)”.

Cole o seguinte código na primeira linha da box “Global”:

@import url(‘https://cdn.iset.io/assets/54939/arquivos/css/banners_geral.css’);

Depois clique em “Salvar alterações”.

Se o template da sua loja virtual é algum destes:

  • Ranger;
  • Changeman;
  • Flashman;
  • Maskman;
  • Cybercop;
  • Loja Engrenada.

Acesse o painel administrativo da sua loja virtual e clique em “Layout >> Definir CSS (Folha de Estilos)”.

Cole o seguinte código na primeira linha da box “Global”:

@import url(‘https://cdn.iset.io/assets/54015/arquivos/css/banner_geral_boots3.css’);

Depois clique em “Salvar alterações”.

Depois disso, é preciso atualizar suas permissões de usuário, permitindo o acesso aos banners. Para isso, leia este tutorial especial sobre como editar as configurações de “Permissões de menu“.

Como gerenciar os banners

Para gerenciar os banners de publicidade da sua loja virtual, acesse o painel administrativo da sua loja virtual e clique em “Layout >> Banners”.

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

Na lista de banners, em “Grupos”, você pode ver o grupo de banners que foi filtrado.

Em “Marcações”, é possível ver as tags do banners, que irei explicar detalhadamente mais a frente neste tutorial.

Em “Cliques”, você pode ver o número de cliques que o banners possui.

Em “Vencimento” e “Agendado para”, é possível ver as datas configuradas para o banner.

Em “Status”, o sinal verde significa que o banner está ativo e o vermelho significa que ele foi desativado.

Em “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).

Adicionar um novo banner

Para adicionar um banner, clique na opção “+ Novo banner” disponível na tela de listagem dos banners. 

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.

Simples

No modo HTML, você poderá trocar a imagem de um banner de um modo bem simples.

Antes de tudo, vá em  “Ferramentas >> Gerenciador de arquivos” para que possamos subir a imagem desejada no sistema de sua loja virtual.

Uma nova página irá abrir, crie uma nova pasta para as suas imagens.

Dentro da pasta, clique no primeiro ícone na barra superior para fazer o upload da sua imagem.

Após colocar seus arquivos no servidor, basta voltar para a tela Novo banner”.

No modo “HTML“, basta rolar até a imagem e clicar duas vezes em cima dela.

Clique em “Localizar no Servidor” para selecionar a imagem que deseja.

Selecione a imagem desejada.

Clique em “Ok“.

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.

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.

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!

Para comprimir imagens em JPEG, clique aqui!

Depois disso, configure 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;
  • Animação de entrada: selecione a opção de animação de entrada;
  • Animação de saída: selecione a opção de animação de saída.

Outras configurações:

  • 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;
  • Categorias”: você pode selecionar em qual categoria o banner deverá ser exibido;
  • 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.

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

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;

  • 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;

  • Web: essa tag é usada apenas para banners posicionados abaixo do cabeçalho da loja virtual. Usando esta tag, é possível exibir o banner apenas para tablets, desktop, etc. Caso a loja seja acessada por um aparelho com a tela menor que a tela de um tablet, o banner é desativado;

  • 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;

  • Center_top: essa tag exibe o banner abaixo do cabeçalho da loja virtual e entre as colunas laterais;

  • Center_bottom: essa tag exibe o banner acima do rodapé da loja virtual e entre as colunas laterais;

  • Mini_banner_rodape: essa tag é muito importante para o bom funcionamento dos mini banners do rodapé;

  • Mini_banner_topo: essa tag é muito importante para o bom funcionamento dos mini banners do topo;

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

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

Este tutorial faz parte do changelog versão 4.26.84.

2 respostas
  1. Curso Terapia Capilar disse:

    Sou a Fernanda Da Silva, gostei muito do seu artigo tem
    muito conteúdo de valor parabéns nota 10 gostei muito.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *