The course layout page serves as the main index for your course. This page allows you to highlight what your course offers, outline the skills users will gain, and provide an overview of the course content. After users complete their purchase they will need to navigate to this page to see the course details, such as the title, description, and content, and will be directed to the course player to start their learning journey.
In this article, we will learn how to access and customize the course layout page.
Accessing the Course Layout Page
To access your course layout page:
1. Navigate to Courses → Course manager.
2. Click on the course you want to customize from your list, then go to the Contents section and click on the Course Page Layout tab.
3. Click on Edit course layout.
You can alternatively, navigate to the Website → Design → Edit website. From there, either locate the course's page in the dropdown menu or access it through your page manager.
Customizing the Course Layout Page
You can enhance your Course Layout page by adding sections and widgets to create a customized experience for your users. Below, we will learn more about the course hero and contents section.
Course Hero Section
Before launching your course, it’s important to organize the purchase and navigation flow. Adding a course hero section ensures that users can easily purchase the course and navigate to the course player.
The Course Hero section is specific to each course's layout and cannot be copied to other courses.To add this section:
1. Hover between existing sections on the page and click on +Add Section.
2. Locate the For This Course Page or Products categories to find the Course Hero section.
3. Select the template you want to use by clicking on it.
The Course Hero section includes an automatic system (enroll) button that streamlines the payment and navigation flow for your products. By clicking the enrollment button, you'll be registered for the course, and it will then change to a Continue to course button, allowing you to seamlessly proceed with the course in the course player.
Course Contents Section
Adding a course contents section helps you display the structure of your course. This section is crucial for users to see an overview of the course’s contents, especially if you offer free preview sections for paid courses. To add this section:
1. Hover between existing sections on the page and click on +Add Section.
2. Locate the For This Course Page or Products categories to find the course contents section.
3. Select the template you want to use by clicking on it.
If your course is a Paid course with free course sections you must add a Course Contents section to your course layout page for the unenrolled users to get directed to the course player and view the Free section(s) of the Paid course before purchase. 
After adding the Course Contents section on your Course Layout page, you can click on it to make alterations via the sideform. By clicking on the section's different elements, you can further customize it, hide/show specific elements, select the course's content that you wish to display, etc.
In the course contents section you can include the following optional elements:
- Section Description: Add a brief description of the course section content.
- Unit Background Image: Upload an image that represents the course section.
Section Description
To add a section description:
1. Go to the Courses menu, select the course, and navigate to the Course Outline tab.
2. Click the pencil icon at the top left of your section. Locate the Section Description field and add a description that reflects the content of the section.
Once added, the description will appear in the Course Contents section on your layout page.
Unit Background Image
You can add a background image to any learning activity within your course. To do so:
1. Go to the respective course, locate the learning activity under the Course Outline tab, and click on Settings.
2. Add a Unit Background Image from this menu.
This image will be reflected in specific course content sections on the layout page.
In case you would like to make course contents unclicable you can use the below CSS in your school. Go to Website → Design → Edit website → Site → Site custom code. Copy from this article the snippet code, paste it in the <style> Dynamic (CSS) or Page Custom Code → <style> logged in (css) or logged out
/** Learnworlds Dev CSS **/
.lw-course-contents .lw-course-contents-unit {
cursor: pointer;
pointer-events: none;
}
/** End of Learnworlds Dev CSS **/
- Section Descriptions will appear in most Course Content sections, except for a few templates.
- Draft or Soon sections will not appear in the course contents section.
- Only a limited number of course content sections utilize the Unit Background image option. This feature will only be visible in the specified course content sections, as listed below:
