Customizable progress display

The customizable course progress offers several configuration options. Select whether the progress is displayed as a progress bar or a donut. When using the donut, Designer can show a checkmark instead of “100%”.

Configuration options are available to choose how the progress of courses and sections is calculated:

All activities (that have completion conditions configured)
Relevant activities (that are selected as course completion conditions)

For the course progress, additional options are available:

Completion criteria (activities and other courses that are selected as course completion conditions)
Sections (only applicable to course progress)

A completion status indicator indicates the learner’s progress in a simplified way: enrolled, in-progress, completed.

Note that these options only affect how progress is displayed, not how completion actually works.

We have created several demo courses in the Designer format that you can explore.

Demo page

Simple course header with progress bar, donut and completion status indicator.

Course progress calculation by sections. Clicking on the progress bar reveals which sections have been completed or are already done.

Simplified donut: Increased clarity by displaying a checkmark for completed activities.

Progress bar and donut in combination with other course header elements..

Of course, the header also works well as a mobile introduction to the course.

Tags: improved

Full list of features

	Basic	Pro
Course typesfeatured Designer comes with four distinct course configurations – Flow, Kanban, Normal, and Collapsible.
Flowimproved Ideal for concise courses with a limited number of activities.	✔	✔
Kanban Bring the efficiency and clarity of a Kanban board into your eLearning environment.	✔	✔
Normal Offering maximum flexibility, the Normal course type allows educators to customize the appearance of course sections fully.	✔	✔
Collapsible Building on the Normal type's flexibility, the Collapsible format adds the ability for students to expand or collapse sections.	✔	✔
Section overview Providing a clear, comprehensive table of contents for all course sections – with a focus on usability and aesthetics.	✔	✔
Dynamic table of contents A clickable table of contents is automatically generated for each course.	✔	✔
Customizable section card layoutnew Defining a sophisticated section card layout that incorporates numerous styling options.		✔
Purpose-defined activity iconsnew Set a purpose for each activity that does not have to match the activity type.		✔
Section type labels Enhance your section overview with the addition of section type labels.		✔
Hero activities Define hero activities and automatically create a secondary tab navigation with activities that are cross-relevant.
Secondary tab navigation Automatically generates a secondary navigation tab dedicated to defined hero activities.	✔	✔
Customizable display settings Complete control over where hero activities are displayed within the course.	✔	✔
Integrations Offering deep integration with specific Moodle activity types.
Video Time Designer can display the status of the video progress bar directly within its interface.		✔
Time Management Designer displays relative start and due dates for courses and activities.	✔	✔
Subcoursenew Designer showcases the learning progress of subcourse activity types.		✔
Extended anatomy of an activity Increase the information content of the activity and integrate activating elements.
Enhanced information display Display detailed information for each activity, including its availability status and the number of times it has been accessed.	✔	✔
Customizable call to actions Increase student interaction with activities through a call-to-action (CTA) and add "open" or "review" links to activities.	✔	✔
Due/overdue/completion badgesimproved Instantly communicate the urgency of activities with dynamic due and overdue badges.	✔	✔
Complete customization freedom Providing educators with the flexibility to choose exactly which elements to display.	✔	✔
Section layoutsfeatured Mix and match different section layouts and create your own individual course design.
Text links Clean, simple and condensed. Best for large sections.	✔	✔
List A clean and simple layout that provides generous space, making it suitable for sections with fewer activities.	✔	✔
Cards Expands on the list layout by allowing more activities per row.	✔	✔
Circles Choose between a vertical or horizontal circles layout for a fresh perspective on course design.		✔
Mix and Match Combine different section layouts within the same course, crafting a unique learning experience.	✔	✔
Multi-column layouts Define the number of columns per viewport to ensure your course is fully optimized for mobile use.		✔
Section width Define content and container width using pixel values or full-size and boxed layouts.		✔
Styling optionsfeatured Transform your Moodle courses into visually compelling learning environments
Color customizationimproved Select background and text colors for activities and sections.		✔
Background images/GIFs Elevate the look of your activities, sections and course with custom background images and GIF animations.		✔
Completion visualization Mark the completion of activities and sections with distinct images.		✔
Creative flexibility with masks Use masks to conceal or render parts of an image partially transparent.		✔
Course header Designer supports a highly customizable course header area.
Course progress Displaying course and section progress bars.	✔	✔
Profiles and communication The course header area allows to feature profiles, including options for messaging or direct contact.	✔	✔
Dynamic course information display Showcase important course details such as enrollment start and end dates, due dates, and more – Requires Time Management (to display due date).	✔	✔
Course tags and custom fields Utilize the course header to display tags for easy categorization or create custom fields.		✔
Enhanced profile display Specify which user profile fields are to be displayed.		✔
Header styling options Personalize your course header with a selection of text and background colors or images.		✔
Customizable progress displayimproved Integrate progress bars and donuts for sections and courses and configure progress calculation.		✔
Prerequisites for programs (multi-course courses) Add sub courses to your main course, creating a seamless learning journey.
Seamless integration of subcourses Dynamic display and organization of subcourses as prerequisites.		✔
Enhanced grouping and tracking Automatic group creation for participants transitioning from the main course to subcourses.		✔
Automated (un)enrollment Automatically enrolling participants in relevant subcourses upon their registration in the main course.		✔

Designer

Basic

Download FREE!

Pro

Full list of features