> 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-em-grade.md).

# Banners em grade

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

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FqfNtG00tXpMs9FZctfGv%2Fimage.png?alt=media&amp;token=6858516e-9c47-46e4-b487-824167f477a4" 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="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FBuXPYuaBGGcuQO0KL29x%2Fimage.png?alt=media&amp;token=027c2cdc-ceaf-4ac8-aa01-fa223cb365b7" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FRtbtq78dYrzdtrjsLCv1%2Fimage.png?alt=media&amp;token=c5e49d94-ac83-468d-959a-c36c3aed6043" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FfZDXQXOprkrtkJWsGb88%2Fimage.png?alt=media&amp;token=b32b6f1c-9117-4e03-848a-dcd0f3fa897a" 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="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2Fwf9tcvB5lxguJgjQsiGe%2Fimage.png?alt=media&amp;token=e91043de-32ca-4ae9-b344-22ed1239a1bc" 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="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FZEEUtwpYvMGwdZuemwRM%2Fimage.png?alt=media&amp;token=88dce349-3cf3-4e7f-a79b-f9ea33df0fdb" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FVWJeduOHpoMS5qk3PSaX%2Fimage.png?alt=media&amp;token=3caa86e5-8c9a-43f6-8542-6c53127fa018" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2F5RbOF5gpY0MjVn03I3a3%2Fimage.png?alt=media&amp;token=9c98a02b-d371-47df-96fe-9681694339b7" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FOcoiTdqIlB3dA3AAG3ln%2Fimage.png?alt=media&amp;token=04583521-f996-436d-bd8b-ed328fbf6762" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FVUY0GYkXUpbbegcGqby8%2Fimage.png?alt=media&amp;token=ac658ea3-7b7f-4519-ae49-e2125079c434" 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! 🙌**