# Banners promocionais

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

<figure><img src="/files/w4mtShBV5heINnX8vAxK" 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="/files/B3PZ3A8ZweToK1qmx3P4" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/2iMuWwQjFJ6iyfdZ5HFW" 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="/files/CJkO36QWA3peeom8xw3v" alt=""><figcaption></figcaption></figure>

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

<p align="center"><img src="/files/2iYhT7jozBZnyCcNqPDY" alt=""></p>

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

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

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

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

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

<p align="center"><img src="/files/oBrVR86OSh3QMdL2j0zv" 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="/files/558GPndaOm1s7PdjICeU" 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="/files/EElE5HUCogvuToTW9Rvd" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/UMmUu5hzpwvFntm7b7qw" 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="/files/3hm7SOVPf5EENnloel2C" 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="/files/sxKp1e7mWjwXPr17CmZF" 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="/files/BrwJWf3i75ujLoqC7bhN" 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]:


---

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