Product page and lesson page
How the product and the lesson appear to students: the listing model, the product banner, the sidebar, marking, the offer and the taxonomies.
Each product has two display screens. The Product page defines the list the student sees when opening the product. The Lesson page defines the screen where they watch. They only change the look: they do not change who has access.
How it works
Both screens sit in the Settings group, in the product header:
- Settings → Product page: the listing model and the product banner.
- Settings → Lesson page: the sidebar, marking and navigation.
Both save with the bar at the bottom.
The product page
The listing model
| Model | What the student sees |
|---|---|
| None | No listing page. Opening the product takes the student straight to the first content. |
| Grid | The content as cards, in columns. |
| Listing | One content per row, with the thumbnail next to the title. |
| Timeline | The content in sequence, on a vertical timeline. |
| Cademí | A highlight on top and the content in carousels, streaming style. Not available in a blog. |
The options of each model
The options change with the chosen model.
- Thumbnail format (Grid and Listing): Automatic, Original Automatic, 16:9, 4:4, 4:5 or 4:7.
- Columns per row (Grid): 3 columns or 4 columns.
- Separate by modules (Grid, outside a blog): groups the cards by module, with one heading per module. When on, it removes Items per page.
- Items per page (Grid, Listing and Timeline).
- In the Cademí model:
- Show modules as a carousel. When off, the modules sit in a grid, with Columns per row.
- Show module titles.
- Thumbnail format.
- In a blog:
- Sort by: Creation Date, Publication Date or Sequential, the manual order of the tree.
- Direction: Ascending or Descending.
In Grid, Listing and Timeline there are also three panels: Title, Date and Summary. They have Display title, Show date and Show summary, each with its Alignment. The date also has its Format, with today's date as the example.
The product banner
The product banner is a highlight strip at the top of the product page. It only exists when the model is not None. To turn it on, open the Banner panel and turn on Show banner.
With the banner on, you configure:
- Banner content:
- Logo, in PNG up to 300 KB;
- Text set to Automatic: the product name and the count of modules and lessons;
- or Text set to Custom: Title and Text, each with its own color;
- Show text shadow;
- Show continue button, which takes the student back to where they stopped, with Button text and Button colors.
- Background images: Desktop image (JPG or PNG up to 300 KB, 1920 × 1080 px) and Mobile image (600 × 1050 px).
- Background video (optional):
- Video URL (YouTube or Vimeo) and Mobile video URL;
- Show video overlay: a color with transparency over the image or the video;
- Video sound: browsers only play the video on their own when it is muted;
- When the video ends: Repeat or Stop.
- Appearance: Banner height, as a percentage of the screen, and Show bottom gradient.
It resembles the Full banner in Content → Banners, but it is tied to this product and has options of its own. The automatic text and the continue button exist only here. The click action, the menu color and the reduction during video exist only there. See Banners.
The lesson page
- Featured video on mobile: on phones, the lesson content comes before the modules bar. On a computer, the order does not change.
- Theater mode player: a larger video, from the start.
- Fixed content tab: the list of modules and lessons follows the scroll.
- Sidebar:
- Show modules bar;
- Show reduced module list, for products with submodules;
- Show lesson numbering, as in "1. Welcome";
- Naming: what lessons are called in this product (Plural and Singular).
- Progress: Show the student's overall progress, the bar with the percentage at the top of the sidebar.
- Marking:
- Show the mark-as-seen button;
- Show the button after marking. When off, the button disappears after the student marks the lesson;
- Automatic marking: the time on the lesson until it marks itself. Choose Default or from 1 minute to 1 hour and a half.
- Navigation: the previous and next buttons below each lesson. Under Type, choose Simple (text) or Thumbnail. The thumbnail has Thumbnail format and Display title.
- Next Product: the Product suggested at the end of the content and the Button text. When empty, the button uses the product name.
The student without access and the offer page
Whoever does not have the product sees a locked card in the showcase. On click, they go to the product's Offer URL. You set the offer in Settings → General, together with the Expected delivery. See Products and formats.
Heads up: this is where most mistakes happen. The product has no offer. Result: the student clicks the lock and reaches a closed door. The dashboard shows those products in two ways:
- the No offer issue, in Content → Products;
- the Offer not configured. notice, when you pick the product in a banner.
In both places, the Increase your sales form fills in the offer on the spot.
The offer page does not apply to a student who has the product and is blocked for another reason. For example: the lesson has not opened yet, it waits for an exam or a progress percentage, or it is in draft. That student stays in the area, with the explanation. The administrator preview does not follow the offer page either.
Taxonomies (blog only)
In a product in the Blog format, the Settings → Taxonomy screen creates the groups that classify lessons: category, level, topic.
- Click New taxonomy.
- Fill in Name, as it appears when classifying. For example: "Category".
- Fill in Plural name, the title of the filter list. For example: "Categories".
- Save.
- On the taxonomy card, click Add Category. The button uses the name you gave.
- Fill in the term's Name and, if you want, a Thumbnail.
- On each lesson's screen, classify the lesson under the terms.
To show the taxonomies as filters in the student's list, turn on Taxonomy as filter.
Deleting a taxonomy deletes its terms, and the content loses that classification. The term thumbnail is shown when the showcase lists thumbnails by that taxonomy. See Showcases and groups.
Good to know
Saved options.
Switching the listing model hides the other models' options. They are not erased.
Mark as seen.
It is the button the student sees. With Show the mark-as-seen button off, the lesson only completes through the player, automatic marking or an exam. See Modules and lessons.
Where the cover and color live.
The product cover and Accent color live in Settings → General, not here.
Frequently asked questions
I want the student to go straight to the first lesson.
Choose the None model in Settings → Product page.
The product banner does not appear.
Check that the model is not None and that Show banner is on.
The student clicks the lock and nothing happens.
The product has no Offer URL. Fill it in under Settings → General.
Connected lessons, copies and shortcuts
Three ways to reuse content: copying, connecting a lesson to another and creating a shortcut. What changes when you edit the source and what students see.
Banners
The student area banners: the type for each navigation model, what happens on click, the images, the background video, the showcases and the order.