> 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/modulos-de-imagem-e-texto.md).

# Módulos de Imagem e Texto

Você pode carregar os módulos que precisar, sem limite de quantidade.

Os módulos de imagem e texto podem ser usados para adicionar qualquer tipo de conteúdo à sua loja. Eles são frequentemente utilizados como prova social, exibindo imagens de influenciadores ou depoimentos mais visuais.

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FckZIjKCqoowaDx4P3hH4%2Fimage.png?alt=media&amp;token=91cc1e16-a0d8-4459-bc2c-b7ba40aa8000" alt=""><figcaption></figcaption></figure>

<details>

<summary><strong>Configurações iniciais</strong></summary>

* Usar a **mesma altura** para todos os módulos fará com que eles fiquem alinhados, mantendo a mesma altura entre si.
* Adicionar **sombra ao módulo** criará uma leve sombra no fundo, destacando o módulo visualmente.
* **Alinhamento do texto:** fará com que todos os textos do módulo se alinhem conforme a opção marcada.
* Em **título** e **subtítulo** você define os textos que ficaram acima da seção.

<div align="left"><figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FZ3P7YCpSTdpxuA3ih4N3%2Fimage.png?alt=media&amp;token=a2f0a30d-07f2-41ac-986c-09c07b8f07b8" alt=""><figcaption></figcaption></figure></div>

</details>

<details>

<summary><strong>Adicionando os módulos</strong></summary>

Em **'Selecionar imagem',** escolha as imagens que serão exibidas nos módulos. Para um visual mais harmonioso e organizado, recomenda-se que todas as imagens tenham as mesmas dimensões.

<div align="left"><figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FF2HyN4S6E7xTpYQIGtK7%2Fimage.png?alt=media&amp;token=9d07b456-20de-4b04-87d2-f213e1109954" alt=""><figcaption></figcaption></figure></div>

Depois de adicionar as imagens clique no ícone de "lápis" para adicionar os textos do módulo.

* **Link ao clicar na imagem:** defina a URL para a qual o cliente será direcionado ao clicar na imagem do módulo.
* **Título e descrição:** defina os textos que serão exibidos abaixo da imagem dentro do módulo.
* **Botão:** defina o texto que será exibido no botão.

<div align="left"><figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2Fba89DGrmNaUlFdFqPoe6%2Fimage.png?alt=media&amp;token=d56c66ae-56b1-49a7-b3da-c37f08f3019a" alt=""><figcaption></figcaption></figure></div>

Exemplo de módulo com e sem botão:

<div align="left"><figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2F9zP9JKoQj0I4TrspU7tn%2Fimage.png?alt=media&amp;token=e5b71093-7ec6-4889-bae8-fa38872af8d2" alt=""><figcaption></figcaption></figure></div>

</details>

<details>

<summary><strong>Exibição em computadores</strong></summary>

**Mostrar como:** você pode escolher entre carrossel (um ao lado do outro) ou grade (um abaixo do outro);

**Passar de forma automática quando for carrossel:** quando escolher a opção em carrossel você pode definir se os módulos passaram de forma automática ou manual.

**Quantidade de módulos por linha:** escolha quantos módulos ficaram exibidos por linha (um ao lado do outro).

<div align="left"><figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FuxtOyCNmv13UDdXfVWqB%2Fimage.png?alt=media&amp;token=f14641a2-f733-49d5-ad51-093122ad211d" alt=""><figcaption></figcaption></figure></div>

</details>

<details>

<summary><strong>Exibição em celulares</strong></summary>

**Mostrar como:** você pode escolher entre carrossel (um ao lado do outro) ou grade (um abaixo do outro);

**Passar de forma automática quando for carrossel:** quando escolher a opção em carrossel você pode definir se os módulos passaram de forma automática ou manual.

**Centralizar o módulo ao ser exibido como carrossel:** deixara o módulo no centro para manter o padrão e deixar harmônico.&#x20;

**Posição do texto**: Você pode escolher se ficará abaixo da imagem ou ao lado da imagem.

<div align="left"><figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2Fmv0FrozGF2KoqB8pzgQD%2Fimage.png?alt=media&amp;token=c8e4c5b6-8f09-4e8a-8024-ba30fdbb1c19" alt=""><figcaption></figcaption></figure></div>

</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:

<img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2F5c97QF2fPVykAmjVB96g%2Fimage.png?alt=media&amp;token=fe4c8cb8-bf0e-4ed4-850e-9c7496843a41" alt="" data-size="original">
{% endhint %}

Por último, clique em **"Publicar Alterações"** para finalizar.