# Секция "Аккордеон"

Блок "Аккордеон" представляет собой удобное графическое решение для сайта в виде списка текстовых заметок с выпадающими элементами:

<figure><img src="/files/80FuwWshoHc1rWiZK1AM" alt="" width="563"><figcaption></figcaption></figure>

"Аккордеон" достаточно просто внедрить на сайт и настроить под собственные нужды: он может отлично вписаться под любые необходимые запросы. &#x20;

## Как добавить и настроить "Аккордеон"?

Чтобы добавить элемент в ваш сайт, перейдите в настройки сайта и нажмите плюс, чтобы открыть меню с доступными в Сейлбот секциями

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

Затем в открывшемся меню с секциями найдите блок "Аккордеон":

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

Далее вы увидите добавленный пустой блок, в котором необходимо настройки контент в виде карточек и вида самих карточек аккордеона:

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

## Настройка контента

Для начала добавим карточки контента, для чего необходимо кликнуть на кнопку "Контент", а затем добавить саму карточку, в которой будет лежать заголовок и соответственно текст:

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

В ваш контент добавилась пустая карточка,  в которую можно добавить текст-вопрос, изображение и текст-ответ:

<figure><img src="/files/Kjl2nPiX57KKRXXMNERO" alt="" width="563"><figcaption></figcaption></figure>

Для текстового элемента блока предусмотрены настройки, аналогичные настройкам любого текстового редактора: настройки жирности, курсива, подчеркивания, высоты и начертания шрифта, цвета и прочее. \
Чтобы применить к тексту его настройки, выделите необходимую часть текста и выберите текстовые настройки:

<figure><img src="/files/FKwXW20wZEqRJBcSp87J" alt="" width="563"><figcaption></figcaption></figure>

Далее прогрузите при необходимости изображение и добавьте уточняющий текст - ответ на вопрос:

<figure><img src="/files/oTCEfdzFJsXpNNGVMVaQ" alt="" width="563"><figcaption></figcaption></figure>

Можно добавить необходимое количество карточек контента:&#x20;

<figure><img src="/files/VUV8KraM6ZACEcoejZ2b" alt="" width="563"><figcaption></figcaption></figure>

## Кастомизация контента

После того, как вами было добавлено необходимое количество карточек контента, переходите в настройки контента:

<figure><img src="/files/etaCCHEA0AeG6RrDMPf5" alt="" width="327"><figcaption></figcaption></figure>

Далее можно выбрать чекбокс, чтобы была открыта первая карточка аккордеона или только одна из карточек:

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

Далее выберите настройку вертикального отступа между вопросами блока:

<figure><img src="/files/6GGU2ziqOwVqhCdvTxkL" alt=""><figcaption></figcaption></figure>

Также углы карточек можно скруглить с помощью данного поля, принимающего только числовые значения:

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

Текстовый элемент (как и кнопка) в карточке всегда находится посередине относительно верхнего и нижнего края. Чтобы выбрать необходимое расстояние, введите числовое значение в поле "Внутренний отступ сверху и снизу":

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

Также весь контент карточки (включая текст и кнопку для развертывания текста-ответа) находится посередине относительно правого и левого края. Чтобы настроить отступы слева и справа, воспользуйтесь полем "Внутренний отступ слева и справа":

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

Чтобы выбрать размер иконки, по нажатию на которую открывается текст-ответ, достаточно воспользоваться данным полем "Ширина иконки", который также принимает исключительно числовое значение:

<figure><img src="/files/uSf5Wsnp0IvGmEdI0reH" alt="" width="440"><figcaption></figcaption></figure>

Если внутри карточки изображение слишком большое, то можно выбрать его ширину, указав необходимое значение в поле "Ширина изображения":

<figure><img src="/files/8xl7RwcfgKbqv3xzuGu2" alt="" width="563"><figcaption></figcaption></figure>

Далее выберите цветовую палитру для каждого элемента своего аккордеона: текста, фона карточки, иконки и т.п.:

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

Теперь вы знаете, как устанавливать блок "Аккордеон" на свой сайт и настраивать контент внутри блока.&#x20;

## Кастомизация блока (секции): настройки шрифтов, фона и отображения

Для кастомизации блока "Аккордеон" вам понадобятся универсальные настройки секции (блоков), в которые входят настройки шрифтов, фона и отображения.

<figure><img src="/files/HnIgd9Lv2U9Vd5T3APtx" alt="" width="375"><figcaption></figcaption></figure>

Настройки секции (блока), а именно шрифтов, фона и отображения одинаковые для всех блоков.&#x20;

{% hint style="info" %}
Подробнее об универсальных настройках секций (блоков) сайта [читайте в одноименной статье.](broken://pages/oX6Y9RGmKT74x44vZ8gr)&#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.salebot.pro/websites/builder/sekcii-bloki/sekciya-akkordeon.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.