# Banners em grade

{% embed url="<https://www.youtube.com/watch?index=19&list=PLjqZTg-KCmj8PNgm5YdN3Zk02OZeblrQU&v=2aoLnRvMDJ4>" %}

<figure><img src="/files/rvwfsESVhp9SjWIPsXzm" alt=""><figcaption><p>Exemplo de banners em grade (disposição 3)</p></figcaption></figure>

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

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

Habilite a opção ''**Usar estas cores para a seção''** para utilizar cores específicas.

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

Você pode configurar a **Cor de fundo** e a **Cor do texto** da seção.&#x20;

<figure><img src="/files/2O5dua1X0EzrjxnC7MX9" alt=""><figcaption></figcaption></figure>

Para configurar os **Banners em grade**, você deve se atentar aos tamanhos, pois os mesmos dependem da quantidade que deseja exibir.

<figure><img src="/files/YhjMiRs0gTdUFSVX7sEI" alt=""><figcaption><p>Escolha a quantidade para exibir as dimensões. </p></figcaption></figure>

Clique na quantidade de banners que deseja colocar para ser exibido as dimensões de cada banner de acordo com a sua composição.

Marque a caixa "**Mostrar banner**" para habilitar a sua exibição.

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

Clique em **''Selecionar imagem''** e faça o upload do banner que desejar.&#x20;

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

**- Título:** configure o título do banner.

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

**- Texto do botão:** configure o texto do botão.&#x20;

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

**- Link:** adicione um link para a seção.&#x20;

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

{% hint style="info" %}
É possível configurar até 4 banners diferentes.
{% endhint %}

{% hint style="warning" %}
**Importante**

Para que essa seção seja ativa na página inicial, é necessário que o módulo esteja habilitado como "visível" deixando o olho em azul:

![](https://ajuda.temaflex.com.br/~gitbook/image?url=https%3A%2F%2F2606432350-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FdmDGRqcCSJvlyHS2pQ1k%252Fuploads%252FFofkmrAEXWG3DCqxlS4J%252Fativo.png%3Falt%3Dmedia%26token%3Dabecbeec-5401-4a74-851d-875e2ff680de\&width=300\&dpr=4\&quality=100\&sign=fe0acf17\&sv=2)
{% 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! 🙌**


---

# 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-em-grade.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.