# MasterStudy LMS Divi Modules

## **Introduction**

Currently, our **MasterStudy LMS Divi Modules plugin** provides users with **10 modules** (widgets) that work with our **MasterStudy LMS plugin** and **3 additional modules** (widgets) that work with our **MasterStudy LMS Pro plugin.**

When you start creating or editing a page, you will be prompted to use **Divi Builder.**

![](/files/-MlStzYuN7tbTEdj1lfF)

In the **Insert Module** interface search bar, you can type **MS** to find all our **MS Modules.** 

![](/files/yNHtVe40UprmARm3CYax)

## Free Modules

### MS Courses Grid

Use this Divi module to create a Courses Grid block.

![](/files/JFj9JpqpbIt2UBjjzMOt)

Once you add it to your page you will find the following options in **Content** tab:

* **Hide Top bar** – hides module title and sorting option
* **Module Title** – specifies module header
* **Load more** – adds “Load more” button
* **Sort Courses** – adds sorting option
* **Image size** – specifies image size
* **Courses Per Row** – defines how many courses will be displayed per row
* **Courses Per Page** – defines how many courses will be displayed per page

**Design and Advanced** tabs are native for all Divi modules and responsible for adjusting appearance and custom CSS settings. Refer to [Divi Advanced Design Settings documentation page](https://www.elegantthemes.com/documentation/divi/advanced-design-settings/) for detailed information.

**Frontend view:**

![](/files/kOFzzhGPJr4Uq4Ih8Gjo)

### MS Courses Carousel

Use this Divi module to create a Courses Carousel block.

![](/files/PPr0zmAVZTqkVdBlhyIC)

Once you add it to your page you will find the following options in **Content** tab:

* **Module Title** – specifies module header
* **Sorting options** – adds sorting option
* **Previous/Next buttons** – adds Previous and Next buttons
* **Border removing** – removes module elements border
* **Displaying of categories** – defines whether categories will be displayed or not
* **Number of courses per row** – defines how many courses will be displayed per row
* **Included Categories** – defines what kind of courses will be shown on page

**Design and Advanced** tabs are native for all Divi modules and responsible for adjusting appearance and custom CSS settings. Refer to [Divi Advanced Design Settings documentation page](https://www.elegantthemes.com/documentation/divi/advanced-design-settings/) for detailed information.

**Frontend view:**

![](/files/isIiA1v2UPLYpVo33C9S)

### MS Courses Categories

Use this Divi module to create a Courses Categories block.

![](/files/IBUv42xtVFVs3pHYocT1)

Once you add it to your page you will find the following options in **Content** tab:

* **Module Title** – specifies module header
* **Style** – defines the appearance of style preset
* **Included Categories** – defines what kind of courses will be shown on page

**Design and Advanced** tabs are native for all Divi modules and responsible for adjusting appearance and custom CSS settings. Refer to [Divi Advanced Design Settings documentation page](https://www.elegantthemes.com/documentation/divi/advanced-design-settings/) for detailed information.

{% hint style="warning" %}
**NOTE:**

Categories should have pictures and icons for this module to work properly.
{% endhint %}

**Frontend view:**

![](/files/lO3K7ifD6IyBfMyDE5H6)

### MS Courses Searchbox

Use this Divi module to create Courses Searchboxes.

![](/files/bTNRJzbtFMHZlVRgZwDU)

Once you add it to your page you will find the following options in **Content** tab:

* **Module Title** – specifies module header
* **Style** – defines the appearance of style preset

**Design and Advanced** tabs are native for all Divi modules and responsible for adjusting appearance and custom CSS settings. Refer to [Divi Advanced Design Settings documentation page](https://www.elegantthemes.com/documentation/divi/advanced-design-settings/) for detailed information.

**Frontend view:**

![Style 1](/files/-MlExNPUKVheP-vcLUZf)

![Style 2](/files/-MlExSnMEAIob6RSIBtt)

### MS Featured Teacher

Use this Divi module to create a Featured Teacher block.

![](/files/5xxg8EoLENHQisbnEXEL)

Once you add it to your page you will find the following options in **Content** tab:

* **Module Title** – specifies module header
* **Instructor Position** – shows instructor's position (category)
* **Instructor Bio** – specifies instructors's bio
* **Image** – here you can upload a module background picture
* **Select instructor** – here you can select an instructor

**Design and Advanced** tabs are native for all Divi modules and responsible for adjusting appearance and custom CSS settings. Refer to [Divi Advanced Design Settings documentation page](https://www.elegantthemes.com/documentation/divi/advanced-design-settings/) for detailed information.

**Frontend view:**

![](/files/bUX5QimOJm03buV6VROz)

### MS Instructors Carousel

Use this Divi module to create a Courses Carousel block.

![](/files/ZomQ9cU5IVi9n0Rn7c8N)

Once you add it to your page you will find the following options in **Content** tab:

* **Module Title** – specifies module header
* **Title Color** – specifies module header color
* **Limit** – specifies the limit of instructors to show
* **Per row** – limit per row
* **Per row on Notebook** – limit per row on notebook
* **Per row on Tablet** – limit per row on tablet
* **Per row on Mobile** – limit per row on mobile devices
* **Style** – defines the appearance of style preset
* **Prev Next Buttons** – adds Previous and Next buttons
* **Pagination** – defines whether courses will be separated by pages or not
* **Sort by** – enables sorting option

**Design and Advanced** tabs are native for all Divi modules and responsible for adjusting appearance and custom CSS settings. Refer to [Divi Advanced Design Settings documentation page](https://www.elegantthemes.com/documentation/divi/advanced-design-settings/) for detailed information.

**Frontend view:**

![](/files/-MlF1fVR4pa0pGcx2f4h)

### MS **Recent Courses**

Use this Divi module to create a Recent Courses block.

![](/files/Thp0TcpIq2b8Odgt8Y9u)

Once you add it to your page you will find the following options in **Content** tab:

* **Module Title** – specifies module header
* **Number of courses to show** – defines how many courses will be shown on page
* **Style** – defines the appearance of style preset
* **Courses Per Row** – defines how many courses will be shown per row 
* **Image size** – specifies recent courses horizontal image size

**Design and Advanced** tabs are native for all Divi modules and responsible for adjusting appearance and custom CSS settings. Refer to [Divi Advanced Design Settings documentation page](https://www.elegantthemes.com/documentation/divi/advanced-design-settings/) for detailed information.

**Frontend view:**

![](/files/izVmiTScVPYzcGlv5dsu)

### **MS Single Course** Carousel

Use this Divi module to create a Single Course Carousel block.

![](/files/vvPIHjQjONdIaoHdMIlV)

Once you add it to your page you will find the following options in **Content** tab:

* **Module Title** – specifies module header
* **Sorting** – enables sorting option
* **Prev Next Buttons** – adds Previous and Next buttons
* **Categories** – defines of which categories courses will be shown in module

**Design and Advanced** tabs are native for all Divi modules and responsible for adjusting appearance and custom CSS settings. Refer to [Divi Advanced Design Settings documentation page](https://www.elegantthemes.com/documentation/divi/advanced-design-settings/) for detailed information.

**Frontend view:**

![](/files/-MlFAPanI3VStuwRjMld)

### MS **Icon Box**

Use this Divi module to create an Icon Box block.

![](/files/Zdefvp16rLiCaqu7fBH4)

Once you add it to your page you will find the following options in **Content** tab:

* **Image** – here you can upload module background picture
* **Button Link URL** – link to a specified page
* **Module Title** – specifies module header
* **Icon Box Description** – here you can add a module description
* **Icon Box Button** – specifies the module button
* **Image Width** – specifies module image size
* **Icon Box Width** – specifies module icon box size
* **Button Title Color** – specifies button title color
* **Button Background Color** – specifies button background color

**Design and Advanced** tabs are native for all Divi modules and responsible for adjusting appearance and custom CSS settings. Refer to [Divi Advanced Design Settings documentation page](https://www.elegantthemes.com/documentation/divi/advanced-design-settings/) for detailed information.

**Frontend view:**

![](/files/-MlEt73HQxn5OIXUo2Hz)

### MS Blog Module

Use this Divi module to create a Blog module.

![](/files/J7kANpBafphBujwWZnGY)

Once you add it to your page you will find the following options in **Content** tab:

* **Module Title** – specifies module header
* **Post Count** – defines how many posts will be displayed
* **Select the blog style** – defines the appearance of style preset
* **Post Date Title Color** – specifies date title color
* **Post Date Background Color** – specifies date background color

**Design and Advanced** tabs are native for all Divi modules and responsible for adjusting appearance and custom CSS settings. Refer to [Divi Advanced Design Settings documentation page](https://www.elegantthemes.com/documentation/divi/advanced-design-settings/) for detailed information.

**Frontend view:**

![](/files/XnU5hLrUxJgNpgmo7mlf)

## Pro Modules

### MS Course Bundles

Use this Divi module to create a Course Bundles block.

![](/files/TjLuC8K0BbOHj5jOyKfp)

{% hint style="warning" %}
**NOTE:**

For this widget to work properly, you need to activate the **Course Bundles addon** and set bundle limitations in **Dashboard > STM LMS > Course Bundle Settings.**

Widget won't be displaying any info if no bundle were created by Instructors.

Go to the following page for detailed instructions:
{% endhint %}

{% content-ref url="/pages/-Mdeou0Ajpnxd6JML4Hw" %}
[Course Bundles](/masterstudy-lms/lms-pro-addons/course-bundles.md)
{% endcontent-ref %}

Once you add it to your page you will find the following options in **Content** tab:

* **Module Title** – specifies module header
* **Number of Courses per page** – defines how many courses will be displayed on page
* **Number of Columns** – defines how many courses will be displayed on page

**Design and Advanced** tabs are native for all Divi modules and responsible for adjusting appearance and custom CSS settings. Refer to [Divi Advanced Design Settings documentation page](https://www.elegantthemes.com/documentation/divi/advanced-design-settings/) for detailed information.

**Frontend view:**

![](/files/qev3N8IlcKljjjMKfqjR)

### MS Google Classrooms

Use this Divi module to import a Google Classrooms block.

![](/files/5n3KyCj7bgjgWwitGTYY)

{% hint style="warning" %}
**NOTE:**

For this widget to work properly, you need to activate **Google Classrooms addon,** get **API Credentials,** and import **Google Classrooms.**

Go to the following page for detailed instructions:
{% endhint %}

{% content-ref url="/pages/-Mdep6hqrelQ7d3BxF7H" %}
[Google Classroom](/masterstudy-lms/lms-pro-addons/google-classroom.md)
{% endcontent-ref %}

Once you add it to your page you will find the following options in **Content** tab:

* **Module Title** – specifies module header
* **Number of Classrooms on the Page** – defines how many classrooms will be displayed on page

**Design and Advanced** tabs are native for all Divi modules and responsible for adjusting appearance and custom CSS settings. Refer to [Divi Advanced Design Settings documentation page](https://www.elegantthemes.com/documentation/divi/advanced-design-settings/) for detailed information.

**Frontend view:**

![](/files/r0S6S2jfjmlHJwZ2YKjc)

### MS Certificate Checker

Use this Divi module to add the Certificate Checker bar.

![](/files/BE6mWanBcChqJiJSnL28)

Once you add it to your page you will find the following options in **Content** tab:

* **Module Title** – specifies module header

**Design and Advanced** tabs are native for all Divi modules and responsible for adjusting appearance and custom CSS settings. Refer to [Divi Advanced Design Settings documentation page](https://www.elegantthemes.com/documentation/divi/advanced-design-settings/) for detailed information.

**Frontend view:**

![](/files/ph1VDdvQ7D0cm9hILPlC)


---

# 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.stylemixthemes.com/masterstudy-lms/divi-builder-integration/lms-divi-modules.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.