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

У світі онлайн-навчання зручність навігації відіграє ключову роль у залученні та утриманні користувачів. Картки курсів, які можна налаштовувати, — чудовий спосіб зробити ваш вебсайт більш інтерактивним та інформативним.

<figure><img src="/files/638483fd6a0aefae95eeb655595d59b4073a1e39" alt=""><figcaption></figcaption></figure>

Ці картки дають змогу відвідувачам швидко знаходити програми, які їх цікавлять, і легко переходити на сторінки курсів лише за допомогою однієї кнопки. У цій статті ми розглянемо, як налаштувати розділ із картками курсів, щоб підвищити зручність використання вашого вебсайту та допомогти користувачам швидше досягати своїх освітніх цілей.

Замість використання онлайн-карток для запам’ятовування ви можете додати на сторінку вебсайту списки уроків: просто виберіть потрібний курс у розділі, і всі уроки буде відображено.

## Як додати розділ «Картки курсів»

Щоб додати розділ «Картки курсів», натисніть на «+» у режимі редагування вашого вебсайту.

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

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

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

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

### Розділ вмісту

Налаштування вмісту розділу «Картки курсів» полягає у виборі курсу(ів), який уже було створено в проєкті, для відображення на вебсайті, а також у налаштуванні елементів картки.&#x20;

{% hint style="info" %}
Про те, як створювати курси на платформі Salebot, описано в розділі «[Онлайн-курси»](broken://pages/a9cba9c42bde018865ff4338c63877aa090e2566).
{% endhint %}

#### Вибір курсу

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

<figure><img src="/files/8416fd9782861375d0b053c3e8e89ca7c545e93d" alt=""><figcaption></figcaption></figure>

Для цього поставте галочку біля назви потрібного курсу.

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

#### Налаштування

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

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

* Тінь

<figure><img src="/files/27781d909df280d2992601ee65dbda3c36c0c15b" alt=""><figcaption></figcaption></figure>

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

a) без тіні:

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

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

<figure><img src="/files/289e73c22de342846cb341fca53801824a4b7a1e" alt=""><figcaption></figcaption></figure>

c) сильна тінь:

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

#### Налаштування кольорів елементів картки

Налаштуйте вигляд картки, відкоригувавши кольори для різних елементів. Ви також можете додати інтерактивні ефекти під час наведення курсора.

* **Колір тексту:** Змінює основний колір тексту на картці (окрім кнопок).
* **Фон картки:** Встановлює колір фону картки.
* **Колір рамки:** Визначає колір контуру або рамки картки.
* **Текст кнопки:** Встановлює колір тексту всередині кнопки (статичний стан).
* **Фон кнопки:** Встановлює колір фону кнопки.

**Інтерактивні ефекти під час наведення курсора (необов’язковий розділ):**

Увімкніть ефекти наведення, щоб динамічно змінювати колір цих елементів, коли користувач наводить курсор на картку.

Тепер ви знаєте, як відображати доступні курси на вашому сайті MaviBot за допомогою розділу «Картки курсів».

{% hint style="info" %}
Для налаштувань фону та відображення дивіться статтю [«Глобальні налаштування розділу»](/doc/uk/websites/saiti/blocks/settings.md).
{% endhint %}

## Як додати блок «Уроки»

Щоб додати блок для відображення списку уроків у курсі, перейдіть у режим редагування вебсайту та наведіть курсор на робочу область, а потім натисніть на «+»:

Праворуч відкриється меню з доступними розділами сайту, де вам потрібно знайти блок «Уроки»:

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

Натисніть на «Картки курсів», після чого відкриється меню для налаштування вмісту блоку:

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

Вам потрібно лише вибрати потрібний курс, який уже було створено в Salebot, у спадному меню та натиснути «Зберегти».

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

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

### Налаштування

Коли ви натискаєте кнопку «Налаштування» і наводите курсор на розділ, відкриваються налаштування для налаштування вмісту та самого блоку:

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

**Які налаштування доступні?**

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

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

За замовчуванням стиль списку уроків відображається у новому форматі. За потреби ви можете встановити більш лаконічну версію класичного формату:

<figure><img src="/files/0bf90d12a9fa60cb856e410be47fdbafca6aa4b1" alt=""><figcaption><p>Класичний стиль</p></figcaption></figure>

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

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

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

<figure><img src="/files/3099deed22aa2d087e099aca3e16f58147eecc75" alt=""><figcaption></figcaption></figure>

3. Іконки уроків

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

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

#### **Як додати іконки**

Крок 1. Перейдіть до налаштувань уроку:

Для цього перейдіть у режим налаштувань курсу та знайдіть вкладку «Уроки»:

<figure><img src="/files/4818e9faf7a60fc86aa2c2cf4faa302f575de2d0" alt=""><figcaption></figcaption></figure>

Далі натисніть «Редагувати», після чого сторінка уроку відкриється для редагування.

Крок 2. Відкрийте налаштування сторінки уроку.

<figure><img src="/files/68de2e36d33982b705c1fce47d150e6b77903c21" alt=""><figcaption></figcaption></figure>

Перейдіть до розділу «Загальні» в налаштуваннях сторінки уроку:

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

Крок 3. Завантажте попередній перегляд уроку

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

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

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

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

Збережіть налаштування.

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

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

3. Фонова текстура

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

Це додає об’єму та унікальності вашим карткам уроків:

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

4. Заокруглення елементів

Значення задається в пікселях і заокруглює кути карток уроків.

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

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

Це допомагає розмістити картки уроків в один ряд або в ряд із перенесенням чи без нього.

6. Колір фону та тексту

<figure><img src="/files/742e76e8f0f23c3e6a9e6bfd6484fc54f0a04401" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/002ed64645564e39b4515d4cc8aaef96b0d98e74" alt=""><figcaption></figcaption></figure>

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

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