Customizable section card layout

Beyond simple links, you can define a sophisticated section card layout that incorporates numerous styling options. Each section card can display icons indicating the type of content hidden within, making it easier for students to find what they need at a glance. Moreover, it is possible to define background colors and progress display as progress bar or donuts.

Section titles and summaries can be displayed on the section page, course page, or both. Course creators can display information about “unavailable” activities (e.g. behind a paywall) with a configurable “not available CTA”. Section cards can also link to any URL, such as a purchase page for the course.

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

Demo page

In this example, the first two sections have a defined section card width of 50%. In addition, a background color gradient was selected for the first section. Section summaries inform the user what these sections are about. Progress donuts show the learning progress of each section. For each section, icons provide an overview of the content types in each section.

The section overview can also be combined with a header.

For this restricted section (Statistics), a CTA “🔒 Paid content” is configured.

Tags: new

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

Pro

Full list of features