4.5 Creating Lifter Elements Templates
5. Creating Lifter Elementor templates
By default, Elementor Pro doesn't correctly detect the LifterLMS content, so it's missing from the list of available locations in the Theme Builder. This prevents you from creating layouts for lessons and some of the kinds of content added by various LifterLMS add-ons. With Lifter Elements, the LifterLMS post types are accessible as Theme Builder locations so you can change the style and layout of 1000 lessons at a time using a single template.
We offer importable templates to get you started using Lifter Elements. They can be purchased individually, and we include some with the Creator Edition. All templates we offer are included in the Creator's Club all-access membership. Templates are a way to quickly import new layouts you can apply to your courses, lessons and catalog. They can also be a great way to see what you can accomplish using the plugin. It's possible to target different templates to different courses or lessons and have many present on your site at the same time.
i. Creating your first templates
ii. How to Build a Course Archive or Catalog Template
Creating a custom Course Archive or Catalog template allows you to design a unique layout for displaying all your available courses. Lifter Elements integrates seamlessly with Elementor, giving you complete control over how your course archive page's looks and functions.
- Create a New Archive Template
- Navigate to the Theme Builder: In the WordPress dashboard, go to Templates > Theme Builder
- Select the Archive tab.
- Add a New Archive Template: Click the Add New button at the top of the screen
At this point, you can choose to start your new template with pre-built designs or you can start from scratch with a blank template.
- Choose a Pre-Designed Template (Optional): If you prefer to start from a pre-built design, Elementor will present several template options that you can select and then customize. You can view pre-built designs for archive templates if you select Archive from the dropdown menu.
- Start from Scratch (Optional): If you want to start from scratch, just close the Template Library window.
- Design Your Course Archive Template
-
Add a Course Listing Widget: In the Elementor editor, drag and drop the Courses widget from the Widgets panel into your design canvas. This widget will automatically display all available courses in a grid or list format.
-
Customize the Widget: You can adjust the layout, style, and appearance of the courses. This includes changing the number of columns, image sizes, and typography. Additional settings like course filters and pagination can also be configured to help users find the right course quickly.
Widgets that are commonly used to build the Course Archive template:
- Heading
- Course List
-
Include Additional Information: To enrich your course archive, you can add other widgets, such as Course Title, Featured Image, and Course Progress to give students a preview of course content or progress.
-
Dynamic Tags: Use Elementor’s Dynamic Tags to pull course-specific information into your template, such as course price, lesson count, or difficulty level. These tags allow for a highly dynamic and personalized course catalog.
- Assign the Template Once you’re satisfied with your design:
- Click Publish and set display conditions. Select the Courses Archive option under Display Conditions to ensure the template applies to all course archive pages.
After publishing, this template will automatically replace the default course archive layout on your site. More information about setting Display Conditions can be found here.
- Preview and Fine-Tune Preview your course archive page to ensure it looks the way you intended. You can make any additional adjustments directly in the Elementor editor. Once you’re happy with the final look, your custom course archive will be live and ready for students to explore.
By following these steps, you’ll be able to create a fully customized and dynamic Course Archive template that enhances user experience and showcases your courses effectively.
iii. How to build a Lesson Template
Here's a Walkthrough of the basics of setting up a Single Lesson template and which widgets are commonly used so you can understand how the structure is set up.
- To get started, make sure you're logged into the WordPress Admin dashboard and navigate to Templates > Theme Builder.
Click Add New next to My Templates at the top of the screen.
- For the Template Type, you will want to choose Single Post.
- Here are the widgets that are commonly used to build the template:
- Post Title
- Back to Course Button
- Lesson Video
- Lesson Content
- Course Outline
- Lesson Navigation
- Mark Complete Lesson
- When the template is complete, we will need to tell the Theme Builder how we want the Lesson template to be displayed. Click on the Green Button in the bottom-left-corner of your screen, then on Display Condition.
You can include this Lesson template to display however you like, there is a lot of flexibility with the display conditions. For this example we used All.
iv. How to build a Course Template
Here's a walk-through of the basics of setting up a Course Template and which widgets are commonly used so you can understand how the structure is set up.
- To get started, make sure you're logged into the WordPress Admin dashboard and navigate to Templates > Theme Builder.
Click Add New next to My Templates at the top of the screen.
- For the Template Type, you will want to choose Single Post.
- Here are the widgets that are commonly used to build the template:
- Post Title
- Course Author
- Icon Box (using the course length dynamic tag)
- Icon Box (using the course difficulty dynamic tag)
- Course Access Plans
- Course Video
- Course Syllabus
- Course Meta
- Course Continue Button
When the template is complete, we will need to tell the Theme Builder how we want the Lesson template to be displayed. Click on the green button in the bottom-left-corner of your screen, then on Display Condition.
You will want to select Courses for the display condition which will show a list of all of the courses that apply when using this template.