# Gutenberg Blocks As **MasterStudy Templates** come with the **MasterStudy LMS plugin**, you will also receive a bunch of widgets that come with the plugin for popular page builders like [**Elementor**](https://docs.stylemixthemes.com/masterstudy-lms-starter-theme/lms-widgets/elementor-widgets), **WPBakery**, **Gutenberg, and** [**Divi**](https://docs.stylemixthemes.com/masterstudy-lms/divi-builder-integration/getting-started). {% hint style="success" %} In this documentation, we will cover the available MasterStudy LMS Gutenberg Blocks. {% endhint %} ## How to Use MasterStudy Gutenberg Blocks? ### Adding MasterStudy Blocks On the **Gutenberg editor** press the '+' button to add blocks:

In the Blocks tab, you can see the available blocks to use. Find MasterStudy Blocks:

After adding blocks there are four types of settings you can play: {% tabs %} {% tab title="Visual Editor" %} You can set the available presets and styles just in the visual editor part of the Gutenberg. For example here is how Visual Editor shows when you add Courses Grid:

{% endtab %} {% tab title="Block Settings: General" %} When you select the block on the **right sideba**r there will be page and block settings (preferences). In the general tab, you can change the texts inside of the block and modify other behavioral settings:

{% endtab %} {% tab title="Block Settings: Style " %} In the **Style section** of the block, you can modify the look of all elements (cards, containers, buttons) that have been used to construct the block:

{% endtab %} {% tab title="Block Settings: Advanced" %} In the **Advanced tab** of the Block Settings, you can set the HTML Anchor tag, Additional CSS, and some other advanced settings:

{% endtab %} {% endtabs %} {% hint style="success" %} We see **Visual Editor** and **Block Settings: General** preferences of our blocks, as other settings are default and **almost the same** for all Gutenberg Blocks {% endhint %} ### Enabling MasterStudy Blocks If you **cannot find** them among the available blocks, open the **editor preferences**:

Move to the **Blocks tab** and enable **all MasterStudy Blocks:**

## MasterStudy Blocks ### Featured Teacher The **MasterStudy** **Featured Teacher** block highlights an instructor on your site with better progress than others. You can showcase the instructor's profile, including their biography, the courses they teach, and any relevant achievements. This block helps to promote instructors and provide students with insights into their expertise and teaching style.

#### Block Parameters In the **Visual Editor,** you have to indicate a special picture to indicate the instructor and select the course card style:

In the Block Settings you can change:

(continued) General Tab of the Block Settings

* **Courses Per Page** - indicate the number of courses of the instructor that have been displayed in the block * **Courses Per Row** - indicate the number of courses per row * **Instructor** - you can choose the specific instructor using it * **Sort By** - use this setting to sort the courses of the courses * **Course Category** - using it you can display only the courses of the specific category * **Label** - using the toggle you can enable/disable the label 'Teacher of the Month' * **Label Text** - indicate the text for the label * **Position** - enable the toggle to display the position of the instructor * **Biography** - enable the toggle to display the biography of the instructor * **View All Button** - enable the toggle to display the special button that opens all courses of the instructor * **Button text** - indicate the text of the View all Button * **Button URL** - you can also indicate a specific URL to this button according to your needs ### Courses Grid The **MasterStudy** **Courses Grid** block enables you to display a grid of courses on your site. It allows for customizable layout options to showcase your courses, including filtering by category, popularity, or rating. This block is perfect for presenting a detailed view of your course offerings, helping students easily find and choose courses that suit their interests.

#### Block Parameters In the **Visual Editor** you can select the **Course Card Style** and change the text **'Courses Grid':**

Here is the look of the course card presets on the front: {% tabs %} {% tab title="Classic" %}

{% endtab %} {% tab title="Price Accent" %}

{% endtab %} {% tab title="Price Button" %}

{% endtab %} {% tab title="Full Size Image" %}

{% endtab %} {% endtabs %} In the Block Settings you can change the following: **Layout:**

* **Courses Per Page** - indicate the number of courses per page * **Courses Per Row** - indicate the number of courses per row. You can use the icon to select for mobile and tablet views as well. * **Sort By** - choose the method to sort the courses that need to be displayed * **Course Category** - choose the specific categories to display #### Filter (by taxonomy)

If you select the filter, you will get the following block settings:

* **Filter by taxonomy** - disable it to hide the filter * **Filter** - choose the style to display the filter: {% tabs %} {% tab title="Buttons" %}

{% endtab %} {% tab title="Tabs" %}

{% endtab %} {% tab title="Select" %}

{% endtab %} {% endtabs %} * **Options** - select the options to display. Available options are **Newest, Oldest, Popular, Overall rating, Price low, and Price high.** * **Filter Position -** select the position of the filter: left, center, right. #### Filter by Course Category

Parameters are the same as [**Filter by Taxonomy.**](#filter-by-taxonomy) #### Course Card

Available **Block settings** for the **Course Card:**

* **Card Preset** - select the one of the presets * **Space between Cards** - indicate the space between cards in pixels * **Card Items** - modify the items that have been displayed on the card. Use the hamburger icon (on the left side) you can change their orders. * **Rating** - inserts the rating of the course (with stars) * **Category** - inserts the category of the course * **Title** - inserts the title of the course * **Dataslots** - inserts a special division that consists of two data slots to add more data. Available data are **Views, Lectures, Duration, Leve,l Members,** and **Empty.** * **Divider** - inserts a divider (horizontal row) into the card * **Featured Label Position** - choose the position of the featured label * **Status Style** - select the style to display the status of the course * **Status Position** - select the position of the status of the course There is also a **Load More button** which can be **positioned** and **displayed** at the bottom of the course grid according to your needs.

### Courses Categories The **MasterStudy Courses Categories** block provides an organized list or grid of course categories. Users can easily browse different categories to find courses that match their interests. This block helps in structuring your course offerings and improving user navigation.

#### Block Parameters Available options in the **BlockSettings**:

* **Presets** - select the preset according to your needs {% hint style="warning" %} Do not forget to indicate **special images and colors** for the [**Course Categories**](https://docs.stylemixthemes.com/masterstudy-lms/lms-course-features/courses-category)! Without them, you **will not get** the result you wanted in presets **Colorful, Sleek, Dynamic,** and **Dynamic with Title Below.** {% endhint %} * **Select Taxonomy** - the setting gives you the availability to display several categories only * **Categories Per Row** - indicate the number of categories per row * **Wrap** - disable the toggle to get a horizontal scroll of the categories. They will be displayed in a row. * **Align Content** - choose the alignment ### Courses Archive The MasterStudy **Courses Archive** block enables you to display a list or grid of all archived courses. This block is useful for keeping your site organized by providing a dedicated space for courses that are no longer actively running but are still accessible for reference or self-paced learning. Archive Pages can be specified in the **MasterStudy LMS Settings > Courses > Page Layout > Courses Page.** Learn More about the Archive Page: {% embed url="" %}

#### Block Parameters In the **Visual Editor** choose the Course Card preset and indicate the text 'Courses Archive':

In the Block settings you can modify the layout parameters:

* **Courses Per Page** - indicate the number of courses of the instructor that have been displayed in the block * **Courses Per Row** - indicate the number of courses per row {% hint style="info" %} Courses Archive block is constructed using **Courses Filter Columns**[**,**](#courses-categories) [**Course Card**](#course-card)**,** and [**a Filter by Taxonomy**](#filter-by-taxonomy). You can click on them and modify their settings according to your needs. {% endhint %} ### Courses Carousel The **Courses Carousel** block presents courses in a dynamic, sliding carousel format. You can highlight featured courses, new releases, or popular courses in a visually engaging way. This block is perfect for drawing attention to specific courses and encouraging user interaction.

#### Block Parameters In the **Visual Editor** of Gutenberg, you have to select the **card style preset** and change the **'Course Carousel'** text:

The available parameters in the Block Settings:

**Layout** * **Slides To Show** - indicate the number of courses that need to be displayed in the carousel * **Slides in Carousel** - indicate the number of courses in the carousel * **Sort By** - choose the method to sort the courses * **Course Category** - choose the course categories that the courses need to be displayed * **Autoplay** - enable the toggle to turn on the autoplay of the carousel so slides (courses) in it will change without pressing the navigation buttons * **Loop** - enable the toggle to create a loop of slides so that once you reach the end of courses it will display the first one again * **Nav Arrows Position** - choose the position of the arrows in the navigation buttons ### Courses Bundles {% hint style="warning" %} Available in the **Pro Plus version** of the [**MasterStudy LMS Plugin.**](https://docs.stylemixthemes.com/masterstudy-lms/getting-started-1/free-version-and-pro-version) {% endhint %} The **MasterStudy** **Courses Bundles** block allows you to display groups of related courses that are offered together as a bundle. This block is ideal for promoting bundled course packages, offering students a comprehensive learning path often at a discounted rate. {% embed url="" %}

#### Block Parameters Available parameters in the Block Settings:

**Layout** * **Number of bundles** - indicate the number of bundles that will be displayed on a page * **Bundles per Row** - indicate the number of bundles per row * **Select Bundles** - choose the bundles that will be displayed (or do not select to display all) * **Order by** - select the method to order bundles * **Alignment** - choose the alignment of the block ### Courses Search The **MasterStudy** **Courses Search** block adds a search bar that allows users to quickly find courses by keywords. This block enhances the user experience by efficiently locating specific courses, making it easier for students to find exactly what they are looking for.

#### Block Parameters Available parameters in the Block Settings:

**Layout** * **Presets** - select the preset to display the search bar * **Categories** - enable the toggle to add categories dropdown to the search bar so users can search the courses only in the course category that they selected. ### Testimonials The **Testimonials** block lets you display student or instructor testimonials on your site. You can showcase feedback and reviews in a visually appealing format, helping to build credibility and trust with prospective students. This block is perfect for highlighting positive experiences and success stories related to your courses and instructors.

#### Block Parameters In the **Visual Editor** add the **title, testimonial text,** and **the name** of the person who left those words:

The available preferences in the **Block Settings:**

#### Testimonial Slide * **New Slide** * **Add Slide -** adds a new testimonial slide

* **Colors** - choose the colors for the elements respectively

* **Current Slide** - in this tab you can select the image for the current slide of the testimonial

### Instructor Carousel The **Instructor Carousel** block presents your instructors in a dynamic, sliding carousel format. You can highlight featured instructors, new additions, or popular teachers engagingly. This block helps to draw attention to your teaching staff and provides students with insights into the expertise available on your platform.

**Block Parameters** The available preferences in the **Block Settings:** **Layout**

* **Slides to Show** - indicate the number of slides to display * **Slides in Carousel** - indicate the number of instructors that will be in the carousel * **Order by** - choose the method to order instructors in the carousel * **Instructors** - you can select the instructors to display manually * **Autoplay** - enable the toggle to change the slides within the predefined time * **Loop** - enable the toggle to change the slides in a loop, ensuring continuous and smooth transitions between instructors * **Navigation** - enable the toggle to display navigation buttons (arrows) * **Nav Arrows Position** - choose the position of the navigation buttons #### **Instructor Card**

* **Presets** - choose the preset for the instructor's card * **Position** - enable the toggle to display the position of the instructor (info will be inherited from the instructor profile, e.g: Lead Instructor, Professor of BA) * **Biography** - enable the toggle to display the biography of the instructor (info will be inherited from the instructor profile) * **Rating** - enable the toggle to display the rating of the instructor. Rating will be calculator automatically by the LMS * **Rating Style** - choose the style to display the rating * **Card Content Alignment** - select the alignment of the card contents * **Show Socials** - enable the toggle to display the social accounts of the instructors ### Instructors Grid The **Instructors Grid** block allows you to display a grid of instructors on your site. You can customize the layout to showcase various instructors. This block is ideal for presenting a comprehensive view of your teaching staff in an organized and visually appealing manner.

**Block Parameters** The available preferences in the **Block Settings:** #### **Grid**

* **Instructors Per Page** - indicate the number of instructors to display in the grid * **Instructors Per Row** - indicate the number of instructors to display in a row * **Order By** - select a method to order instructors on the grid * **Instructors** - you can choose the instructors to display on the grid manually #### **Instructor Card**