This is a tutorial that shows how to create a Learning Mode template. We’ll go through the steps one by one as follows.
Important note: while this tutorial aims to help you create a template, we can’t assist with the customization of our products, nor can we help troubleshoot, modify or debug custom code, or officially endorse third-party customization solutions, as per our support policy. We provide some customization guidelines. However, these are for reference/guidance only, and we cannot guarantee that they will always work as expected.
Creating the Template
To start creating your Template, visit a lesson that has Learning Mode enabled and click ‘New’.
After creating a new template, give the template a name from the opening modal. Then click ‘Create’ and wait for the new template to be loaded in the editor.
Now, the new template will contain content from the current template in use, so delete all the content in the template so we have a blank slate to start with.
Analyzing the design
We will use this design as an example from Sensei’s new Course theme (see the image below):
We can divide the design into 3 broad sections:
- The header section
- The two-column content section with content on the left and course navigation on the right
- The lesson actions section.
We will use the hex values of the colors: the closest hex value for the text colors is royal green #00594F. For background, we have something similar to #F1EDE7.
The font family for the headings is ‘League Gothic’ while the other text use ‘EB Garamond’.
For brevity of this tutorial, we will focus on the layout and some basic styling, not going into the details of reproducing an inch-perfect design.
Layout blocks
Group
We will wrap everything in a group block to apply general styling to the entire page: padding and background colors.
In our blank template created earlier, add a Group block. Then select the block and on the settings on the right panel, uncheck the radio button: ‘Inner blocks use content width’, set the padding to 200px on the right and left and 10px on the top and bottom.
Feel free to adjust these values to meet your specific needs. Also, set the background color to #F1EDE7 and color to #00594F.
That’s all for the group block.
Row
Inside our group block, the first item is a row. This will be the container for the first row of items of the design, the heading and the ‘Exit Course’ block. Add a row block and set the orientation to space between:
Inside the row, we add two items. First is the Heading block with typography set to Medium, capitalise and semi-bold; we set the text to ‘How to write’.
Next, we add Sensei’s Exit Course block to the row block, which wraps up our template’s first segment:
Columns
Next to the row block, we add the columns block. We set it to two columns with a 66:33 division.
Column 1
First, we insert Sensei’s Main Content block. Inside the Main Content block, we insert the post title and post content blocks.
Column 2
First is the spacer block, 50px or whatever fits your design; next is Sensei’s Sidebar Menu block.
Set the border of the Sidebar Menu block to 1px and set the color to #00594F, then add a padding of about 12px or whatever fits your design better.
Inside the Sidebar Menu block, add these three Sensei blocks: Course Progress, Course Progress Bar and Course Navigation blocks:
Lesson Actions
Finally, we add Sensei’s lesson actions block after the main Columns block. This is the last piece of the design, so we can step back and review everything.
Apply the template to lessons.
When we click on Update, both the template and the post content are updated, and we can view the lesson to see our new template in action. Click the back arrow button to switch out of template mode in the editor. We can also easily switch templates from the template section on the side panel.
The new template appears among the site editor templates and can be edited directly from the site editor.
That brings us to the end of this tutorial. A lot can be improved, but this tutorial aims to illustrate the basics of custom template creation in learning mode and how to use it in your lessons.