The "Apprentice Lesson List" element allows you to display your Thrive Apprentice courses anywhere on your posts or pages.
This article will explain how to add the element to your website and how to use its options in order to customize it as you best see fit.
Add the Element to the Post/Page
In order to start using the element, you first have to open a page or post with Thrive Architect, and then look for the plus sign in the right sidebar:
Look for the element within the list, or simply type its name in the search field:
Once found, drag and drop it anywhere on your page:
As soon as you do that, a drop-down list will appear from where you will be able to select the Thrive Apprentice course you want to display:
Select the desired course, and it will load automatically on screen:
Note: if you have any unpublished courses, you will see this notification instead, letting you know that you have to set up your course before being able to display it:
You can now start using the options available in the left sidebar to change the template of the course, or to customize it to your liking.
Choose the Template
The first section of the left sidebar allows you to change the template of the course:
A lightbox will open with the list of available templates you can choose from. Select the desired one, and then click on "Replace Template":
As simple as that your previous template has been replaced with the new one:
Use the Course Options
If you want to customize various aspects and items of the element, you can use the "Course Options" from the next section of the sidebar:
Click on the "Edit Design" button to enter the edit mode:
As soon as you do that, you will notice that all items of the course have become clickable and you can customize each one individually:
Hover over different items of the course structure, and click on the one you want to edit (in this example, I will edit a "Module Item"):
Just as shown above, you are also able to see what item you are editing in the breadcrumbs.
The corresponding options of the selected "Module Item" have appeared in the left sidebar:
Any change brought to the item will be also visible on all items of the same type, so on all "Module Items" in this case.
- Show Icon
If you want to display in your "Module Items", then activate the toggle next to the "Show Icon" text:
Once the toggle is active, the icon will appear in front of the module title:
You can go on even further here, and customize the icon itself if you want:
We have a separate article which you can read if you want to learn more about icons and how to use them.
- Show Expand / Collapse Icon
The next available option for customizing the "Module Item" allows you to display the expand / collapse icon:
After you activate the toggle you will be able to view the icon in your course structure:
This icon is customizable as well, so you can follow the same guidelines as in the case of all other "Icon" elements.
Now, whenever someone wants to view the full list of chapters and lessons available within the selected module, they can do so with the help of this icon:
Use the breadcrumbs to go back to the "Module Item" options:
- Vertical position
If one or both icon toggles are active, then the "Vertical Position" option will appear on the left sidebar:
You can use one of the available buttons to decide what kind of placement you would like for each one of them, or for both at once:
Lastly, you can adjust the height of the "Module Item", by dragging the slider from left to right or by inserting a numerical value in the field next to the slider:
These options are applicable in the case of editing a "Module Item" but the same guidelines apply if you are trying to edit a "Chapter Item" or a "Lesson Item".
Keep in mind that if you customize an item from the "Apprentice Lesson List" element template, that change will be applied to all items of the same type:
If, for instance, an item is deleted by mistake, it will be deleted from all places where that item appeared but can be easily re-added from the right sidebar:
You can also customize other items of the template as well, such as "Text" elements or "Button" elements. If you want to customize a button from the template, such as the one showcased above, the following options will become available in the left sidebar:
You can change the color of the button, add icons and secondary button texts, change it's alignment and width as you best see fit. All options and how to use them are detailed in this article from our knowledge base.
An important feature worth mentioning here is the "Button Link" one:
This feature allows you to apply a dynamic link to your button, and thus redirecting the user to the desired content ( in this case the "Apprentice course links"):
If the "Button" element is removed from the template and re-added from the right sidebar, it will not be linked automatically to the "Apprentice course links". It will have to be linked again, using the steps detailed in this dedicated article.
Furthermore, you will notice on the bottom side of the editor a state management bar, from where you are able to switch between states as it follows:
You can thus customize the design of the course in each of the available states:
- The "Not Completed" state is what someone would see if that person has not yet started the course:
- The "No Access" state is what someone would see if they are not logged in or if they have not purchased the course:
The "Go to Lesson" button has disappeared, meaning that the course is not available for that WordPress user.
- Naturally, the "Completed" state would allow the user to retake the course if needed, by using the "Go to Lesson" button:
Besides the already existing elements you might already be familiar with, you will notice two additional ones, in the "Apprentice Elements" section - "Description" and "Title":
Note: these are only available while you are in the "Edit Design" mode of the "Apprentice Lesson List" element.
They come in handy if the description or title of your course has been removed from the template, or if the selected template does not have one of these two elements by default.
This way, you are not required to go back to your Thrive Apprentice course to copy the title or description of each course, but instead, you can simply drag and drop the desired element to your template, and content relevant to each of them will be displayed automatically.
This element will display the description relevant to each lesson, chapter, or module, as you have set it in your Thrive Apprentice course:
This element works exactly as the previously explained one, and it pulls the title of a module, chapter, or lesson from Thrive Apprentice, without having to manually copy it from your Thrive Apprentice course dashboard:
The text pertaining to each of these elements, as well as to other text items from the template, can be customized even further in terms of color, format, font, etc. This article explains how to use the options when editing a "Text" element.
When you have finished with editing the element and want to exit the “Edit Design” mode, click on one of the two "Done" buttons located in the bottom part of the page:
This will automatically save your work and take you back to the "Course Options" sidebar of the "Apprentice Lesson List" element:
Inherit page smart colors
If the toggle next to this option is active, then the colors of the element will be inherited from the Thrive Theme Builder theme or Landing Page on which the element is placed:
Disabling the toggle will trigger a color field to appear in the left sidebar:
Click on it and use the color picker or a HEX / RGB code to change the color to the desired one:
In order to save your changes and return to the "Course Options" sidebar click on "Apply":
The following option allows you to change the course that is currently displayed on your page or post:
Open the drop-down to view the full list of available courses set up in Thrive Apprentice and simply select the one you want from there:
Course display level
If you want to change the display settings of the course, click on the dropdown field under "Course display level":
This feature will let you define which "top-level" item of the course structure will be displayed on your page or post:
You can choose to display just the module, the chapter, or a lesson:
Allow the following to be collapsed
This option will define which items from the course structure will support being collapsed:
If both "Modules" and "Chapters" are disabled, then the "Default state" option, located right underneath, will not be available.
Just as mentioned above, with the help of this feature you can set the default state in which the "Module" and "Chapter" items will be displayed on your website:
This is how the course would appear on your website if you opt for a "Collapsed" state for both "Modules" and "Chapters":
And this is how it would be displayed if you choose the "Expanded" state:
Use the Rest of the Options
The more general options are available for the “Apprentice Lesson List” element as well, and these can be used to customize the element even further:
Hopefully, this article about how to use and customize the “Apprentice Lesson List” element was useful for you.
If that is the case, don't forget to rate it with a smile below :)