> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.support-vigbo.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Аккордеон

Виджет **Аккордеон** представляет собой список с раскрывающимся содержимым. По клику на раздел в таком списке, откроется поясняющий или подробный текст. Виджет **Аккордеон** особенно удобно использовать для создания блоков Вопрос-Ответ. Пример отображения виджета:

![Screenshot-434.png](https://storage.crisp.chat/users/helpdesk/website/-/8/9/5/c/895c6704cf906000/982ee718-5e8f-4f25-bf81-5aae12_d20546.png)

1. Добавление виджета.

Откройте или создайте страницу с типом **Новая страница** и добавьте виджет **Аккордеон**, перетащив его в нужную область страницы.

![screen-65.png](https://storage.crisp.chat/users/helpdesk/website/-/8/4/6/8/846887497eab3800/97a805ef-373d-4c17-9c96-9ef68d_8ebxhb.png)

2. Добавление элементов списка.

Перейдите в режим редактирования виджета, кликнув по значку шестеренки в правом верхнем углу. В открывшемся окне настроек нажмите на кнопку **Добавить раздел**.

![screen-70.png](https://storage.crisp.chat/users/helpdesk/website/-/5/d/c/f/5dcf964e5eb29000/8db5b96c-206d-45ec-99e8-005c55_1bie7ft.png)

Заполните заголовок раздела и добавьте описание, которое будет открываться при клике на заголовок. Сохраните изменения.

![Screenshot-444.png](https://storage.crisp.chat/users/helpdesk/website/-/d/9/2/2/d9225c3b9066c000/8958a6ca-f10c-40a4-84b8-784a02_3qxsah.png)

В описание вы можете добавлять текст и настраивать его оформление, размещать ссылки на другие страницы сайта или сторонний сайт, добавлять изображения.

* Добавление ссылки

Выделите текст, к которому вы хотите добавить ссылку, и нажмите иконку **Вставить/Редактировать ссылку**.

![Screenshot-445.png](https://storage.crisp.chat/users/helpdesk/website/-/4/b/4/9/4b4974668352dc00/9b99617f-62ce-443e-89ec-7932ac_wria1.png)

В открывшемся окне выберите тип ссылки **Ссылка** и укажите адрес сайта или адрес страницы, которая должна открываться.

![Screenshot-446.png](https://storage.crisp.chat/users/helpdesk/website/-/1/0/3/a/103a3312f5c07500/000f6cfd-ed04-4b5f-ad13-0e27b9_1hcrk0l.png)

> **ВАЖНО:** если ссылка ведет на сторонний сайт, то указывайте полный адрес ссылки с доменом, например, **https://vigbo.com/templates** Если переход должен быть на страницу на вашем сайте, указывайте в качестве ссылки только адрес страницы без доменного имени, в начале ссылки должен быть символ **/** Пример: **/templates**

* Добавление изображения

При помощи сочетания клавиш **Ctrl**+**C** (для Windows) скопируйте изображение на вашем компьютере. Затем поставьте курсор в том месте в тексте, где вы хотите добавить картинку и нажмите клавиши **Ctrl**+**V** (для Windows). Дождитесь загрузки. Также добавлять изображения можно при помощи способа «drag-and-drop»: зажмите картинку на компьютере мышкой и удерживая его, перетяните в описание. Этим вариантом вы можете добавить фото на macOS и на Windows.

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

![Screenshot-447.png](https://storage.crisp.chat/users/helpdesk/website/-/4/3/8/8/43885017ef97d80/4c2107e0-35c5-4dd7-b44a-3d28ea_rlyuwp.png)

Обратите внимание, если указанные размеры фотографии будут больше, чем размеры самого виджета **Аккордеон**, то фотография автоматически будет подстраиваться под ширину виджета на разных экранах.

3. Таким образом добавьте все остальные разделы в список. При необходимости вы всегда сможете поменять их порядок при помощи стрелок, отредактировать пункты по клику на иконку карандаша и удалить ненужные разделы по клику на иконку корзины.

![screen-72.png](https://support.vigbo.tech/hc/article_attachments/5473569044754)

4. Настройте оформление виджета.

Во вкладке **Оформление** вы можете изменять ширину виджета, задавать для него выравнивание, а также подобрать шрифтовые настройки для заголовков и для текста описания.

![Screenshot-437.png](https://support.vigbo.tech/hc/article_attachments/4403683322898)

Для применения настроек нужно нажать кнопку **Сохранить** в окне с настройками виджета и кнопку **Сохранить** для страницы.

Несколько примеров, для чего может быть быть использован виджет, вы можете посмотреть в руководстве [5 вариантов применения виджета Аккордеон](/hc/ru/articles/20445959559324).