> For the complete documentation index, see [llms.txt](https://ajuda.temaflex.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.temaflex.com.br/personalizar-layout/pagina-inicial/banners-rotativos.md).

# Banners rotativos

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.**.**
2. No menu lateral, clique em "**Página Inicial" > "Banners rotativos".**  

<figure><img src="/files/yz0zTMFgUVpTSab46B5s" alt=""><figcaption></figcaption></figure>

Nesta seção, você pode configurar:&#x20;

**- Usar estas cores:** para utilizar cores específicas, marque a opção **usar estas cores.**&#x20;

<figure><img src="/files/zDOtLukVxZcNghn1J26B" alt=""><figcaption></figcaption></figure>

Ao habilitar essa opção, você poderá configurar a cor de fundo da seção do banner.

<figure><img src="/files/5A5ftgrnH98lm5fS8C1b" alt=""><figcaption></figcaption></figure>

**- Aumentar a largura da tela:** aumenta o tamanho do banner para que o mesmo se estenda até as bordas da tela.

<figure><img src="/files/hSxoITwy7Qhrnx4vRGg8" alt=""><figcaption><p>Exemplo de banner rotativo em largura total</p></figcaption></figure>

**- Adicionar efeito de movimento às imagens:** habilita um efeito de zoom automático ao banner.&#x20;

<figure><img src="/files/ecSp17CFKWW7hej5nQyF" alt=""><figcaption></figcaption></figure>

**- Adicionar espaçamento em computadores:** habilita um espaçamento entre o menu de categorias e o banner rotativo.&#x20;

<figure><img src="/files/K7TuVXphu8ZbAK4b1EcQ" alt=""><figcaption></figcaption></figure>

**- Adicionar espaçamento em celulares:** habilita um espaçamento entre a barra de busca e o banner rotativo.&#x20;

<figure><img src="/files/qKibwTXBRs5zkP5oO0oo" alt=""><figcaption></figcaption></figure>

**- Alinhamento do texto:** caso seja configurado um texto dentro do banner, permite escolher se o mesmo será exibido na **Esquerda** ou **Centralizado.**&#x20;

<figure><img src="/files/k0JnY0tGAiNtSj9ltYW8" alt=""><figcaption></figcaption></figure>

**- Tempo de transição:** é o possível definir o tempo de transição dos banners em **4 segundos, 6 segundos, 8 segundos** ou **12 segundos.**&#x20;

<figure><img src="/files/zbdr3tCDWXQjnzsmZtQU" alt=""><figcaption></figcaption></figure>

**- Efeito ao passar:** permite definir o efeito de visualização do banner seguinte entre **Deslizar** ou **Passar.**&#x20;

<figure><img src="/files/cAJsHagubBvcrLiXD4s3" alt=""><figcaption></figcaption></figure>

Clique em **"Selecionar imagem",** procure e carregue a imagem. Lembrando que os formatos suportados pela plataforma são: **JPEG**, **GIF** e **PNG**.&#x20;

<figure><img src="/files/7gJjiieqgT3BQfHnDYxn" alt=""><figcaption></figcaption></figure>

Habilite a opção **''Carregar outras imagens para celulares''** para fazer o upload dos banners mobile.&#x20;

<figure><img src="/files/yub4138K892U9gwUysyq" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/mztWtUv9yHgH8ksBsrhe" alt=""><figcaption></figcaption></figure>

Após carregar as imagens dos banners é possível editar as informações dos banners rotativos.&#x20;

1. Clique no ícone de edição (lápis) localizado sobre a imagem do seu banner, para **configurar o link de direcionamento**, **título, descrição e botão**.

<figure><img src="/files/iSAs8ifjoCETyouhES98" alt=""><figcaption></figcaption></figure>

* **Link ao clicar na imagem:** adicione um link para levar os seus clientes a uma página específica quando clicam na imagem.
* **Título**: nome da sua marca, de alguma categoria da loja ou alguma palavra para informar os seus visitantes de promoções ou lançamentos.
* **Descrição:** você pode passar mais detalhes sobre o que quer informar naquele banner, como as características do seu produto, a porcentagem de desconto, etc.
* **Botão:** um texto curto que convide os seus clientes a clicar no botão, como "Comprar" ou "Ver mais".
* **Cor do texto**: escolha se a cor do texto do seu banner terá a mesma cor dos demais textos da sua loja ou se será igual a sua cor de fundo.&#x20;

<figure><img src="https://s3.amazonaws.com/helpjuice-static/helpjuice_production%2Fuploads%2Fupload%2Fimage%2F7634%2Fdirect%2F1623682149327-configurar+banners+rotativos+idea+bahia+amazona+cubo1.gif" alt=""><figcaption></figcaption></figure>

Caso adicione mais de 1 banner, aparecerá uma caixa de sugestão indicando que **arraste as imagens para organizá-las:**&#x20;

![](https://static.helpjuice.com/helpjuice_production/uploads/upload/image/7634/direct/1643231386953-banner%20rotativo%206.png)

Para isso, basta segurar o banner e arrastar para a posição desejada, igual o exemplo abaixo:

![](https://static.helpjuice.com/helpjuice_production/uploads/upload/image/7634/direct/1643231881968-banner%20rotativo%204.gif)

{% hint style="info" %}
Você poderá **adicionar quantos quiser**, porém, recomendamos que **não sejam adicionados mais do que cinco**, para não deixar sua loja "poluída". Para **remover um banner,** é só você clicar no ícone da **"lata de lixo".**
{% endhint %}

{% hint style="info" %}
O layout tem **medidas específicas de banners rotativos**. Portanto, lembre-se de incluir imagens seguindo os tamanhos recomendados de acordo com a versão estabelecida (desktop ou mobile) e informados no painel.
{% endhint %}

Por último, clique em **"Publicar Alterações"** para finalizar.

![](https://static.helpjuice.com/helpjuice_production/uploads/upload/image/7634/direct/1643232327031-1643232327031.png)

**Pronto! 🙌**<br>