# Seção de acordeão

O bloco Accordion é uma solução gráfica conveniente para um site na forma de uma lista de notas de texto com elementos suspensos:

“Accordion” é fácil de incorporar em um site e personalizar de acordo com suas próprias necessidades: ele pode atender perfeitamente a qualquer solicitação necessária.

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

## Como adicionar e configurar “Accordion”?

Para adicionar um item ao seu site, vá até as configurações do site e clique no sinal de mais para abrir o menu com as seções disponíveis no Salebot.

<figure><img src="/files/59c23b34f4ec16e37be32ad16d52501041f5c28b" alt=""><figcaption></figcaption></figure>

Depois, no menu de seções que se abrir, encontre o bloco "Accordion".

Em seguida, você verá um bloco vazio adicionado, no qual será necessário configurar o conteúdo na forma de cartões e o tipo dos próprios cartões do accordion:

<figure><img src="/files/2b2caf7b2a913deb0877d4758c2460e462c0beb1" alt=""><figcaption></figcaption></figure>

## Configurações de conteúdo

Primeiro, vamos adicionar cartões de conteúdo, para os quais você precisa clicar no botão "Conteúdo" e, em seguida, adicionar o próprio cartão, que conterá o título e, consequentemente, o texto:

<figure><img src="/files/8e9e522ee7a9091133578bc73685e2265baef2a2" alt=""><figcaption></figcaption></figure>

Um cartão vazio foi adicionado ao seu conteúdo, onde você pode adicionar um texto de pergunta, uma imagem e um texto de resposta:

<figure><img src="/files/95f6677e6884217c49aa58fe6ad937d283afa6f2" alt=""><figcaption></figcaption></figure>

O elemento de texto do bloco tem configurações semelhantes às de qualquer editor de texto: configurações de negrito, itálico, sublinhado, altura da fonte e contorno da fonte, cor e muito mais.&#x20;

Para aplicar suas configurações a um texto, selecione a parte necessária do texto e escolha as configurações de texto<br>

<figure><img src="/files/42edfedcefe29985707493a74943f5841bffc993" alt=""><figcaption></figcaption></figure>

Em seguida, envie uma imagem, se necessário, e adicione um texto explicativo - a resposta para a pergunta:

<figure><img src="/files/84f6c5bf4744f537a8607bf8a39dcd25e5fafde4" alt=""><figcaption></figcaption></figure>

Você pode adicionar a quantidade necessária de cartões de conteúdo.

## Personalização do conteúdo

Depois de adicionar a quantidade necessária de cartões de conteúdo, vá para as configurações de conteúdo:

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

Em seguida, você pode marcar uma caixa de seleção para que o primeiro cartão do accordion ou apenas um dos cartões fique aberto.

Selecione a configuração de margem vertical entre as perguntas no bloco:

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

Você também pode arredondar os cantos dos cartões usando este campo, que aceita apenas valores numéricos:

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

O elemento de texto (assim como o botão) no cartão fica sempre centralizado em relação às bordas superior e inferior. Para definir a distância necessária, insira um valor numérico no campo "Padding interno na parte superior e inferior":

<figure><img src="/files/393cb386b2a503f98d38b15d10f9a1e6e8c3937e" alt=""><figcaption></figcaption></figure>

Além disso, todo o conteúdo do cartão (incluindo o texto e o botão para expandir o texto da resposta) fica centralizado em relação às bordas direita e esquerda. Para ajustar o padding à esquerda e à direita, use o campo "Padding interno à esquerda e à direita":

<figure><img src="/files/38aafe28a5bf925bbcd9c9fb01a2952b2dba2b6e" alt=""><figcaption></figcaption></figure>

Para selecionar o tamanho do ícone que abre o texto da resposta, basta usar este campo "Largura do ícone", que também aceita exclusivamente um valor numérico:

<figure><img src="/files/3d78c0274d342d098333bd4ccbcfa717acd90fed" alt=""><figcaption></figcaption></figure>

Se a imagem dentro do cartão estiver muito grande, você pode selecionar sua largura especificando o valor necessário no campo "Largura da imagem":

<figure><img src="/files/3c16c638143fa64a640f39cbac419a5a10d4f0e9" alt=""><figcaption></figcaption></figure>

Em seguida, selecione uma paleta de cores para cada elemento do seu accordion: texto, fundo do cartão, ícone etc.:

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfKEyYkboD6oWWhNptq6-ZQmr-_De9gc7i2_vg3qiNZXUcHQeC5ssYMpgcnnlIMrrG_dp6Uttgmzd6tYQ73PyFQPtzqAB-xyiCkk4mGRKD_GVhWHz6PhYZjP0i1s7He4b-zorhz1w?key=GhZKz5_ynA-V2Mz8EctHIQ" alt=""><figcaption></figcaption></figure>

Agora você sabe como instalar o bloco "Accordion" no seu site e personalizar o conteúdo dentro do bloco.<br>

## Personalização do bloco (seção): fonte, fundo e configurações de exibição

Para personalizar o bloco “Accordion”, você precisará das configurações universais da seção (blocos), que incluem configurações de fonte, fundo e exibição.

<figure><img src="/files/68ddf539d2d17c6452cf11d271fd0f7e20c5b82e" alt=""><figcaption></figcaption></figure>

As configurações da seção (bloco), ou seja, fontes, fundo e exibição, são as mesmas para todos os blocos.

{% hint style="info" %}
[Leia mais sobre as configurações universais das seções (blocos) do site no artigo](/doc/pt/websites/sites/blocks/settings.md)&#x20;
{% endhint %}


---

# 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://docs.mavibot.ai/doc/pt/websites/sites/blocks/accordion.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.