> 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

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="/files/qOlYPpe2hPT6ctkVESWT" 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="/files/MOaRqunOWKbiDfZCnKpa" 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="/files/0ahqEWo2jMFRvAoirc8D" 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="/files/nD964VbsF63ROk3mf4cT" alt=""><figcaption></figcaption></figure></div>

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

<div align="left"><figure><img src="/files/05ZM9Qo6inuakQ1210FI" 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="/files/8d4ySAVkBDTzhEYHQsjR" 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="/files/zanqMfbZfZxCBp8fLdqu" 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="/files/otJskBpXKQwPk5PkUYPo" alt="" data-size="original">
{% endhint %}

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