---
description: В статье расскажем, как добавить блок с информацией о курсах на сайт
---

# Секции для онлайн-курса

В мире онлайн-обучений удобство навигации играет ключевую роль в привлечении и удержании пользователей. Настраиваемые карточки курсов — это отличный способ сделать ваш сайт более интерактивным и информативным.&#x20;

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FFh6W0lfj5oV47FMIkfsJ%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202024-11-01%20%D0%B2%2010.43.48.png?alt=media&#x26;token=f77094c6-4c9b-4b89-9b18-39831913a390" alt="" width="563"><figcaption></figcaption></figure>

Эти карточки позволяют посетителям быстро находить интересующие их программы и легко переходить на страницы курсов с помощью всего одной кнопки. В этой статье мы рассмотрим, как настроить секцию настраиваемых карточек курсов, чтобы повысить удобство использования вашего сайта и помочь пользователям быстрее достигать своих образовательных целей.

Вместе с онлайн-карточками вы можете добавить на страницу сайта и списки уроков: достаточно выбрать в секции необходимый курс и все уроки отобразятся:

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FfYVAR0YcohYOF7jA94uN%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-03-19%20%D0%B2%2012.24.17.png?alt=media&#x26;token=da916b5a-6c09-4685-a295-342f24c45844" alt=""><figcaption></figcaption></figure>

## Как добавить блок "Карточки курса"

Чтобы добавить секцию "Карточки курса", нажмите на "+" в режиме редактирования вашего сайта:

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2F8qkG6Ws9NQqRKccUTkkh%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202024-11-01%20%D0%B2%2010.48.49.png?alt=media&#x26;token=c0e3ae3a-1ac7-4669-822e-3d9264187d6b" alt="" width="563"><figcaption></figcaption></figure>

Далее найдите в открывшемся меню секцию "Карточки курса" и кликните на него, чтобы секция добавилась на сайт:&#x20;

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2F4UJ3Zr9zjbCmRDNHmkdx%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202024-11-01%20%D0%B2%2010.50.43.png?alt=media&#x26;token=f2187093-961c-4e7b-be7f-afe02c227ded" alt="" width="563"><figcaption></figcaption></figure>

Секция будет добавлена на сайт, а для вас откроется меню настроек контента:

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FpHbKKYa0dKVujBNBHkVm%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202024-11-01%20%D0%B2%2010.54.34.png?alt=media&#x26;token=e95db5a3-5443-4ee9-9848-e4ae42ce6fcb" alt=""><figcaption></figcaption></figure>

## Контент блока

Настройка контента блока "Карточки курса" состоит из выбора курса (курсов), который уже создан в проекте, для отображения на сайте и кастомизации элементов карточек. &#x20;

{% hint style="info" %}
Как создавать курсы на платформе Сейлбот, рассказали в разделе "[Онлайн-курсы](../../kursy-dlya-onlain-shkol)"
{% endhint %}

### Выбор курса

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

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2Fil3yOiXZX10ZnKpF1xgV%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202024-11-01%20%D0%B2%2013.41.24.png?alt=media&#x26;token=4e96a52f-7e72-4bb0-930f-d9aefe465b40" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FnxUwznPDCUMq93sqPhfq%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202024-11-01%20%D0%B2%2013.43.11.png?alt=media&#x26;token=52330ef3-3dad-4f58-9394-2c5e0cb9db8d" alt="" width="563"><figcaption></figcaption></figure>

В свою очередь, выбранные курсы тут же отобразятся на странице вашего сайта с обложкой, которую вы установили в настройках курса.&#x20;

### Кастомизация

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

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FgsjgQa7wAtNMcRsx5RtU%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202024-11-01%20%D0%B2%2013.55.35.png?alt=media&#x26;token=ea876c46-a052-4eda-bfb7-b61673d08c41" alt="" width="563"><figcaption></figcaption></figure>

1. **Тень**

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FBnI59SHXDLjWJPxhzqDd%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202024-11-01%20%D0%B2%2013.57.02.png?alt=media&#x26;token=2d8fcb04-6845-4c0b-9948-7bf17a17e482" alt="" width="563"><figcaption></figcaption></figure>

Для карточек курса в секции можно настроить интенсивность тени:

а) без тени:

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2F0tm78IRPi8dF0XOfuHr3%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202024-11-01%20%D0%B2%2013.57.41.png?alt=media&#x26;token=0ae8c25b-1adc-4737-be39-28d303eabc92" alt=""><figcaption></figcaption></figure>

б) легкая тень:

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FD8kEl1BimsXUYqLm9XX2%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202024-11-01%20%D0%B2%2013.58.03.png?alt=media&#x26;token=1ae34e32-2a07-442f-b1b6-81acfdb4bf81" alt=""><figcaption></figcaption></figure>

в) сильная тень:&#x20;

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FPhXb5ycSrgMQPi1pz0St%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202024-11-01%20%D0%B2%2013.58.14.png?alt=media&#x26;token=17aa6258-de35-46cf-872d-9c19ef31098d" alt=""><figcaption></figcaption></figure>

2. **Цветовая палитра для элементов карточки**

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FGSkLLRBeNd7AwGrUIgzO%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202024-11-01%20%D0%B2%2014.08.27.png?alt=media&#x26;token=2fba6bd2-d2ad-4a29-ba62-6aa726c16dd2" alt="" width="563"><figcaption></figcaption></figure>

Изменить цвета в карточке можно для фона, текста (как на самой карточке, так и в кнопках), а также добавить интерактивности карточкам, изменив цвета элементов при наведении на них курсором:&#x20;

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FwJK3bz02bJSjMfCcFivc%2F%D0%97%D0%B0%D0%BF%D0%B8%D1%81%D1%8C-%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0-2024-11-01-%D0%B2-14.06.35.gif?alt=media&#x26;token=44f252d8-acfe-4ce8-be89-065c75dbd5cb" alt="" width="375"><figcaption></figcaption></figure>

а) цвет текста: поможет изменить основной цвет текста в карточке (кроме кнопки):

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2Fvt1fLaSw0dB7L26wFOsi%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202024-11-01%20%D0%B2%2014.10.29.png?alt=media&#x26;token=2681f14a-bb69-4dc7-943d-3267c110c219" alt=""><figcaption></figcaption></figure>

б) фон карточки: для изменения цветового решения фона для карточки:

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FSRP0wYX7aPXVMzZFu24O%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202024-11-01%20%D0%B2%2014.12.52.png?alt=media&#x26;token=ce5acf08-daa3-4889-ad29-4d33ee556272" alt=""><figcaption></figcaption></figure>

в) цвет обводки: для изменения цветового решения рамок карточек:

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FQ8gu7ZdK25YqKvfawiVd%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202024-11-01%20%D0%B2%2014.13.30.png?alt=media&#x26;token=6947226a-bc3a-4d85-8480-191d3c0bc28f" alt=""><figcaption></figcaption></figure>

г) текст кнопки: для изменения цвета только текста кнопки в статичном состоянии:

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FZjawwNv1nYHhDRj1UDRn%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202024-11-01%20%D0%B2%2014.15.36.png?alt=media&#x26;token=955d7063-f0d0-4349-9a65-658b46a50692" alt=""><figcaption></figcaption></figure>

д) фон кнопки: поможет изменить фоновый цвет для кнопки карточки курса:

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2Fb5qkNhs0xAY03JgO5h1J%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202024-11-01%20%D0%B2%2014.17.18.png?alt=media&#x26;token=432f1231-aefd-4d07-b502-bb94cf283b91" alt=""><figcaption></figcaption></figure>

Для динамичности сайта также можно изменить цвета кнопки при наведении курсора. Для этого можно воспользоваться настройками цвета при наведении:

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2Fwf47Y5qPFtrEsZyxOwjn%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202024-11-01%20%D0%B2%2014.20.43.png?alt=media&#x26;token=3220adca-e586-4304-905f-337450cf3b73" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Теперь вы знаете, как отображать имеющиеся курсы в Сейлбот на вашем сайте с помощью секции "Карточки курса".&#x20;
{% endhint %}

{% hint style="info" %}
О настройках фона и отображения читайте в статье "[Универсальные настройки секций](broken-reference)".&#x20;
{% endhint %}

## Как добавить блок "Списки уроков"?

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

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FLr2ti7M9IuHTlhHs4UNW%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-03-19%20%D0%B2%2012.25.26.png?alt=media&#x26;token=c84e5466-220e-49fd-a4e3-61435a526d24" alt=""><figcaption></figcaption></figure>

Справа откроется меню с доступными секциями сайта, где необходимо найти блок "Списки уроков":

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FKVQlmhO9c70E2JFy1lQS%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-03-19%20%D0%B2%2012.35.38.png?alt=media&#x26;token=95a9a834-509e-4bfe-b6ea-403dc6ecea47" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FEEJtO2PhWt2CTrRDKc3a%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-03-19%20%D0%B2%2012.36.33.png?alt=media&#x26;token=b16a9872-ecbd-46cc-9838-9d9f304d1710" alt=""><figcaption></figcaption></figure>

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

Далее перейдите в настройки для кастомизации контента блока:

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FSVkXKeFFUYOeo0dwcQ4I%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-03-19%20%D0%B2%2012.39.37.png?alt=media&#x26;token=de528981-df20-40e3-a6a5-825207a2d70d" alt=""><figcaption></figcaption></figure>

### Кастомизация

При клике по кнопке "Настройки" при наведении на секцию, открываются настройки для кастомизации контента и самого блока:

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FT5nbHVP9D8mzd169r0XE%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-03-19%20%D0%B2%2012.42.18.png?alt=media&#x26;token=44a5f899-2fbb-4eb7-b7c2-8e0eb187c683" alt=""><figcaption></figcaption></figure>

#### Какие настройки доступны:

1. Стиль списка уроков

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FrZKEywtgLQNzqguIqg8e%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-03-19%20%D0%B2%2012.50.04.png?alt=media&#x26;token=b49e7c7e-becd-44a7-9409-05d5b434f459" alt="" width="563"><figcaption></figcaption></figure>

По умолчанию стиль списка уроков отображается в новом формате, при необходимости можно установить более лаконичный вариант классического формата:

<div><figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FcJENtbdSLd3MGacMOEHs%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-03-19%20%D0%B2%2013.13.14.png?alt=media&#x26;token=3902c733-c2f2-43dd-9640-f016d1e09e92" alt="" width="563"><figcaption><p>Новый стиль</p></figcaption></figure> <figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2Fqr8fxnY8WAbak248964O%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-03-19%20%D0%B2%2013.13.28.png?alt=media&#x26;token=2c6dec2d-541c-4262-a6f6-27d81a62200f" alt="" width="563"><figcaption><p>Классический стиль</p></figcaption></figure></div>

2. Стиль нумерации

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FbiQ8AAA5F5rho4zCmXTG%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-03-19%20%D0%B2%2013.14.41.png?alt=media&#x26;token=82851af7-a37a-4924-9e24-9ea30a2b6f58" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FkKMEvB9Q27FJQmSkCVX2%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-03-19%20%D0%B2%2013.15.00.png?alt=media&#x26;token=a244aca6-afbc-4921-842e-f969b186b4ba" alt="" width="563"><figcaption></figcaption></figure>

3. Иконки урока

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FO9BCG6MtFMVMCrh2HWI2%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-03-19%20%D0%B2%2013.16.09.png?alt=media&#x26;token=70cf0b6c-9b38-4d06-b337-dc737e97b069" alt="" width="563"><figcaption></figcaption></figure>

{% hint style="success" %}
**Отображаются, если вы добавили превью внутри самого урока в настройках курса.**&#x20;
{% endhint %}

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

Шаг 1. Перейдите в настройки урока:

Для этого зайдите в режим настройки курса и найдите вкладку "Уроки":

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2F5Gi83y4J05kEd2RKaZC5%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-03-19%20%D0%B2%2013.23.41.png?alt=media&#x26;token=4ddd5eb9-ecf4-4158-9c85-16c169dda980" alt=""><figcaption></figcaption></figure>

Далее нажмите на "Редактировать", после чего откроется страница урока для редактирования.

Шаг 2. Откройте настройки страницы урока.&#x20;

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FCDGSGzzJV6azARY1ftrE%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-03-19%20%D0%B2%2013.25.59.png?alt=media&#x26;token=3a62ea5d-8720-451c-8837-f31027e4d0f6" alt=""><figcaption></figcaption></figure>

Перейдите в настройках страницы урока в раздел "Основная информация":

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FcVWjhWO5L2RBu7gz4JR6%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-03-19%20%D0%B2%2013.27.48.png?alt=media&#x26;token=5a286688-e747-4efa-aee1-00ef27c4d6e2" alt=""><figcaption></figcaption></figure>

Шаг 3. Загрузка превью урока

Раскройте в настройках основной информации список с настройкой изображений:

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FFqSRgFj8RxCR1alTmz3l%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-03-19%20%D0%B2%2013.29.12.png?alt=media&#x26;token=45a296ea-ab3e-4dc7-884f-f8e4567e66c0" alt=""><figcaption></figcaption></figure>

Загрузите изображение для превью урока:

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FtyNlE5ekPZO7cQTKB8IR%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-03-19%20%D0%B2%2013.30.00.png?alt=media&#x26;token=5a786108-d5c7-4d08-89ac-dadad0781974" alt=""><figcaption></figcaption></figure>

Сохраните настройки:

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FDf8nclTeG6XlTut842gh%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-03-19%20%D0%B2%2013.31.02.png?alt=media&#x26;token=eef47cf1-f0a1-4297-85e2-21a48383cb78" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Готово! Теперь превью урока будут отображаться в виде иконок в секции "Списки уроков" на сайте.
{% endhint %}

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FcvObjp8YnS4waHKPAVNn%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-03-19%20%D0%B2%2013.37.57.png?alt=media&#x26;token=6fc73c5a-0c88-48ce-8ea1-2757e48d97a2" alt=""><figcaption></figcaption></figure>

4. Фоновый узор

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FXz4KdFo3ArvZeKV50hti%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-03-19%20%D0%B2%2013.39.19.png?alt=media&#x26;token=5516b774-32be-4db7-9ff0-1c5ccaaa98a0" alt="" width="563"><figcaption></figcaption></figure>

Добавит объема и уникальности для карточек ваших уроков:

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FMa95FMZdHLmOYUFFs7Dw%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-03-19%20%D0%B2%2013.40.51.png?alt=media&#x26;token=20927a80-60b0-4e83-93c4-a6c55e75a5e4" alt="" width="375"><figcaption></figcaption></figure>

5. Скругление элементов

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FZhMeamZ32eKUxqynavek%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-03-19%20%D0%B2%2013.42.08.png?alt=media&#x26;token=2ec76b17-d40c-4b6f-94b1-b96105b5ee6d" alt=""><figcaption></figcaption></figure>

Значение задается в пикселях, скругляет углы карточек уроков:

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FZlvxrtJ6PgyXkZGNAyIE%2F%D0%97%D0%B0%D0%BF%D0%B8%D1%81%D1%8C-%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0-2025-03-19-%D0%B2-13.48.48.gif?alt=media&#x26;token=83d923dd-56fe-4ea4-974b-f1eb207bd36c" alt="" width="563"><figcaption></figcaption></figure>

6. Стиль карточек уроков

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FarE692Ub7Bp0Mw2RsFgC%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-03-19%20%D0%B2%2013.52.25.png?alt=media&#x26;token=7216b429-1247-4e42-9b27-39840a18a6b9" alt="" width="563"><figcaption></figcaption></figure>

Помогает расположить карточки уроков в одну строку или в ряд с переносом или без.&#x20;

7. Цвет фона и текста

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FK8cJpxsmkjOolUERqJjK%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-03-19%20%D0%B2%2013.53.03.png?alt=media&#x26;token=d7e9c17a-9962-450a-adaa-bd2a0864e231" alt="" width="440"><figcaption></figcaption></figure>

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

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2F8Zj47yqGWbou5VLaa2fp%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-03-19%20%D0%B2%2013.53.55.png?alt=media&#x26;token=7a1b2e09-c5df-44ff-a725-4fa54a4df54f" alt="" width="450"><figcaption></figcaption></figure>

{% hint style="success" %}
Теперь вы знаете, как добавить списки уроков на свой сайт и кастомизировать контент секции.&#x20;
{% endhint %}

{% hint style="info" %}
О настройках фона и отображения читайте в статье "[Универсальные настройки секций](broken-reference)".&#x20;
{% endhint %}
