# Student page Learn how to build a student page that enhances the learning experience. The student interface is your course's home base. A clean, user-friendly design keeps students focused and motivated, turning casual visitors into committed learners.

Custom themes and settings let you tailor the look and feel of your student page, creating a polished and engaging design in just a few clicks. This guide will show you how to configure this page efficiently, transforming it into a central hub that reflects your course's style while ensuring a seamless learning experience. **What is a Student Page?**\ Within the Salebot platform, the student page is a personalized dashboard that acts as the primary workspace for your course. It consolidates every tool a learner needs, enabling them to: * Access all course content and materials, * Monitor their progress through modules and lessons, * Complete lessons and submit assignments, * Interact with instructors or facilitators. This integrated environment is designed to streamline the learning journey, keeping students focused, organized, and motivated.

**Why is the student page important?** The student page structures and streamlines the learning process. It enables students to: * Quickly locate necessary materials and resume their studies from the exact point where they stopped. * Easily monitor their progress, viewing which tasks are completed and which are still pending. * Receive instructor feedback, facilitating a more personalized and effective learning journey. ## Where to set up the student page {% hint style="success" %} The course builder is available with the “Businnes” subscription plan. {% endhint %} To get started, go to the “Courses” section in MaviBot.

Next, select the course for which you want to set up the student page, and go to its **settings.**

You will then be taken to the main course settings page, where you need to open the “**Student Page**” tab.

Now, to start customizing the student page, locate the gear icon to open the settings menu.

When you click the gear icon, a menu will open with settings for the default (custom) theme, your own (editable) theme, as well as additional settings and the option to add custom buttons.

## Main theme The main theme of the student page consists of pre-installed, ready-made themes that allow you to customize the page in just a couple of clicks.

Step 1: Choose a Color Scheme for the **Main theme** You can choose from 7 light themes and 2 dark themes. When a custom theme is applied, the colors of all main page elements are updated, including: * Backgrounds (cover images, page background, progress bar, lesson blocks) * Buttons * Progress bar fill * Borders, outlines, etc. **Step 2: Choose the Border Radius Level** **a) Zero radius** – all corners and page elements will appear square.

b) Medium radius – corners and elements will appear rounded or oval-shaped.

c) Maximum radius – all corners and page elements will have fully rounded edges.

{% hint style="success" %} Excellent! Now you know how to quickly set up the main theme of your student page. If you'd like to add extra buttons, upload a custom cover image, or apply your own unique color scheme to the page, we recommend continuing to the next sections of this article. {% endhint %} ## Custom theme The settings in the “**Custom theme**” tab allow you to apply your own unique and varied color schemes to the elements of the student page.

{% hint style="warning" %} ## Please note The Main theme and Custom theme can be used together. For example, you can use the settings in the Custom Theme tab to apply colors to just a few elements, while keeping the rest of the page styled according to the selected Main Theme. {% endhint %} #### Background color This setting changes the background color of the entire page, excluding individual elements.

Click on the square to open the color palette and select the desired color.

In addition to a wide color palette for each element, you can also adjust the color intensity using the transparency scale. #### Background overlay color Use the background overlay settings to apply a unified color to the core visual containers on the page: a) The progress bar; b) Individual lesson blocks,; c) The course cover image area.

#### Accent color The accent color settings allow you to change the color scheme of the main highlighted elements on the student page, including: a) lesson navigation buttons; b) the progress bar fill; c) borders, lesson number backgrounds, and similar elements.

#### Page background text color This setting allows you to choose an appealing color scheme for the text displayed on the page background.

#### Overlay text color This setting allows you to change the text color for the main elements on the student page that appear over background overlays.

#### Accent text color Use this setting to define the text (font) color for any element that sits on an accent-colored background, including callout boxes and interactive buttons.

#### Additonal settings In the additional settings of the student page, you can upload an image to use as the page cover.

{% hint style="warning" %} ## Please note The image uploaded as the student page cover from your device must not exceed 15 MB in size. {% endhint %} Step 1: Uploading an image You can upload an image directly from your computer.

Or upload an image via a link from your file storage.

The advantage of uploading an image via a link from the file storage is that you can use an image of any size as the cover. {% hint style="info" %} For more details on how to use file storage, refer to the article "[File storage](/chatbot/cloud.md)". {% endhint %} Step 2: Cover height After uploading the image, set the appropriate cover height on the student page.

Step 3: Image position

You can use the **preset positioning options** to align the image to the c**enter, left, right, or bottom**, or choose **custom settings.**

By moving the circle control, you can position the image exactly as you like. Step 4: Image size

The **image size field** accepts values of c**ontain / cover**, as well as **numeric values in pixels (px)** and **percentages (%)**. 1\) contain/cover values

2\) numeric values

Step 5: Image repetition The image can be repeated along the **Y-axis**, i.e., **vertically;** along the **X-axis**, i.e., **horizontally** or with no repetition.

Step 6: Checkboxes To improve the student experience on their personal page, you can enable the display of: * the progress bar, * the number of completed lessons, and * the number of approved homework assignments.

If you do not want to use these elements on the page, you can **deactivate the checkboxes.** ## Buttons The student page includes a feature to add custom call-to-action buttons below the progress bar. You can link these buttons to external websites, documents, or other important pages.

To add a button, open the corresponding tab in the **student page settings.**

Then click on "**Add Button"**. A modal window will then open for button configuration and enter a button text.

Now, specify the destination link (URL) for this button.

The button's colors will automatically inherit the main theme palette. However, you can override this by setting a custom color for both its background and text.

Then, click "Save".

The button is now saved and active. You will see it displayed below the progress bar on the student page.

You can add multiple buttons – to do this, simply go to the settings menu and click "Add Button" below the existing one.

## Banners

To promote key resources, you can add clickable banners to the student page. These banners can link to any URL you specify, such as a messenger bot, a community group, an important document, or an external website. Let's proceed with the setup. **Step 1: Access banner settings** In the course page settings, locate and expand the **"Banners"** section.

To do this, click on the section on the settings drop-down menu.:

Step 2: Upload an image.

After uploading, the image will appear in the settings field. Step 3: Go to the image settings.

To do this, click the gear icon in the top-left corner of the uploaded image, and a settings modal window will open:

**Step 4: Set the destination link**\ Enter the full URL where students will be redirected upon clicking the banner. This can be a webpage, a messenger bot, or any other online resource. **Step 5: Configure the banner's dimensions**\ Set the banner's display size by entering values for width and height. > **Important:** Enter only numeric values in these fields (e.g., `300`). Do not include units like `px` or `%`. **Step 6: Save your configuration**\ Click **"Save"** to apply all banner settings. **Setup complete!**\ Your clickable banner is now active. It will appear on the right side of the student page, below the progress bar (provided the banner feature is enabled). ### How to add multiple banners You can add several banners to a single page. To do this, upload an image in the settings and configure it as described above. If you click "Add Image" below an already uploaded image, the new banner will appear below the previously added banner on the student's page. 1. Select the image upload option below the added banner (the large upload button at the bottom):

2. The image has been uploaded below the previously added banner.

3. On the student’s page, the banner will appear on the next line after the previously added one.

If you click the "+" button to the right of an already uploaded image, the new banner will appear on the same row as the previously added banner on the student’s page. 1. Click the "+" button to the right of the uploaded image in the page settings.

The newly uploaded image will be placed on the right.

2. On the student’s page, the banner will be displayed on the same row as the previously uploaded one.

You can add banners both on the same row and on subsequent rows at the same time.

{% hint style="success" %} All set!\ Now you know how to fully configure the student’s page! {% endhint %} ## Page preview After configuring the student’s page, don’t forget to save your progress.

After saving the settings, click the "Preview" button.

Next, select "Go to Student Page".

You will be taken to the student page preview.

While in edit mode, the preview panel allows you to visually inspect the final layout. You can see how all elements—such as the progress bar, banners, buttons, and lesson blocks—are positioned and styled according to your configurations. {% hint style="warning" %} ## Please note The preview is for **visual demonstration only**. Elements on the student page preview are **not clickable** and do not trigger any actual navigation or functionality. {% 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/lms/builder/student_page.md?ask= ``` 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.