Gutenberg Blocks
Last updated
Last updated
Our LMS plugin seamlessly integrates with Gutenberg, 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.
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:
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
If you cannot find them among the available blocks, open the editor preferences:
Move to the Blocks tab and enable all MasterStudy Blocks:
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.
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
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.
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
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.
Parameters are the same as Filter by Taxonomy.
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.
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.
Available options in the BlockSettings:
Presets - select the preset according to your needs
Do not forget to indicate special images and colors for the Course Categories! Without them, you will not get the result you wanted in presets Colorful, Sleek, Dynamic, and Dynamic with Title Below.
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
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:
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 Archive block is constructed using Courses Filter Columns, Course Card, and a Filter by Taxonomy. You can click on them and modify their settings according to your needs.
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.
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
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.
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
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.
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.
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.
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:
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
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
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
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:
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
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
