MasterStudy LMS Pro Plus
Plugin PageVideo TutorialsChangelogResourcesGet MasterStudy
  • Introduction | MasterStudy LMS Documentation
  • Getting Started
    • Free Version and Pro Plus Version
    • System Requirements
    • Plugin Installation
    • Upgrading the License
    • Update The Plugin
    • AppSumo Deal
    • Update Billing Details and Access Invoices
    • LMS Wizard
    • LMS Widgets
      • Gutenberg Blocks
    • License Utilization
    • Fueature Request
  • LMS Settings
    • General
    • Courses
    • Course
    • Course Player
    • Reports & Analytics
    • Quiz
    • LMS Pages
    • Payment Methods
    • reCAPTCHA
    • Profiles
      • Authorization
      • Social Login
      • Profile Menu Reordering
    • Grades
    • Certificates
    • Payout
    • Privacy Policy
    • Shortcodes
    • Import/Export
  • LMS PRO Addons
    • Certificate Builder
    • Email Manager and Branding
      • Email Templates
    • LMS Forms Editor
      • How to edit the registration form?
    • Zoom Conferencing
    • Google Meet
    • Assignments
    • Drip Content
    • Group Courses
    • Live Streaming
    • Course Bundles
    • Point System
    • Media File Manager
    • SCORM
    • Trial Courses
    • Statistics & Payouts
    • Online Testing
    • Multi-instructors
    • Google Classroom
    • Udemy Course Importer
    • Prerequisites
    • The Gradebook
    • Upcoming Course Status
    • Question Media
    • Social Login
    • Audio Lesson
    • Grades
  • LMS Course Features
    • Course Builder
      • How to Add Math Equations in MasterStudy?
    • Lessons
    • Video Lessons
    • Quizzes
    • Questions
    • Reviews
    • Orders
      • Sales Page for Instructor
    • Courses Category
    • Course & Lesson Materials
    • Course Drafts for Instructors
    • Manage Students
    • Change Course Author
    • Instructors Requests
    • Video Preview for Single Course
    • Course Announcements
    • Public Profiles
  • PayPal Payouts Setup
    • General Settings
    • Business Account Settings
    • Developer Account Settings
    • Instructor Settings
    • Payouts Process
    • Automatic Payouts (Expert)
  • LMS Analytics
    • Analytics for Admin
      • Revenue
      • Engagement
      • Users
      • Reviews
    • Analytics for Instructors
      • Revenue
      • Engagement
      • Students
      • Reviews
    • Student Reports
  • Integrations
    • Membership System
    • H5P Plugin
    • Presto Player Integration
    • SureTriggers Integration
    • PeepSo Integration
    • Studiocart Integration
    • VdoCipher Integration
    • Polylang Integration
      • LMS Contents Translation
    • Plugin Translation
      • Loco Translate
  • WPML
    • Getting Started
    • Translating LMS pages
    • Translating Lessons
    • Translating Quizzes
    • Translating Assignments
    • Translating Courses
    • Making Static String Translations
  • Divi Builder Integration
    • Getting Started
    • MasterStudy LMS Divi Modules
  • Woocommerce
    • Installation and Settings
    • Orders Management
  • Troubleshooting
    • Introduction
    • Plugin Conflicts
    • Theme Compatibility
    • 404 Errors
    • Update Issues
    • New Comment Email
    • Cache Settings
    • Email not sending
    • Debug Logs
    • Submit a Support Ticket
  • Developer's guide
    • Components
      • Back-link
      • Button
      • Countdown
      • Curriculum-accordion
      • Discussions
      • File-attachment
      • Progress
      • Tabs
      • Nav-button
      • Hint
      • Editor
      • Alert
      • File-upload
      • Loader
      • Tabs-pagination
      • Dark-mode-button
      • Buy-button
      • Pagination
    • Course Builder Customization
    • Course Builder Custom Fields
    • Course Player Templates
  • Changelog
  • Release Notes
  • Changelog (Free Version)
  • Changelog (Pro Version)
  • Changelog (Divi Modules)
  • Stylemixthemes
    • MasterStudy Starter Theme
    • MasterStudy LMS Plugin
    • Themes
    • Plugins
Powered by GitBook
On this page
  • How to Use MasterStudy Gutenberg Blocks?
  • Adding MasterStudy Blocks
  • Enabling MasterStudy Blocks
  • MasterStudy Blocks
  • Featured Teacher
  • Courses Grid
  • Courses Categories
  • Courses Archive
  • Courses Carousel
  • Courses Bundles
  • Courses Search
  • Testimonials
  • Instructor Carousel
  • Instructors Grid

Was this helpful?

Export as PDF
  1. Getting Started
  2. LMS Widgets

Gutenberg Blocks

PreviousLMS WidgetsNextLicense Utilization

Last updated 7 months ago

Was this helpful?

Our LMS plugin seamlessly integrates with , the modern WordPress block editor, to provide a user-friendly and flexible content creation experience. With our custom Gutenberg blocks, you can effortlessly enhance your site with dynamic and interactive elements tailored to your e-learning platform. These blocks allow you to showcase courses, feature instructors, and create engaging course navigation, all within the intuitive Gutenberg interface. This integration ensures that you can build and manage your educational content with ease and precision, leveraging the full power of WordPress's latest editing capabilities.

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:

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:

When you select the block on the right sidebar 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:

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:

In the Advanced tab of the Block Settings, you can set the HTML Anchor tag, Additional CSS, and some other advanced settings:

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

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:

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

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:

  • 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

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

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

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

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

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.

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

  • 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

Parameters are the same as

Do not forget to indicate special images and colors for the ! Without them, you will not get the result you wanted in presets Colorful, Sleek, Dynamic, and Dynamic with Title Below.

Courses Archive block is constructed using Courses Filter Columns , and . You can click on them and modify their settings according to your needs.

Course Categories
Course Bundles
Filter by Taxonomy.
,
Course Card
a Filter by Taxonomy
Gutenberg
LogoWhat is a WordPress Archive Page?StylemixThemes
MasterStudy LMS Gutenberg Blocks
Featured Teacher
MasterStudy Featured Teacher
General Tab of the Block Settings
(continued) General Tab of the Block Settings
Course Card Block Settings
(continued) Course Card Block Settings
Load More Button