The "Lesson List" element allows you to display your Thrive Apprentice lessons, courses, or modules 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.

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 are selecting an unpublished course, you will see this notification instead, letting you know that you have to publish it first:

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:

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"):

Main Options

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.

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.

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:

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".

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 its 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"):

Important!

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.

States

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:

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 "Lesson List" element, and they are also thoroughly explained in this article.

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 "Lesson List" element:

​

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:

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:

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:

The "Auto collapse" option allows you to automatically collapse the modules and chapters that are not associated with the active lesson.

In order for this option to work, you have to make sure that you are using the "Lesson List" element in the content of one of your Thrive Apprentice courses.

This way, the element will automatically detect the course and lesson in which it was placed, and thus, auto collapse the chapters and modules that are not active:

Here's an example of an "Lesson List" element placed inside the first lesson of my Thrive Apprentice course:

Now, with this toggle active, the students will only see the module containing the active lesson, whilst the remaining ones will be auto collapsed:

The more general options are available for the “Lesson List” element as well, and these can be used to customize the element even further:

If you want to find out how to use these options, please check out the separate tutorials about each of these on our tutorials page, or in our knowledge base.

You might also be interested in this article, about our "Course List" element, which can be used to add a list of your Thrive Apprentice courses inside a post or page created using Thrive Architect.

Hopefully, this article about how to use and customize the “Lesson List” element was useful for you.

If that is the case, don't forget to rate it with a smile below :)