# Розділ акордеона

Блок Accordion — це зручне графічне рішення для вебсайту у вигляді списку текстових нотаток із випадаючими елементами:

«Accordion» досить легко вбудувати на вебсайт і налаштувати під власні потреби: він чудово підходить для будь-яких необхідних запитів.

<figure><img src="/files/026377de8f92be7f53f217227328c92de4c07f63" alt=""><figcaption></figcaption></figure>

## Як додати та налаштувати «Accordion»?

Щоб додати елемент на свій сайт, перейдіть у налаштування сайту та натисніть плюс, щоб відкрити меню з розділами, доступними в Salebot.

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

Потім у меню розділів, що відкриється, знайдіть блок «Accordion».

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

<figure><img src="/files/0b6d9155a6a138d4be7014929d0372f46e273409" alt=""><figcaption></figcaption></figure>

## Налаштування вмісту

Спочатку ми додамо картки вмісту, для чого потрібно натиснути кнопку «Вміст», а потім додати саму картку, яка міститиме заголовок і, відповідно, текст:

<figure><img src="/files/9d619aa32faf09b8ba39fab8c2aa9c8bd2ba3676" alt=""><figcaption></figcaption></figure>

До вашого вмісту було додано порожню картку, де ви можете додати текст запитання, зображення та текст відповіді:

<figure><img src="/files/94ed4114816e7b40f9d364c1f9e030b629ae98dd" alt=""><figcaption></figcaption></figure>

Текстовий елемент блоку має налаштування, подібні до будь-якого текстового редактора: налаштування жирності, курсиву, підкреслення, висоти шрифту та контуру шрифту, кольору тощо.&#x20;

Щоб застосувати його налаштування до тексту, виділіть потрібну частину тексту та виберіть налаштування тексту<br>

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

Далі завантажте зображення, якщо це необхідно, і додайте уточнювальний текст — відповідь на запитання:

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

Ви можете додати потрібну кількість карток вмісту.

## Налаштування вмісту

Після додавання потрібної кількості карток вмісту перейдіть до налаштувань вмісту:

<figure><img src="/files/49a79646bbe33081de9c506ace8a6006bac83e35" alt=""><figcaption></figcaption></figure>

Далі ви можете встановити прапорець, щоб була відкрита перша картка акордеона або лише одна з карток.

Виберіть налаштування вертикального відступу між запитаннями в блоці:

<figure><img src="/files/3459306954cb087a52e68f3071857e5f91c9f3e8" alt=""><figcaption></figcaption></figure>

Також ви можете округлити кути карток за допомогою цього поля, яке приймає лише числові значення:

<figure><img src="/files/39bcfbd552441294e58c47c56ed9302a4158f227" alt=""><figcaption></figcaption></figure>

Текстовий елемент (так само, як і кнопка) у картці завжди розташований по центру відносно верхнього та нижнього країв. Щоб вибрати потрібну відстань, введіть числове значення в поле «Внутрішній відступ зверху і знизу»:

<figure><img src="/files/0483c6779336e7a879875cab14c02b4f998eaafa" alt=""><figcaption></figcaption></figure>

Також увесь вміст картки (включно з текстом і кнопкою для розгортання тексту відповіді) розташований по центру відносно правого та лівого країв. Щоб налаштувати відступи ліворуч і праворуч, скористайтеся полем «Внутрішній відступ ліворуч і праворуч»:

<figure><img src="/files/17f859449f29299414e1c8f42b5e9213bb81b1d4" alt=""><figcaption></figcaption></figure>

Щоб вибрати розмір іконки, яка відкриває текст відповіді, просто скористайтеся цим полем «Ширина іконки», яке також приймає виключно числове значення:

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

Якщо зображення всередині картки занадто велике, ви можете вибрати його ширину, вказавши потрібне значення в полі «Ширина зображення»:

<figure><img src="/files/9b805c3a503ffe874215a2fe84b171e4e422507e" alt=""><figcaption></figcaption></figure>

Далі виберіть кольорову палітру для кожного елемента вашого акордеона: текст, фон картки, іконка тощо:

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

Тепер ви знаєте, як встановити блок «Accordion» на своєму вебсайті та налаштувати вміст усередині блоку.<br>

## Налаштування блоку (розділу): шрифт, фон і параметри відображення

Щоб налаштувати блок «Accordion», вам знадобляться універсальні налаштування розділу (блоків), які включають налаштування шрифту, фону та відображення.

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

Налаштування розділу (блоку), а саме шрифт, фон і відображення, є однаковими для всіх блоків.

{% hint style="info" %}
[Докладніше про універсальні налаштування розділів (блоків) сайту читайте в статті](/doc/uk/websites/saiti/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/uk/websites/saiti/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.