# Список

### Как добавить блок?

Через меню добавления контентных блоков. [<span style="color: rgb(35, 111, 161);">Подробнее о блоках</span>.](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-dobavlyat-kontentnye-bloki)

<details id="bkmrk-%C2%A0"><summary>Скриншот кнопки в меню блока</summary>

![list0-menu.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-10/scaled-1680-/list0-menu.jpg)

</details>### Как выглядит блок?

[![list1-look2.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/list1-look2.jpg)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/list1-look2.jpg)

### Как работать с блоком?

Все просто. Создайте блок и добавьте в него свой контент. В блоке «**Список**» можно добавить:

- общий заголовок для списка
- текст для каждого пункта списка

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D1%8F-%D0%B8-%D0%B7%D0%B0"><summary>Создание и заполнение блока</summary>

[![list2-create.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/list2-create.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/list2-create.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>#### Как добавлять и удалять пункты списка?

Количество пунктов в блоке «**Список**» не ограничено. Вы можете добавить любое количество, нажав на кнопку «**Добавить элемент списка**» внизу. А удалить ненужные пункты можно, нажав на значок «**Корзина**».

<p class="callout warning">Обратите внимание, что после удаления, восстановить пункт списка невозможно.</p>

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F-%D0%BD%D0%BE"><summary>Удаление и добавление пунктов</summary>

[![list3-items.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/list3-items.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/list3-items.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>#### Как изменить внешний вид?

##### Текст

Вы можете отформатировать текст внутри вкладки с помощью текстового редактора. [<span style="color: rgb(35, 111, 161);">Подробнее о редакторе.</span>](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-formatirovat-tekst)

##### Иконки

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

<details id="bkmrk-%D0%98%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5-%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%B0-%D0%BF%D0%BE%D0%B4"><summary>Изменение иконки</summary>

[![list4-icons.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/list4-icons.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/list4-icons.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>##### Цвет

Цвет этого блока не наследуется из настроек лонгрида. Вы можете задать любой цвет для фона иконок и для самих иконок. В настройках вам предлагается 6 цветов для фона и 2 цвета для иконок (чёрный и белый).

Если вы выберете светлый фон, то, возможно, цвет иконки стоит поменять на чёрный.

<details id="bkmrk-%D0%92%D1%8B%D0%B1%D0%BE%D1%80-%D1%86%D0%B2%D0%B5%D1%82%D0%B0-%D0%A7%D1%82%D0%BE%D0%B1%D1%8B-%D1%83%D0%B2"><summary>Выбор цвета</summary>

[![list5-colors.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/list5-colors.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/list5-colors.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>Также вы можете задать свой собственный цвет с помощью HEX-кода как для фона, так и для самой иконки.

<p class="callout warning">Обратите внимание, что при вставке HEX-кода нельзя удалять символ решетки. Иначе цвет не будет работать.</p>

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D0%BE%D1%84%D0%BE%D1%80%D0%BC%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F-%D0%B1%D0%BB"><summary>Добавление своего цвета</summary>

[![list6-hex.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/list6-hex.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/list6-hex.gif)

*<span style="color: rgb(149, 165, 166);">Нажмите на демонстрацию, чтобы ее увеличить.</span>*

</details>### Как я могу использовать этот блок?

Рекомендуем вам использовать блок:

- для наглядного отображения последовательности действий
- акцента на важных моментах (выводы к уроку, разделу)