# Online course section

In the world of online learning, ease of navigation plays a key role in attracting and retaining users. Customizable course cards are a great way to make your website more interactive and informative.

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

These cards allow visitors to quickly find the programs they are interested in and easily navigate to course pages with just one button. In this article, we'll look at how to set up a section of customizable course cards to enhance the usability of your website and help users achieve their educational goals faster.

Instead of using online flashcards, you can add lesson lists to the website page: just select the required course in the section and all the lessons will be displayed.

## How to add the "Course cards" section

To add the "Course cards" section, click on the "+" in the editing mode of your website.

Then find the "Course cards" section in the menu that opens and click on it to add the section to your website:

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

The section will be added to your website site, and the content settings menu will open for you:

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

### Content section

Configuring the content of the Course cards section consists of selecting a course(s) that has already been created in the project to display on the website and customize the card elements.&#x20;

{% hint style="info" %}
How to create courses on the Salebot platform is described in the section “[Online courses”](broken://pages/GtecyiB7CJ5pMADmwdyn).
{% endhint %}

#### Choosing a course

Choose the courses that you would like to showcase on your website:

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

To do this, tick the box with the name of the required course.

In turn, the selected courses will immediately be displayed on your website page with the cover that you set in the course settings.

#### Customization

After you have selected the necessary courses, proceed to customizing the card elements:

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

* Shadow

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

For course cards in the section, you can adjust the shadow intensity:

a) without shadow:

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

b) light shadow:

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

c) strong shadow:

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

#### Card elements color settings

Customize the card's appearance by adjusting colors for various elements. You can also add interactive hover effects.

* **Text Color:** Changes the primary text color on the card (excluding buttons).
* **Card Background:** Sets the background color of the card.
* **Border Color:** Defines the color of the card's outline or frame.
* **Button Text:** Sets the color of the text inside the button (static state).
* **Button Background:** Sets the background color of the button.

**Interactive hover effects (optional section):**

Enable hover effects to dynamically change the color of these elements when a user moves the cursor over the card.

Now you know how to display the available courses in the your MaviBot site using the "Course cards" section.

{% hint style="info" %}
For background and display settings, see the article ["Global section settings"](/websites/sites/blocks/settings.md).
{% endhint %}

## How to add the "Lessons" block

To add a block to display the list of lessons in the course, switch to the website editing mode and hover over the workspace, and then click on "+":

A menu opens on the right with the available sections of the site, where you need to find the "Lessons" block:

<figure><img src="/files/36zbJjYaVjCal3YlXNSl" alt=""><figcaption></figcaption></figure>

Click on the "Course cards", and then a menu will open for configuring the content of the block:

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

You just need to select the required course, which has already been created in the Salebot, in the drop-down menu and click on "Save".

Then go to settings to customize the block content:

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

### Customization

When you click on the "Settings" button and hover over the section, the settings for customizing the content and the block itself open:

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

**What settings are available?**

1. Lesson list style

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

By default, the style of the lesson list is displayed in a new format. If necessary, you can set a more concise version of the classic format:

<figure><img src="/files/LhAAnSQFeUZkk1DtRfpR" alt=""><figcaption><p>Classic style</p></figcaption></figure>

2. Numbering style

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

The numbering style is available for a new style of displaying the lessons of the course. The numbering changes in the lesson card itself:

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

3. Lesson icons

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

**They are displayed if you added a preview inside the lesson itself in the course settings.**

#### **How to add icons**

Step 1. Go to the lesson settings:

To do this, go to the course settings mode and find the Lessons tab:

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

Next, click on "Edit", after which the lesson page will open for editing.

Step 2. Open the lesson page settings.

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

Go to the "General" section in the lesson page settings:

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

Step 3. Upload the lesson preview

Expand the list of image settings in the basic information settings:

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

Upload an image for the lesson preview:

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

Save the settings.

{% hint style="success" %}
Done! Now lesson previews will be displayed as icons in the Lessons section on the website.
{% endhint %}

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

3. Background pattern

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

It adds volume and uniqueness to your lesson cards:

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

4. Element rounding

The value is set in pixels and rounds off the corners of lesson cards.

5. Lesson card style

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

It helps to arrange lesson cards in one row or in a row with or without hyphenation.

6. Background and text color

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

There is an extensive color palette available to set the background color of the card and the font color on the lesson card:

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

Now you know how to add lesson lists to your website and customize the content of the section.

{% hint style="info" %}
For background and display settings, see the article ["Global section settings"](/websites/sites/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/websites/sites/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.