# 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ajuda.temaflex.com.br/personalizar-layout/pagina-inicial/banners-rotativos.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.