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

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

<figure><img src="/files/8g3PIlDu1slOXWRDDmY1" alt="" width="563"><figcaption></figcaption></figure>

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

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

<figure><img src="/files/9oXCRv9pm7jUE1tVw4Me" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/teTsWmyu45TbYsAQ51dS" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/izDjBb5nRxyizZbQkHtH" alt="" width="563"><figcaption></figcaption></figure>

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

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

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

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

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

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

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

<figure><img src="/files/lm2E2D8SkrbPU8ScnUbk" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/BpswJJ2YGpOMxhxnPsqt" alt="" width="563"><figcaption></figcaption></figure>

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

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

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

<figure><img src="/files/l8p5MrSRuq5TPAQFVknV" alt="" width="563"><figcaption></figcaption></figure>

1. **Тень**

<figure><img src="/files/pKjbPLfY543RpVjV0Xsm" alt="" width="563"><figcaption></figcaption></figure>

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

а) без тени:

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

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

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

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

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

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

<figure><img src="/files/wetFiHXBJN63hQjcius6" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/LsBMchHawtjwy3xdXIUp" alt="" width="375"><figcaption></figcaption></figure>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<figure><img src="/files/RTVGbyBILIGbQxtIwGi7" alt="" width="563"><figcaption></figcaption></figure>

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

<div><figure><img src="/files/khbiP2rtw4s1CPSWKuuo" alt="" width="563"><figcaption><p>Новый стиль</p></figcaption></figure> <figure><img src="/files/xrarfIKvS9q9tcknuaqq" alt="" width="563"><figcaption><p>Классический стиль</p></figcaption></figure></div>

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

<figure><img src="/files/ToX92xLWf6LoqqIocgtR" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/8DiVkTOHRpmled9uHTvn" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/CW0Y5whWmfu9gguFpLir" alt="" width="563"><figcaption></figcaption></figure>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<figure><img src="/files/13vs4zi5Q4U6SQDFloH2" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="/files/JDxTtI0GzqYlvyrkoTsR" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/84lXR01W2Y46kCgrFKAH" alt="" width="375"><figcaption></figcaption></figure>

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

<figure><img src="/files/24Ymp5YDiS12a5ruKeyb" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/g4oYpNXZQ0ycMDXmhb1W" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/CsBoXL7Fwij7p7D5MJMe" alt="" width="563"><figcaption></figcaption></figure>

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

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

<figure><img src="/files/7JgBZKnE3CflxjxibMhg" alt="" width="440"><figcaption></figcaption></figure>

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

<figure><img src="/files/nEl4xP9vFKnzXWJp1Ae1" alt="" width="450"><figcaption></figcaption></figure>

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

{% hint style="info" %}
О настройках фона и отображения читайте в статье "[Универсальные настройки секций](broken://pages/oX6Y9RGmKT74x44vZ8gr)".&#x20;
{% 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.salebot.pro/websites/builder/sekcii-bloki/sekcii-dlya-onlain-kursa.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.