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.
Creación de la plantilla
To start creating your Template, go to Appearance > Editor > Templates and click Add Template.
Select Custom Template to start from a blank slate.
Give your template a name, then click ‘Create’ and wait for the new template to be loaded in the editor.
If you’re prompted to select a pattern, click Skip to continue editing the blank template.
Análisis del diseño
We will use this design as an example from Sensei’s 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.
La familia tipográfica de los títulos es "League Gothic", mientras que el resto del texto utiliza "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.
Bloques de diseño
Grupo
We will wrap everything in a group block to apply general styling to the entire page: padding and background colors. This allows you to customize the width of the lesson content.
In our blank template created earlier, add a Group block. Then select the block and on the settings on the right panel, disable the setting: Inner blocks use content width. In the styles tab, 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 text color to #00594F.
Eso es todo para el bloque de grupo.
Fila
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 justification to space between items:
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:
Columnas
Junto al bloque de filas, añadimos el bloque de columnas. Lo ajustamos a dos columnas con una división 66:33.
Columna 1
First, we insert Sensei’s Main Content block. Inside the Main Content block, we insert the post title and content blocks.
Columna 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:
Acciones de la lección
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 Save, the template is updated.
To apply the template to a lesson, open any lesson in the editor and click the template in the right sidebar, then click Change template and select your newly created template.
The new template appears among the site editor templates and can be edited directly from the site editor at Appearance > Editor.
That brings us to the end of this tutorial. You can continue to tweak the design, but this tutorial aims to illustrate the basics of custom template creation in learning mode and how to use it in your lessons.