> 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-promocionais.md).

# Banners promocionais

Os banners promocionais é uma ferramenta bastante útil, que permite divulgar as promoções e descontos da sua loja virtual de forma fácil e profissional.

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

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FSHnphXPuuHBCc3iEzvdY%2Fimage.png?alt=media&amp;token=58c39882-5bee-458f-bfdc-57a9786d86aa" alt=""><figcaption><p>Exemplo de banners promocionais.</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 promocionais"**.&#x20;

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FZHofPvoHzkVmXsIGwA4f%2Fimage.png?alt=media&amp;token=7e6adf3f-5c33-4c94-8c66-bed07a576c66" 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%2FXHSYbzMeKbgb0I461ERG%2Fimage.png?alt=media&amp;token=75108311-d76d-4832-b732-bc8235d56611" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FVEfWVTgRpPhakM1hd65O%2Fimage.png?alt=media&amp;token=ed158a00-d946-4f25-87a8-6aabd04ecd6e" alt=""><figcaption></figcaption></figure>

\- **Intensidade da sobreposição:** defina a intensidade da cor da sobreposição.&#x20;

<p align="center"><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2F9NNUMb7BHCHU377yUUnm%2Fimage.png?alt=media&amp;token=ee25e289-24dc-46d5-80cb-1626c11fc7d0" alt=""></p>

**- Exibir texto fora da imagem:** faz com que o texto cadastrado seja aplicado fora da imagem.&#x20;

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FckDE7KIdgKS6yQPv2yAO%2Fimage.png?alt=media&amp;token=ad139209-bb5c-40d6-9ab7-b5cf6dd9033e" alt=""><figcaption></figcaption></figure>

**- Remover espaços entre os banners:** remove o espaçamento entre um banner e outro.&#x20;

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FBE4ABnjYkXCBMbFeaLWU%2Fimage.png?alt=media&amp;token=5dfe853d-ad31-4f25-b5e2-c50dd71bdc8b" alt=""><figcaption></figcaption></figure>

**- Alinhamento do texto:** permite definir o alinhamento do texto em **Esquerda** ou **Centralizado.**

<p align="center"><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2F7Gwi2APAOHDh7OtSfgcK%2Fimage.png?alt=media&amp;token=6d4a059a-5a6d-4cc6-b167-896ec0457d06" alt=""></p>

{% hint style="info" %}
Para que essa opção funcione, é necessário ter um texto cadastrado dentro da imagem via Tema Flex.&#x20;
{% endhint %}

**-** Título para os banners promocionais: adicione um titulo a seção que ficará acima dos banners.

<details>

<summary><strong>Imagens para computadores</strong></summary>

**Mostrar como:** você pode definir entre grade e carrossel a disposição dos banners no desktop.

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2Fzoj9i2MXzyluKFqN02As%2Fimage.png?alt=media&amp;token=93fec558-6126-4f35-8fb0-443a54ae717d" alt=""><figcaption></figcaption></figure>

**Exibição de banners em computadores:** você pode definir quantos banners por linha serão exibidos no computador.&#x20;

[***OBS: Quanto mais banners por linha menor será a exibição dos banners.***](#user-content-fn-1)[^1]

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FHACkHeHE27xDLa5j7gCc%2Fimage.png?alt=media&amp;token=298c5692-2d52-472b-b116-73d900154292" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2Fb9ecHlyejszGJqwidDDJ%2Fimage.png?alt=media&amp;token=4efa00d3-df4e-4520-b02f-552a1674571f" alt=""><figcaption></figcaption></figure>

Clique no **ícone de lápis** na imagem e configure o **Link**, **Título, Descrição, Botão** e **Cor.**&#x20;

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FyjfTGfiSDRBn5e1kRzqi%2Fimage.png?alt=media&amp;token=c72c2bdf-9ee0-4253-9305-6433bf2836f6" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary><strong>Imagens para celulares</strong></summary>

**Mostrar como:** você pode definir entre grade e carrossel a disposição dos banners no mobile.

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FBKg2g8S7BQCeDvSEVpJa%2Fimage.png?alt=media&amp;token=9f82e170-9c84-41db-9473-dfde4222ec4c" alt=""><figcaption></figcaption></figure>

Marque a opção **'Carregar outras imagens para celular''** para habilitar o campo de adição das imagens pro mobile.

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2F3ozejkhaJ38N1IcKAiE5%2Fimage.png?alt=media&amp;token=5165b1b6-32d4-48d9-90c6-6891927c8fa3" alt=""><figcaption></figcaption></figure>

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

Clique no **ícone de lápis** na imagem e configure o **Link**, **Título, Descrição, Botão** e **Cor.**&#x20;

</details>

{% 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/1643317524355-1643317524355.png)

**Pronto! 🙌**&#x20;

[^1]: