> For the complete documentation index, see [llms.txt](https://ajuda.toplojas.com.br/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ajuda.toplojas.com.br/banners/configurando-banners/banners-de-slide.md).

# Banners de Slide

Normalmente as lojas possuem um ou mais banners de slide, que são banners onde a imagem muda automaticamente a cada tempo determinado.

**Exemplo:**

![](https://3873222052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M8H19OxR4N0phXKpriO%2Fuploads%2Fgit-blob-7ee0bfa25af0f433416bdf73cfcfd04f488f59bb%2F2020-05-27_08h50_38.gif?alt=media)

Estes banners são implantados pelo **Suporte da Web4Business** nas posições do site onde o cliente desejar, normalmente ficam no **topo da capa**.

## Gerenciando imagens de um Sliders

Clique em "**Marketing- > Banners de Slide**", ao abrir a janela o sistema irá exibir os **SLIDERS** criados pelo Suporte da Web4Business.

Para gerenciar as imagens de um destes slides, clique em cima dela:

![](https://3873222052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M8H19OxR4N0phXKpriO%2Fuploads%2Fgit-blob-cacc733ac6cbac8a2db9ff4a3c4eac56eee5f851%2F2020-05-27_08h53_20.png?alt=media)

Ao abrir um dos slides você poderá g**erenciar todas as&#x20;*****imagens*** dentro deste slide:

![](https://3873222052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M8H19OxR4N0phXKpriO%2Fuploads%2Fgit-blob-92b361737ddb1df5fd861c1feb5bd33b44cf8713%2F2020-05-27_08h54_35.png?alt=media)

## Inserindo imagem em um Slider

Dentro da edição do sliders, clique no "**+**" para que seja **aberto um novo espaço** para adicionar um novo banners:

![](https://3873222052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M8H19OxR4N0phXKpriO%2Fuploads%2Fgit-blob-fb091a2c64a9f86793e1e7cc72daa5b315f0d030%2F2020-05-27_08h55_27.png?alt=media)

Ao clicar no "**+**" será aberto um novo espaço, para adicionar um novo banners, ao **final dos banners atuais**:

![](https://3873222052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M8H19OxR4N0phXKpriO%2Fuploads%2Fgit-blob-a7377f944ea459e66298236b4dcb4e69f71ddeae%2F2020-05-27_08h55_50.png?alt=media)

**É necessário preencher alguns campos:**

* **Nome:** Preencha um nome para identificar o banner (*Sempre preencha um nome, sem um novo o cadastro do banner, dentro do slider, não será completado*)
* **Link:** Caso seja preenchido, o cliente será direcionado a este link ao clicar em cima deste banner
* **Ordem:** Permite indicar a ordenação deste banner dentro deste slide
* **Imagem:** Selecione o banner que desejas adicionar

Os outros campos não precisam ser preenchidos, eles são reservados para banners criados de formas customizadas.

Após preencher os campos acima, clique em "**Salvar**":

<div align="left"><img src="https://3873222052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M8H19OxR4N0phXKpriO%2Fuploads%2Fgit-blob-be5e0dce8a336251ebe33e39488320a2935a5205%2F2020-05-27_08h58_22.png?alt=media" alt=""></div>

## Removendo imagem de um Slider

Dentro da edição do sliders, clique no "**-**" para que seja removido o banners:

![](https://3873222052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M8H19OxR4N0phXKpriO%2Fuploads%2Fgit-blob-d586ce09e32406799c8294a5b25b8a5282282771%2F2020-05-27_08h59_18.png?alt=media)

Após clicar no "**-**", clique em "**Salvar**", para que as modificações sejam aplicadas:

<div align="left"><img src="https://3873222052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M8H19OxR4N0phXKpriO%2Fuploads%2Fgit-blob-be5e0dce8a336251ebe33e39488320a2935a5205%2F2020-05-27_08h58_22.png?alt=media" alt=""></div>

## Dúvidas Frequentes

### Qual o tamanho do banner?

Você pode identificar o tamanho do banner através do campo Largura/Altura:

![](https://3873222052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M8H19OxR4N0phXKpriO%2Fuploads%2Fgit-blob-6b2f9eda2c281ef91f66c582db883099a4b8d543%2F2020-05-27_09h03_06.png?alt=media)

{% hint style="info" %}
É importante não modificar estes campos;
{% endhint %}

### Minha loja é responsiva, porém o banner está cortando os textos em dispositivos mobile:

O banner responsivo possui uma especificação que precisa ser seguida para seu funcionamento perfeito, todos os textos do banner precisam ficar nos 1170px centrais para não serem cortados:

![](https://3873222052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M8H19OxR4N0phXKpriO%2Fuploads%2Fgit-blob-45e9d005079e890257a1f602a556bed6e3ff7879%2Fmodelo_banner_full_width.jpg?alt=media)

Todo o espaço lateral é reservado para o Fundo do Banner.

Exemplos:

![](https://3873222052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M8H19OxR4N0phXKpriO%2Fuploads%2Fgit-blob-612be2d8c108623a6356eb02876321ef6a74f515%2F2020-05-27_09h05_45.png?alt=media)

![](https://3873222052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M8H19OxR4N0phXKpriO%2Fuploads%2Fgit-blob-152e0b861bb7cc0e41fc3fa2a99b1462d776ba11%2F2020-05-27_09h05_51.png?alt=media)

### Quero um novo Sliders em outra posição da Loja:

Abra um chamado em nossa central e solicite a criação da nova posição:

{% embed url="<http://portaldocliente.web4business.com.br/>" %}

Neste chamado inclua as informações:

* Local onde desejas o sliders
* Altura estimada dos banners utilizados

### Alterei o campo "Duração" porém não teve efeito:

Este campo é utilizado apenas em banners customizados, caso desejar alterar o tempo entre as transições de banners, abra um chamado em nossa central:

{% embed url="<http://portaldocliente.web4business.com.br/>" %}

### Quais os formatos aceitos:

O recomendado é JPG por ser mais leve, porém pode ser utilizado também outros formatos:

* JPG
* GIF
* PNG

### Qual o tamanho limite de um banner:

O recomendo é até 100 kb, maior que este tamanho irá começar a afetar a velocidade da loja

### Após o cadastro de um banner, dentro do sliders, o site ficou lento:

Isto ocorre quando a imagem é muito pesada, é recomendado salvar a imagem em uma qualidade mais baixa deixando ela mais leve.

Também é possível utilizar o site abaixo para "Comprimir" a imagem:

{% embed url="<https://kraken.io/web-interface>" %}

### Criei um novo sliders porém ele não está sendo exibido:

Os sliders precisam ser criados pelo Suporte da Web4Business, para que sejam cridos, abra um chamado em nossa central e solicite a criação do novo sliders:

{% embed url="<http://portaldocliente.web4business.com.br/>" %}

Neste chamado inclua as informações:

* Local onde desejas o sliders
* Altura estimada dos banners utilizados

### Adicionei uma imagem porém ele ficou gigante:

Isto ocorre quando o tamanho da imagem está diferente do tamanho que o banner requer, é necessário enviar o tamanho exato do banner para que seja exibido corretamente.

### Em minha loja não está sendo exibido nenhum sliders em "Marketing- > Banners de Slide":

Isto indica que sua loja não utiliza esta modalidade de banners, você pode abrir um chamado para nosso suporte criar um sliders para sua loja.

### Deletei o Sliders e não consigo mais recuperar ele:

Abra um chamado em nossa central para nossa equipe recuperar o sliders:

<http://portaldocliente.web4business.com.br/>
