Learning Mode Templates
We include four different Learning Mode templates in Sensei Pro. The Default template is available in the free Sensei LMS plugin as well.
Default Template
The Default Template is a clean, polished, minimal template that works great for all courses. Its layout consists of a two-column main body with the Course Navigation Block on the left side and the course main content on the right. The top has your site’s branding alongside the Course Progress Bar, and below, you’ll see the Course Actions.
This template is built with both custom Sensei blocks and some core layout blocks like group, post title, and post content blocks.
These are the Sensei blocks on this template:
sensei-lms/ui, sensei-lms/course-title, sensei-lms/course-theme-course-progress-counter, sensei-lms/exit-course, sensei-lms/sidebar-toggle-button, sensei-lms/course-theme-course-progress-bar, sensei-lms/course-navigation, sensei-lms/spacer-flex, sensei-lms/button-contact-teacher, sensei-lms/course-theme-lesson-module, sensei-lms/course-theme-notices, sensei-lms/course-theme-lesson-actions and sensei-lms/page-actions.
Modern Template
This minimalistic modern template displays the course summary, top bar, featured video (if available), course time approximation, and difficulty level on the right side.
The Modern template’s approach of content first will be a great distraction-free option for your course. This template also features the Lesson Video Block displayed in the main content area at the top.
Note: To use this block, you will need to use the Featured Video Block in the course editor.
This template is built with both custom Sensei blocks and some core layout blocks like group, columns, column, post title, and post content blocks.
In addition to the blocks in the default theme, we also include the sensei-lms/course-theme-lesson-video block, which is responsible for rendering the featured video block.
Note that this block is not the featured video block in the editor and is meant to be used only in the templates to detect and render the featured video block.
Video Template
This template features immersive video content that takes the full width of the page. The course summary moves to the right as a kind of playlist, and students can navigate between video lessons and track their progress. This template also includes the top bar course information.
This template is built with both custom Sensei blocks and some core layout blocks like group, columns, column, post title, and post content blocks.
Like the modern template, this template also includes the sensei-lms/course-theme-lesson-video block, which renders the featured video block if one was added to the template.
Large Video Template
With the Large Video template, the Featured Video Block will display the full width of the page, with the course summary moving underneath. The course summary will become “sticky” after the user starts scrolling further.
This template uses the same blocks as the video template. Like the modern and video templates, this template also includes the sensei-lms/course-theme-lesson-video block, which renders the featured video block if one was added to the template.
Video Embed Code and Featured Image
Since Learning Mode is based on blocks, the Video Embed Code (lesson setting) won’t have any effect. To use videos in your lesson, you must include video blocks. See what you can do with Video blocks in your lessons.
Featured Image won’t appear in your lesson unless you add the Post Featured Image block to a lesson or the Lesson template. In this case, it would display the featured image for all your lessons.
Comments
If you’d like to enable comments in Learning Mode, you must first add the ‘Post Comments Form’ block in the Site Editor for the lesson template.
In Appearance > Editor > Templates, select Lesson (Learning Mode) template.
Then, add the Post Comments Form block to the desired location of the lesson page:
Customizing Learning Mode
The Site Editor allows creators to modify and create layouts shared between pages and posts. Each layout is called a Template, and every change done to a Template will reflect on all pages and posts.
Although this guide will teach you the basics of using the Site Editor, this is the official guide from where you can learn more about it.
Sensei’s Learning Mode is built using the Site Editor; every layout is essentially a Site Editor Template. To see all available Templates, you can visit ‘Appearance’ > ‘Editor’, click the icon in the top left corner and select ‘Templates’.
In the above example, this site has two Templates from Sensei and three Templates from the Twenty Twenty-Two theme. If you are not using a block theme, only the Templates from Sensei are going to be available.
Clicking on a Template will open it on the Site Editor to customize it. Similarly with posts, to save the changes, click ‘Update’.
A customized Template icon will appear with a blue dot on top of it. In the dropdown menu, you can revert all customizations and return to the Template’s original state. Be careful, as your changes are going to be lost permanently.
Customizing the Template’s blocks
Any Template is comprised of blocks in a similar way to the post content. When you add a block to a Template, this block will appear in every post that uses this template.
WordPress provides Theme Blocks to allow users to add content which is relevant for many pages and posts. One example is the Post Content block, which is a placeholder in the Site Editor. However, its contents will be replaced with the actual post content in the front end.
Other examples of such blocks include the Post Title or the Site Logo. In this section, we will learn how to rearrange, add, and remove blocks to a Template.
The List View
The List View displays all the blocks included in a Template hierarchically.
Sensei’s Site Editor blocks have a green color.
This is a locked block. Sensei developers will generally mark blocks as locked in cases where removing and/or moving the block will break part of Sensei’s functionality. Only unlock a block if you are aware of the consequences.
Hierarchy levels are seperated by indents. In this specific case, the ‘Fixed Header’ block contains ‘Row’ and ‘Course Progress Bar’ blocks. The ‘Row’ in turn contains two other ‘Rows’.
Use this button to open or close the List View.
The List View
The List View is a very useful tool for analyzing the blocks contained in a Template. For example, in the above image the basic blocks for the default Learning Mode layout are displayed.
On top is the Fixed Header, which contains a Row with buttons, the course title, and the Course Progress Bar beneath it.
The rest of the page is defined by a Two-column Layout, which contains the Sidebar and the lesson’s Main Content. You can click on the image’s hotspots for a few more details.
Removing and Adding blocks
Learning Mode templates try to include the Sensei components that make sense for most users.
However, some of the components might not suit your needs. For example, suppose that you don’t want to allow the students to contact you, and you need to remove the ‘Contact Teacher’ block.
Here’s how to remove it:
- Select the block either in List View or in Site Editor.
- Open the dropdown menu.
- Select the option ‘Remove’ followed by the block name.
Now let’s suppose you want to use the empty space to promote another page by adding a button.
To add a block, you can either use the ‘+’ button or add it closely to another block. More specifically:
- Select an adjacent block.
- Open the dropdown menu.
- Select ‘Insert before’ or ‘Insert after’
- Type ‘/’ and the block name you want to add.
Rearranging blocks
Blocks can also be rearranged to change the Learning Mode layout. You can rearrange blocks using either drag and drop or the move buttons.
Alternatively, you can use List View with the added benefit that you will gain a better understanding of the resulting block hierarchy.
