# Раздел онлайн-курса

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

<figure><img src="/files/3a4a0cbeba10c6d550281b534a8f88b3f2adfbcf" alt=""><figcaption></figcaption></figure>

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

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

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

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

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

<figure><img src="/files/5b2d02c78015a28ba6753fb474adce586aaa7ce5" alt=""><figcaption></figcaption></figure>

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

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

### Раздел контента

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

{% hint style="info" %}
Как создавать курсы на платформе Salebot, описано в разделе “[Онлайн-курсы”](broken://pages/ac60643da5f974902251c892344baf4739a29795).
{% endhint %}

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

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

<figure><img src="/files/126103afb4c584e3b91e82b3d8324502356244a3" alt=""><figcaption></figcaption></figure>

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

После этого выбранные курсы сразу отобразятся на странице вашего сайта с обложкой, которую вы задали в настройках курса.

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

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

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

* Тень

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

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

а) без тени:

<figure><img src="/files/1e0524749ddf5e0300ade723549d64227a628289" alt=""><figcaption></figcaption></figure>

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

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

c) сильная тень:

<figure><img src="/files/5026bd2002104ccc81911b0a4846aefd9a17ec99" alt=""><figcaption></figcaption></figure>

#### Настройки цвета элементов карточки

Настройте внешний вид карточки, изменяя цвета различных элементов. Вы также можете добавить интерактивные эффекты при наведении.

* **Цвет текста:** Изменяет основной цвет текста на карточке (кроме кнопок).
* **Фон карточки:** Задаёт цвет фона карточки.
* **Цвет рамки:** Определяет цвет контура или рамки карточки.
* **Текст кнопки:** Задаёт цвет текста внутри кнопки (в статичном состоянии).
* **Фон кнопки:** Задаёт цвет фона кнопки.

**Интерактивные эффекты при наведении (необязательный раздел):**

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

Теперь вы знаете, как отображать доступные курсы на вашем сайте MaviBot с помощью раздела "Карточки курсов".

{% hint style="info" %}
Для настроек фона и отображения см. статью [«Глобальные настройки раздела»](/doc/ru/websites/saity/blocks/settings.md).
{% endhint %}

## Как добавить блок "Уроки"

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

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

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

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

<figure><img src="/files/631a6ed91480f2a1381a7634c36a89517d6407ad" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/51625977cf6740f88a52f9434250a0db0794f9e3" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/238d43e629ce40b64c6796f252145fc6a232c6d4" alt=""><figcaption></figcaption></figure>

**Какие настройки доступны?**

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

<figure><img src="/files/7344b87b4eb6bf76c24e2c4e6f775bc047d834aa" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/3a3721bd4a110bea58aa88167d665c793005a86d" alt=""><figcaption><p>Классический стиль</p></figcaption></figure>

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

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

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

<figure><img src="/files/12b52e84edbc1c3af61b6bdcf3d455661af9ca03" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/8fff18199eefa89dd8bc8cc4481825c19229fff2" alt=""><figcaption></figcaption></figure>

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

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

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

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

<figure><img src="/files/2a90b70d27754d0dda364d1e6da0ef3ca228c820" alt=""><figcaption></figcaption></figure>

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

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

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

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

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

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

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

<figure><img src="/files/328df51808ede7d74103ae44375a7be0e7e70a35" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/45d1e7cf1ebb7aceb0b7fdc65b518bb3e521d85e" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/45aba78abd419dba0e407003a13d33c91f18f03d" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/8bd4477d8f25a4b9ca64f0ab46f4f3419fa7caca" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/319f736f8989de193236bb565f7ad50bfd774d41" alt=""><figcaption></figcaption></figure>

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

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

5. Стиль карточки урока

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

Это помогает размещать карточки уроков в одну строку или в строку с переносом или без него.

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

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

Доступна обширная цветовая палитра для настройки цвета фона карточки и цвета шрифта на карточке урока:

<figure><img src="/files/7a06fdf2b82eddfd7b7dd4ccb9a0cc5475b5b859" alt=""><figcaption></figcaption></figure>

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

{% hint style="info" %}
Для настроек фона и отображения см. статью [«Глобальные настройки раздела»](/doc/ru/websites/saity/blocks/settings.md).
{% 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/ru/websites/saity/blocks/course.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.