# 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.**

![](https://691205473-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDTL6WUldKvxQaP8jzz%2F-MlSoNVW-EiAGEAoTPGI%2F-MlStzYuN7tbTEdj1lfF%2Fdivi_new_page.png?alt=media\&token=2eddb653-5add-45f5-b49f-af3d6c23a5c3)

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

![](https://691205473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTL6WUldKvxQaP8jzz%2Fuploads%2FuXonDG0XoLkd6oj9ClIs%2Fall_modules.png?alt=media\&token=d761fef1-6232-4ece-9696-e7a39a3c9fdc)

## Free Modules

### MS Courses Grid

Use this Divi module to create a Courses Grid block.

![](https://691205473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTL6WUldKvxQaP8jzz%2Fuploads%2FCpoPkPndJLdRCDB370uj%2Fcourses_grid.png?alt=media\&token=92efc8f3-3e06-4399-bfbc-de9f1627c873)

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:**

![](https://691205473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTL6WUldKvxQaP8jzz%2Fuploads%2FjEdOVBkFW0LAvBZX5bCq%2Fgrid_block_front_1.png?alt=media\&token=c3846308-cb36-47ea-98bf-5621d055c269)

### MS Courses Carousel

Use this Divi module to create a Courses Carousel block.

![](https://691205473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTL6WUldKvxQaP8jzz%2Fuploads%2F5s33R182n0XLbYxyutD1%2Fcourses_carousel.png?alt=media\&token=27d4315b-9a96-48b7-a088-469e1f58c128)

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:**

![](https://691205473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTL6WUldKvxQaP8jzz%2Fuploads%2F1zh0WGNfL2DzbzkLDzrN%2Fcourses_carousel_front.png?alt=media\&token=23e67e44-56e6-41df-8e1c-68b1ac4ba996)

### MS Courses Categories

Use this Divi module to create a Courses Categories block.

![](https://691205473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTL6WUldKvxQaP8jzz%2Fuploads%2FyynO90BuQlm3HxoYIQOB%2Fcourse_categories.png?alt=media\&token=ccc26726-8305-4283-a423-1fefdc502bf8)

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:**

![](https://691205473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTL6WUldKvxQaP8jzz%2Fuploads%2F2uPzb5USHpWu88ydIKt2%2Fcategories_front_1.png?alt=media\&token=15eb8e45-8f31-45ee-918c-0274b4773bc6)

### MS Courses Searchbox

Use this Divi module to create Courses Searchboxes.

![](https://691205473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTL6WUldKvxQaP8jzz%2Fuploads%2FwNA6nSDaiFRpty7tm15r%2Fcourses_searchbox.png?alt=media\&token=43ce7dde-7202-4e55-9b46-5839effe390f)

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](https://691205473-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDTL6WUldKvxQaP8jzz%2F-MlEl487EWrOTIoPfQAc%2F-MlExNPUKVheP-vcLUZf%2Fsearchbox_1_front.png?alt=media\&token=9a629812-7bcd-41d9-8bb1-c96da592e106)

![Style 2](https://691205473-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDTL6WUldKvxQaP8jzz%2F-MlEl487EWrOTIoPfQAc%2F-MlExSnMEAIob6RSIBtt%2Fsearchbox_2_front.png?alt=media\&token=95ea0124-ec6e-489c-a320-7c809799135c)

### MS Featured Teacher

Use this Divi module to create a Featured Teacher block.

![](https://691205473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTL6WUldKvxQaP8jzz%2Fuploads%2FxHB6ad0YLf4leqwP9t3B%2Ffeatured_teacher.png?alt=media\&token=0b9cd887-c9e1-4cca-b6da-8ddcefaf3302)

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:**

![](https://691205473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTL6WUldKvxQaP8jzz%2Fuploads%2FnOIvY8jE67IWVtPU16kX%2Ffeatured_teacher_front_1.png?alt=media\&token=eb8f5287-6f23-4c6b-8eb3-7984d1268acf)

### MS Instructors Carousel

Use this Divi module to create a Courses Carousel block.

![](https://691205473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTL6WUldKvxQaP8jzz%2Fuploads%2FhI68DOXbXO753q68a40S%2Finstructor_carousel.png?alt=media\&token=eef3af32-8636-4081-a637-d6d7656bddd1)

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:**

![](https://691205473-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDTL6WUldKvxQaP8jzz%2F-MlExVMd2fi8QELLSBwJ%2F-MlF1fVR4pa0pGcx2f4h%2Finstructors_carousel_front.png?alt=media\&token=098eff6d-6715-458c-a8b6-d5140dff55a9)

### MS **Recent Courses**

Use this Divi module to create a Recent Courses block.

![](https://691205473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTL6WUldKvxQaP8jzz%2Fuploads%2FQh5v88rKcbHpmjzQgyVW%2Frecent_courses.png?alt=media\&token=c28715dd-bd0e-4ed4-b4c8-9901a2a0e4b9)

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:**

![](https://691205473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTL6WUldKvxQaP8jzz%2Fuploads%2FhCJkMj3Rga8BsLKCRutc%2Frecent_courses_front_1.png?alt=media\&token=52b2a0aa-3528-40f4-80ac-e84051f75f8b)

### **MS Single Course** Carousel

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

![](https://691205473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTL6WUldKvxQaP8jzz%2Fuploads%2FzPJxbZesAdtMncxriLqw%2Fsingle_course_carousel.png?alt=media\&token=e5234a9e-3702-4d6d-bd2b-2418362451d2)

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:**

![](https://691205473-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDTL6WUldKvxQaP8jzz%2F-MlF9szkyB2B_u4e9zsi%2F-MlFAPanI3VStuwRjMld%2Fsingle_course_carousel_front.png?alt=media\&token=a6784b27-6ff0-4dbb-9c97-ff65b2ba8304)

### MS **Icon Box**

Use this Divi module to create an Icon Box block.

![](https://691205473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTL6WUldKvxQaP8jzz%2Fuploads%2Fts4m3wkJ02rNYHAH9wFO%2Ficon_box.png?alt=media\&token=8be896ae-9136-41f1-a5da-c4d0e29777aa)

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:**

![](https://691205473-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDTL6WUldKvxQaP8jzz%2F-MlEl487EWrOTIoPfQAc%2F-MlEt73HQxn5OIXUo2Hz%2Ficon_box_front.png?alt=media\&token=73bd3bed-bdd4-498f-be73-a3b5d58fefea)

### MS Blog Module

Use this Divi module to create a Blog module.

![](https://691205473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTL6WUldKvxQaP8jzz%2Fuploads%2FxU7znC8epzMC9N8V9pC5%2Fblog_1.png?alt=media\&token=9eaf651c-f42f-4abe-b8af-4623490b0148)

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:**

![](https://691205473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTL6WUldKvxQaP8jzz%2Fuploads%2F6LVAXoTQpNAStPvuosa5%2Fblog_front_2.png?alt=media\&token=864ead75-c449-4834-8746-b5e93bcab63d)

## Pro Modules

### MS Course Bundles

Use this Divi module to create a Course Bundles block.

![](https://691205473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTL6WUldKvxQaP8jzz%2Fuploads%2FEGz0STCci3ejWRiwiERi%2Fcourse_bundles.png?alt=media\&token=fa0a1ee2-01da-402d-a6a2-486730c0b0ab)

{% 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="../lms-pro-addons/course-bundles" %}
[course-bundles](https://docs.stylemixthemes.com/masterstudy-lms/lms-pro-addons/course-bundles)
{% 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:**

![](https://691205473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTL6WUldKvxQaP8jzz%2Fuploads%2FHl7hBoSgbxoYx5htP676%2Fbundles_front_1.png?alt=media\&token=12ff3394-01bb-47a2-ae7b-5dac02c815cb)

### MS Google Classrooms

Use this Divi module to import a Google Classrooms block.

![](https://691205473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTL6WUldKvxQaP8jzz%2Fuploads%2FhZMw06LZOdKiNy1OHcdX%2Fgoogle_classrooms.png?alt=media\&token=90007548-d122-4696-85c2-78ea2a4e9699)

{% 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="../lms-pro-addons/google-classroom" %}
[google-classroom](https://docs.stylemixthemes.com/masterstudy-lms/lms-pro-addons/google-classroom)
{% 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:**

![](https://691205473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTL6WUldKvxQaP8jzz%2Fuploads%2F0k64f7qlCB7ClC3URu4M%2Fgoogle_classrooms_front_1.png?alt=media\&token=95f857ef-b194-46ed-a404-4d4db4ecab91)

### MS Certificate Checker

Use this Divi module to add the Certificate Checker bar.

![](https://691205473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTL6WUldKvxQaP8jzz%2Fuploads%2FYTZ0MJB75m4TDUxBC819%2Fcert_checker.png?alt=media\&token=d92f66b8-834c-4c5a-a241-478adc79ec30)

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:**

![](https://691205473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTL6WUldKvxQaP8jzz%2Fuploads%2Fv6s8Vqd6sErEGvW4Dggc%2Fcert_checker_front_1.png?alt=media\&token=df2b1092-e974-448c-9e5b-0c99bcdd6331)