Creating the Template
To start creating your own 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 from Sensei’s new Course theme (see image below).
We can divide the design in to 3 broad sections: the header section, the two column content section with content on the left and course navigation on the right, and finally the lesson actions section.
We will use the hex values of the colours: the closest hex values for the text colours 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 just focus on the layout and some basic styling, not going into the details of reproducing an inch-perfect design. Let’s begin.
Layout blocks
Group
We are going to wrap everything in a group block so that we can apply general styling the entire page: padding and background colours.
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 colour to #F1EDE7 and colour 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 2 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 and that wraps up the first segment of our template.
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 here 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 colour 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.
Now 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. There’s a lot that can be improved upon but the aim of this tutorial is to illustrate the basics of custom template creation in learning mode and how to use it in your lessons.