Customizing your course design
Lesson pages currently have five main parts: the video, the video info (chapter title & lesson title) and a space for adding page sections, a footer, and a sidebar that acts separately from the page content.
You can use the video display section to assign a unique button style for desktop and mobile separately.
Course Navigation refers to the sidebar; you can toggle this to be on the left or right. You can also choose to display the lesson thumbnails which are set to a 1:1 ratio.
In the lesson design menu, you can adjust the spacing between the header content and the border, as well as the chapter and lesson title, separately. We also have the option to toggle on a divider which works the same way it does for standard page sections.
After the lesson content, you can add multiple-page sections. These seem to function like standard page sections and respond to standard CSS selectors, and have unique data section ID’s. And yes- we can add auto layouts, like gallery & list sections! 🎉
Finally, a footer section displays the complete & continue/next lesson button. This section does not appear to have any additional design features at this time.
But wait - there’s more!
I love how many customization options we have using the Site Styles menu and page sections inside a lesson, but things like the progress bar and sidebar can get even more unique with custom CSS.
In the next lesson, we’ll get creative with code so you can create a unique course that matches the rest of your website… or not!