# Courses

The **Courses** tab allows you to have fine-grained control over how your courses are displayed and how they appear on your website.

{% embed url="<https://www.youtube.com/watch?t=600s&v=BJlw10yJBv0>" %}

## Courses Page for Elementor and Gutenberg

The MasterStudy LMS **Courses Page** can be created in two ways:

* **via MasterStudy LMS Plugin** - in this case, you have to[ indicate](#page-layout) an empty page as a Courses Page in the designated area. MasterStudy PRO Plugin automatically generates it for you without any page builders.
* **via MS LMS Widgets for Page Builders** (**Elementor,** **Gutenberg**, WP Bakery, etc) - during the the installation of the theme MasterStudy generates separate Courses pages for **Elementor** and **Gutenberg.** You can modify these pages using the **respective page builder.**

{% hint style="danger" %} <mark style="color:red;">**IMPORTANT**</mark>\
The settings of this tab will apply to the [selected **Courses Page**](#page-layout) only. If you indicate the page constructed with **Elementor** or **Gutenberg**, these changes **will NOT be applied to them!**
{% endhint %}

{% hint style="success" %}
The look of the Courses page created using **Elementor** and **Gutenberg** can be changed within these page builders.
{% endhint %}

The difference in the look of Courses Pages:

{% tabs %}
{% tab title="via MS LMS Plugin" %}

<figure><img src="https://2021837383-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDO9V_qgvV5cQdw04iz%2Fuploads%2Fr2pl5gcnEzttAoBEgtaU%2Fimage.png?alt=media&#x26;token=20a39f7e-7c5b-41d0-b4fa-8b22e87cafc2" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="via MS LMS Elementor Widget" %}

<figure><img src="https://2021837383-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDO9V_qgvV5cQdw04iz%2Fuploads%2FgGrhjGev47lRYtRNdxAQ%2Fimage.png?alt=media&#x26;token=54ff70fc-3d18-4740-a9ef-4feccf9de565" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="via MS LMS Gutenberg Blocks" %}

<figure><img src="https://2021837383-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDO9V_qgvV5cQdw04iz%2Fuploads%2FpUw6WKtd7r1B0UGxLQ6e%2Fimage.png?alt=media&#x26;token=50f5663d-feb4-4142-a865-73925ae35ef3" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Overview of the Courses tab

Here's an overview of the settings you can manage under the **MasterStudy LMS Settings** **> Courses** tab:

<figure><img src="https://2021837383-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDO9V_qgvV5cQdw04iz%2Fuploads%2FIzpiCOZJHClzzivcIAdo%2Fimage.png?alt=media&#x26;token=1e134db9-63b6-45a4-8bcb-e01c40c7a104" alt=""><figcaption></figcaption></figure>

* **Import demo courses** - When you click Start Import, all demo courses, questions, quizzes, and lessons will be uploaded to the site.

<figure><img src="https://2021837383-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDO9V_qgvV5cQdw04iz%2Fuploads%2FzGbJHtOOSfFhtarMpytt%2Fimage.png?alt=media&#x26;token=62393324-0b79-4afb-9584-85ca2ad99109" alt=""><figcaption></figcaption></figure>

## Page Layout

<figure><img src="https://2021837383-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDO9V_qgvV5cQdw04iz%2Fuploads%2Fs1XwTPGYaWa4cQ3ZoWqk%2Fimage.png?alt=media&#x26;token=3d457531-7ae8-4274-979f-63b71236e27c" alt=""><figcaption></figcaption></figure>

* **Courses Page** - Choose the main page where all courses will be displayed.
* **Courses Page Layout** - Choose the layout for the courses page: **Grid** or **List.**
* **Courses per page** - Set the number of courses to display on one page.
* **Сourses per row** - Set the number of courses to show per row.
* **Load more types** - Choose how to load more courses. Available options are **Button** and **Infinite Scrolling.**

{% tabs %}
{% tab title="Courses as Grid" %}

<figure><img src="https://2021837383-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDO9V_qgvV5cQdw04iz%2Fuploads%2FfeSiQqRPUEK8g9as8RZp%2Fimage.png?alt=media&#x26;token=d84cd1ba-18e0-42e6-8c6e-9b78e0303991" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Courses as List" %}

<figure><img src="https://2021837383-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDO9V_qgvV5cQdw04iz%2Fuploads%2Fzp7sSNWkWvBVZ9K1QZzw%2Fimage.png?alt=media&#x26;token=995bc6e1-cbed-4bb6-8e8a-6bb3f6f87a59" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Load more as Button" %}

<figure><img src="https://2021837383-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDO9V_qgvV5cQdw04iz%2Fuploads%2FYMrlHsNTaRsTU5TeA92O%2Fimage.png?alt=media&#x26;token=709b1ac0-8941-4ddd-8aee-9f4db7956d6d" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Load more as Infinite Scrolling" %}

<figure><img src="https://2021837383-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDO9V_qgvV5cQdw04iz%2Fuploads%2Fi2GYy56YddeShkQfRLZf%2Fimage.png?alt=media&#x26;token=78ecbb1f-4bfa-4ea8-bea4-42218346917c" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Course Card

<figure><img src="https://2021837383-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDO9V_qgvV5cQdw04iz%2Fuploads%2F0vGKCZC2ZHXqoTxXTUgQ%2Fimage.png?alt=media&#x26;token=1c1b5115-7b79-4376-a3f1-0b32a05259c3" alt=""><figcaption></figcaption></figure>

* **Course Card Style** - Select the display style for the course card.
* **Course Card Info** - Specify where to place the course card info: right or center.
* **Courses Image Size** - Enter the size for the course image.

{% hint style="warning" %}
From version 3.0.24 of the MasterStudy LMS plugin, these settings apply only to the Archive page of courses. WPBakery and Elementor users can now configure course card settings directly within **LMS widgets**. You can customize and change container heights and image sizes for cards.
{% endhint %}

{% hint style="info" %}
The look of [**Course Cards**](#via-ms-lms-plugin) differs by page builder: [**Gutenberg**](#via-ms-lms-gutenberg-blocks)**,** [**Elementor**](#via-ms-lms-elementor-widget)**, or WPBakery.** You can compare them and choose the convenient page builder for yourself.
{% endhint %}

**Let's compare Course Card Styles:**&#x20;

{% tabs %}
{% tab title=" Default " %}

<figure><img src="https://2021837383-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDO9V_qgvV5cQdw04iz%2Fuploads%2F3WWgYNZlsSut7WcLwTid%2Fimage.png?alt=media&#x26;token=65654f06-29ba-4fb0-8176-e61f1d7a6fb5" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Price on hover" %}

<figure><img src="https://2021837383-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDO9V_qgvV5cQdw04iz%2Fuploads%2F6VMecbghZ6HOu5SUWSyC%2Fimage.png?alt=media&#x26;token=7ae184f6-b348-40a5-90c6-61e35e945cc6" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Scale on hover" %}

<figure><img src="https://2021837383-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDO9V_qgvV5cQdw04iz%2Fuploads%2FgHfKsp1ihGgaxsogvZVY%2Fimage.png?alt=media&#x26;token=d8da0434-86d7-4442-9849-b90e2d763b84" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Lazy Loading, Category Slug, Featured Courses&#x20;

<figure><img src="https://2021837383-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDO9V_qgvV5cQdw04iz%2Fuploads%2FUNuIyDSN2zgx2bZI2Tx3%2Fimage.png?alt=media&#x26;token=93e7e0ae-3de9-4a31-81ea-89746dac7b00" alt=""><figcaption></figcaption></figure>

* **Lazy loading -** Enable this if you want to load certain parts of a webpage, such as images until users need them. This can speed up page load times.
* **Category slug** - Put a unique slug to show in the URL before the [**courses category**](https://docs.stylemixthemes.com/masterstudy-theme-documentation/lms-courses-features/courses-category), e.g. <https://example.com/blog/><mark style="color:green;">course-category</mark>/<mark style="color:yellow;">templates</mark> (<mark style="color:green;">course-category</mark> - **slug**, <mark style="color:yellow;">templates</mark>- **category**).
* **Show featured courses on top of the list page** - This option displays **featured courses** on the top of the course list page.
* **Number of featured courses on the Archive page** - Specify the number of featured courses to display on the **Archive Page**

<figure><img src="https://2021837383-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDO9V_qgvV5cQdw04iz%2Fuploads%2Fv919hdzPzTDZyn0l6UQm%2Fimage.png?alt=media&#x26;token=662a49a4-8406-4a2b-8a0c-9d215c399390" alt=""><figcaption><p>Featured Courses on the top of the Courses Page</p></figcaption></figure>

## Filters on the Archive Page

<figure><img src="https://2021837383-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDO9V_qgvV5cQdw04iz%2Fuploads%2FeDAq2ahOIg4a3FQSr1Sl%2Fimage.png?alt=media&#x26;token=07de7d6e-65b1-425e-8d3c-ee13710eb50a" alt=""><figcaption></figcaption></figure>

* **Filters on the Archive page** - Enable course filtering by categories, there are 7 filters available that you can enable according to your needs. Available options are:
  * **Category** - filter by [course categories](https://docs.stylemixthemes.com/masterstudy-theme-documentation/lms-courses-features/courses-category)
  * **Subcategory** - filter by course subcategory
  * **Levels** - filter by course levels
  * **Rating** - filter by course rating
  * **Status** - filter by course status
  * **Instructor** - filter by the instructor
  * **Price** - filter by price

With these options, users can use the sidebar on the course listing page and filter the browsing depending on the chosen category. Every time they apply the filter they do not need to reload the page, every change displays instantly.

<figure><img src="https://2021837383-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDO9V_qgvV5cQdw04iz%2Fuploads%2FHnK6wfCPFk6wgPJ4p7Or%2Fimage.png?alt=media&#x26;token=07516958-bf4b-4d1f-a0ef-375fc828627d" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Please note when the filters are enabled, the number of courses per row will be **3** by default to ensure the **best look.**
{% endhint %}