The Lesson & Module List Element is a replacement for the Membership Content List Element which has been around for a few years.
When we released our new course builder as part of the OptimizeMentor plugin (released in June 2022), we realized that we needed a new element to showcase the course content to members who have access, as well as a way to preview some content for those who are not members yet (such as on a sales page).
We also wanted to provide a way to show locked modules and lessons, or lessons which are dripped but haven’t been released yet.
You can use this element on any page in your site, but if you add it to a course page within OptimizeMentor, then it will automatically detect the correct course to show content for.
So lets dig in and see just how to use this element.
How to Add the Lesson & Module List Element
You can add the Lesson & Module List Element to your page just like any other OptimizePress Element. You can click the + icon in a column or click the + Elements link in the top left of the editor. Simply type in the word “Lesson” in the search bar and you’ll see the Lesson & Module List element. Just drag the element from the sidebar into column you want to add it to.
Once the element is added, you will see the Wizard where you’ll select the course you want to display content for. If you are on a course page then it will be populated for you with the course you are currently editing a page for.
After you have selected your course to list items for, you can click the magic icon to see some design options on the left side. There are several pre configured designs to choose from:
These presets are designed to help save you some time. You can change colors, as well as layouts after you choose one. I’ll be using the 2nd option in the above screenshot for the remainder of this guide.
How to Get Back to the Lesson & Module List Element
Sometimes getting back to the main element settings is not clear. There are two ways to do this, and this works for any element which has sub elements such as Testimonials, Content Toggles, Tabs, FAQ, Feature Blocks, any Forms, and others.
The easiest way if you have just clicked on something within the element is to look at the editor’s breadcrumb trail at the top of the editor and then click the name of the element you want to edit
The 2nd option to get back to the main element’s toolbar is within the toolbar you are currently on if you are editing a sub-element of the main element. As you can see we are on the “Lesson” toolbar. In order to get back to the “Lesson / Module List” Toolbar, we’ll have to click the little up arrow a few times. You can find this up arrow right next to the “x” there in the top right of the toolbar.
Styling the Lesson & Module List Element
To style the element, you have similar options as any other element in OptimizePress. You can set background colors, font colors, font size, borders, shadows, as well as many other options.
To set a background color, click the color palette icon
To modify the Borders, Shadows, & Shadow Styling, click the borders icon in the toolbar and you’ll see that you have several options for these settings. You may click the tabs for Shadow, and Shadow Styling to change the options for those.
You have a few options on what you can do with the element as well.
- You can reposition the element by holding and moving the cross-arrows icon.
- You can clone the element.
- You can also delete the element by clicking the trash icon.
For the Element Settings, click the gear icon. Here you can adjust the spacing, width, and alignment of the Lesson & Module List element.
For more advanced options, click the blue “Advanced Options” button and you’ll see the element sidebar open up on the left of the screen where you can access more options for Positioning, Responsive, Animation & Delay, Custom Experiences, and even more advanced options such as setting a custom CSS Class for the element.
As you can see, there rare quite a range of options. You can also choose which parts of this element to show by enabling or disabling the element blocks.
How to Enable or Disable the Element Blocks
The Lesson & Module List Element’s main toolbar includes a way to turn on or off the display for the main Course item, Modules, as well as Chapters, and Lessons. Simply click on the watch icon in the element toolbar, and then click on the Block Visibility tab. You can then choose what you want to display by toggling the items on or off.
“Display Course” would add or hide the link to the course homepage.
“Display Modules” is for the main module pages of your course. You can turn them on or off while still showing the lessons within the module if you want.
“Display Chapters” allows you to toggle on or off the display of the chapters which helps organize your lessons within a module (these are not actually pages, so they will not be clickable).
“Display Lessons” gives you the option to show/hide the lessons.
The reasons you may or may not want some of these options on, just depends on what you want to show.
An example could be that you just want to show a link to your course somewhere. Then you would just turn on the “Display Course” option, while having the rest of them turned off.
How to Show or Hide Locked/Dripped Content
The next option there is to show or hide Locked/Dripped content. This is content that is either unavailable to the current member’s memberships, or is unavailable due to dripped content not being released yet. These are always available as an admin and while editing the page you have this element on. If you select “no” here then the hiding of these contents will take place only on the live version of the page where this element is added.
Course, Module, Lesson, & Chapter Blocks and States
Each block has it’s own visibility settings. You can turn on and off different things such as image or icon, Title, summary, and also buttons in some cases.
You can click on Modules, Lessons and chapters to turn on/off any of the main blocks within those if you like.
Blocks are elements within each of the main blocks (Course, module, etc.).
We’ll cover this in more detail below in each Block, however a State gives you the ability to edit what the block looks like when someone visits the page and the content is available, dripped, locked, or in another state. So if a member visits a page with the lesson and module list element, and they are on a drip delay. The lessons that are available would use the “available” state to determine the design. The lesson that are not released yet and are “dripped”, would show how many days they have left, and you could have a different design for those as well. “Locked” content state is basically where you have those visible but they are not available to that user.
For example, here is where you can select the Lesson State to edit the design for:
We realize it may take some work to get all of the possible Course, Lesson, Module, and Chapter States saved the way you want. We would recommend saving the element as a Global Element if you want to use it on several pages.
Course Block Display Options
If you have activated the visibility to show the Course Details, you have several options for what details are shown. If you click on the Course, you’ll see a different toolbar. Click the watch icon and you’ll see you have the block visibility tab there as well which will have different options than the main element’s block visibility feature.
You can turn on or off any of those options. If you only want to display the Title of the Course then you would turn off all 4 of those.
If you have “Display Dropdown” turned on, you can choose to automatically load the element with sub items collapsed or not (kind of like how a toggle element works):
To change the dropdown icon, you can click on it
Also, any other blocks you have turned on, you can also click on those items to edit them. For example, if you have the icon turned on, you can change the icon options by clicking on the icon as you can see here:
The image, as well as the title and summary text can not be changed here, but you can change the properties of those such as size, and other options by clicking on those. To change the text or the image you would want to go into the Mentor course editor and change the properties of the page there by clicking “Edit Details”:
While editing the Course Display, you can also preview and edit the different element States. An “Element State” is basically a way to see what the element will look like if a user meets certain criteria. The Course block in the Lesson & Module List element has different States for Available, Dripped, and Locked.
Available – This is what shows when the Course is available to the member who is viewing the content. for example, see image above (under the toolbar). This is also the default State that shows in the editor.
Dripped – Any content that is dripped, but not yet available. Will also show how much time is left before the dripped content is ready to view. This is what the course block would look like if it was dripped, and there is still time before it is dripped out.
Locked – Locked content is content that the current member or visitor does not have access to in their membership, or because they might be logged out and can still see the page (this depends on your settings). Here is what Locked content would look like.
You can see in the image above that the locked content looks the same as the unlocked content. You can change the styling of the Course Block for this state if you choose, such as background color, text color, as well as the image properties to make it appear sort of grayed out. Here is an example of what you could do with this element for the locked course. The idea is to just make it look obvious that it is locked – something different than when it is available.
Module Block Display Options
The Module Block is very similar to the Course Block above. If you are not using the Module pages for more than a navigation point and a way to break up lessons into sections, you can probably turn off all the options and it will just display the Module Title in the Lesson & Module List Element.
The Module States are Available, Dripped, and Locked. You can change the design for each one if you like (just like you could with the Course Block).
Lesson Block Display Options
Lesson Blocks work similar to the Course Display, there are different options for what blocks can be hidden or shown, as well as different Lesson States.
You can see here there are several more blocks than we had in the Course block. It’s always a good idea (unless you post this on a sales page) to have either the image or Display Action (button) activated so your students can navigate to the lesson.
The Lesson States give you options for any way someone will view a lesson, whether they have completed the lesson or not, if the content is locked or dripped, completed, and we also have a different option for “Current Lesson” which means you can give the current lesson in the list of lessons a different look, to make it obvious which lesson they are on.
Chapter Block Display Options
Chapters are purely a way to organize lessons within a module. They do not have many options. You can show an icon as well as the drop down icon if you like.
The Dropdown settings, if set to us, will load with the lessons in that chapter as collapsed in the menu. Then the member will click on the dropdown arrow to expand them.
How to Display Course Content Previews
This is great for sales pages, or other pages on your site that are not protected, or are visible to members who might not have access to a course, but might want to see free lessons within that course.
To activate this feature for specific lessons, just click “Edit Details” for the lesson you want to show a free preview of.
Then simply turn on the “Enable Preview” feature as shown below (don’t forget to save the options).
Once you do this, and you add the Lesson & Module List to a page where someone who doesn’t have the membership to access the course can see it, then they will be able to access any lessons you turned on the Enable Preview setting for.
As you can see below, when someone visits a page with the Lesson / Module List element, and they are not logged in to your site, they will be able to access the lessons with “Enable Preview” set to “On”
If you have any questions or need further help using the Lesson & Module List element, please reach out to our support team for help.