Moodle Plugins directory: Designer | Moodle.org
Designer
Mix and match layouts to create unique and visually appealing course designs.
Course types
Dynamic table of contents
Hero activities
Progress bars
Extended activity display
Section layouts
Innovative course format
Providing a variety of layout and design options for their courses, Designer is packed with features for professionals that want to create stunning courses. Designer was built on the assumption that not all sections and activities in a course are equal or equally important. Teachers can choose different layouts for activities and sections, even in the same course. Activities can be displayed as cards, lists, links or circles (Pro). Mix & Match!
Use cases
- Increase learner engagement
- Enhance user experience
- Simplify onboarding
Designer provides great features that are completely free. For more functionality, we offer a Pro plan.
Course types
With four distinct course configurations – Flow, Kanban, Normal, and Collapsible – each designed to cater to different educational needs and teaching styles, “Course Types” enhances the learning experience by offering customizable and dynamic course layouts.
Flow
Ideal for concise courses with a limited number of activities, the Flow course type organizes activities into visually appealing tiles. If sections are utilized, they precede the activity tiles, providing a streamlined overview. Activities can be made collapsible, offering a neat, organized view that is easy for students to navigate. Tiles in Designer Flow can be configured in small, medium, and large sizes to optimize mobile usability. Course creators can also activate a flow animation.
Kanban
Bring the efficiency and clarity of a Kanban board into your eLearning environment. This course type is perfect for small, project-based courses, enabling teachers and students to track progress through stages in a visual format.
Normal
Offering maximum flexibility, the Normal course type allows educators customize the appearance of course sections fully. This adaptability makes it possible to create unique course designs that can match any teaching strategy or content type, supporting a wide range of educational objectives.
Collapsible
Building on the Normal type’s flexibility, the Collapsible format adds the ability for students to expand or collapse sections. This feature is especially beneficial for courses with extensive content, enabling learners to manage how they view and interact with course materials effectively.
Section layouts
With Designer, various layouts can be mixed and matched to craft beautiful and meaningful courses. The number of columns can be selected (as well as section width and heights) per viewport to ensure your course is fully optimized for mobile use (Pro only). Both the width of the section content and the section container can be defined separately. Choose the perfect layout for every section!
Text links
Offers a clean, simple, and condensed layout, ideal for accommodating large sections with numerous activities.
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. This layout is perfect for courses with numerous activities or for facilitating free navigation, offering a visually appealing and organized display.
Vertical circles (Pro)
An elegant option to display activities which are shared/common for the course, to differentiate them from other learning content. Choose between small, medium or large sized circles.
Horizontal circles (Pro)
An elegant option, well suited for corporate learning. Choose between small, medium or large sized circles.
Dynamic table of contents
A clickable table of contents is automatically generated for each course, allowing users to jump directly to specific sections with ease. To create this view, the “one section per page” setting must be set. The activities are grouped within each section as activity type icons. The width of the section cards is configurable. Specify how sections that are not yet available should be displayed. They can either not be displayed at all or marked as locked. This high-level overview makes navigating through course materials straightforward and efficient.
In addition to the features above, Designer Pro offers additional options to customize the section cards:
- Background colors
- Section progress as progress bar or donut
- Section titles and summaries visibility
- A call-to-action for unavailable sections (e.g. for paywalls)
- Custom activity purposes
The first three section cards each have a width of 33%. Each section card contains a title and a description. Stacks of activity icons indicate the types of activity available in that particular section. Chats are not available and are therefore marked as locked.
Here the first two section cards have a width of 50%, the section progress is visualized by a donut. There are sections where the title and description are visible, others where only the title is visible. Each section card has stacks of icons that indicate the purpose of the individual activities in that section. Optional content is marked with a section label and locked content shows a CTA explaining that this content is only available with bonus points.
Hero activities
Define hero activities and automatically create a secondary tab navigation with activities that are cross-relevant, such as forums or announcements. Course creators define where these hero activities show up and if they are linked to sections. These settings make it very easy for students to navigate the course and ensure they never miss out on critical learning opportunities.
Announcements are defined as a hero activity and displayed as a tab in the secondary tab navigation. Course creators can define the ordinal number of this tab and determine whether the tab is displayed everywhere in the course or only on the main page of the course.
In addition to the tab, hero activities can remain visible as normal activities.
Designer header
The course header in Designer displays important information dynamically and ensures a consistent first appearance of the course.
Progress bar
The progress of a student is displayed as a progress bar. Clicking on the progress bar reveals which activities have been completed and which are still to do. The progress bar also supports the course completion condition “Completion of other courses” and includes these courses as well.
Profile integration
Activating the Designer header, it is possible to integrate profiles (e.g. teachers and students) that display important details and a direct contact option. One profile is always visible, you can click through several profiles using a slider.
Dynamic course information display
Showcase important course details such as enrolment start and end date, course due date (requires Time Management) and course completion date.
Styling options and more dynamic fields (requires Designer Pro)
Define custom text and background color or image, display tags and custom fields
Customizable progress display (requires Designer Pro)
- Display progress bar or donut
- Select calculation basis for course and section progress: All activities (that have completion conditions configured) – or – Relevant activities (that are selected as course completion conditions)
- Additional options to calculate course progress: Completion criteria (activities and other courses that are selected as course completion conditions) – or – Sections (only applicable to course progress)
- Add a completion status indicator (enrolled, in-progress, completed)
Enhanced profile display (requires Designer Pro)
- Specify which user profile fields are to be displayed in the course header such as first name, last name, email address, city, timezone, description or profile image and much more.
- Multiple profiles are visible side by side, the number of profiles displayed is responsive to ensure an optimal learning experience. If more profiles are displayed than can be shown, a slider is automatically created to click through the other profiles.
>> Read more about Visual content blocks
This course header shows the course completion date (not yet completed) as well as a progress bar. Click on it to see all completed and open activities and courses. Next to the progress bar, you can specify which profiles are to be displayed. In this case, the teacher's profile automatically appears in the header.
This course header is styled with a custom background and text color as well as a background image. Apart from many informative fields like tags, course start/completion date and a course status indicator, there’s a description as well as all student profiles with additional profile fields (city and department). The donut shows the course progress based on all relevant activities while the progress bar displays how many sections are completed.
Extended anatomy of an activity
Designer offers options for increasing the information content of the activity and integrating activating elements. At the same time, Designer gives you complete freedom as to what should actually be displayed. This also applies to the standard Moodle elements. In this way, you can not only improve the aesthetics of the course activities, but also deepen the pedagogical impact by making the activities more informative and interactive. Providing educators with the flexibility to choose exactly which elements to display. This customization extends to Moodle’s standard elements, allowing for a tailored presentation that meets the unique needs of each course – both in terms of content and visually.
Enhanced information display
Beyond the basics, you can display the activity’s availability status and the number of times it has been accessed.
Add call to actions
Increase student interaction with activities through a call-to-action (CTA) and add “open” or “review” links to activities. The CTA always depends on whether an activity has already been viewed or not and is then automatically adjusted.
Completion badges
Highlight activities that are due or overdue. These visual cues help students to stay on track with their deadlines. Activities with an expected completion date (or due date) will get a badge indicating “Complete by date dd/mm/yy”. Activities that have been completed in time get a green badge, others are black.
Integrations
- Time Management: Display relative start and due dates for courses and activities.
- Video Time: Display the poster image and the progress of the video directly on the course page (requires Designer Pro).
- Subcourse: Display the image and progress of the reference course when using the subcourse activity (requires Designer Pro).
Programs (Pro)
- Dynamic display and organization of subcourses as prerequisites.
- Automatic group creation for participants transitioning from the main course to subcourses.
- Automatically enrolling participants in relevant subcourses upon their registration in the main course.
Styling options (Pro)
The Designer format is a designer's best friend, with plenty of options to style your courses.
- Color customization
Select background and text colors for activities and sections. Customize the appearance of the whole course by adding a course background color or image or even set to transparent. - Background images/GIFs
Define custom background images or GIF animations for activities, sections and courses. You can apply semi-transparent layers or gradients over background images to enhance text visibility directly with Designer. - Completion visualization
Mark the completion of activities and sections with distinct images. - Masks
Use masks to conceal or render parts of an image partially transparent. Masks are suitable for using icons to make it obvious what the activity is about. Numbering or branding is also very easy to implement.
Designer normal examples
The use of (large) circles for the section layout in combination with images immediately creates the feeling of a website that contains all the functions of the designer activities at the same time.
Unique activity visuals are created using text links as section layout in combination with images with a transparent background. In this way, the activities can literally take any form.
In this course there is a text next to each worksheet. The course has an editorial feel thanks to the coordinated images.
Designer flow examples
We built an advent calendar with Designer Flow, each tile is a door and contains a surprise. As soon as the door is opened, the activity changes.
Each tile in this course represents a day within the vegan week. The user will find a recipe to cook in every activity. A mask was used to add a logo to each activity tile.
Designer Kanban examples
Kanban board styled with background colors.
Kanban board with different section layouts as well as background colors and images.
Useful links
Screenshots
https://github.com/bdecentgmbh/moodle-format_designer/issues/2#issue-1146292703
I can’t be sure but my best guess is that you tried Designer on our test site labs.bdecent.de where we used one of our other plugins (kickstart, also available here in the plugins directory) to provide templates.
The templates use some of the features of the pro version of Designer. The templates that use pro features are tagged with designer pro on our site.
All features that are mentioned on this page and in the article are in the free version though - I suggest you read Mary‘s excellent article about our plugin: https://moodle.com/news/designer-plugin-mix-course-formats/, that should get you started!
Hope this helps!
Stefan
Not yet. We’re working on it. The next version including great new features and 4.0 support will be ready within a few weeks.
If you would like to get a preview earlier, contact me directly and I’ll give you access to our testing site once we have a working 4.0 version.
Best
Stefan
I installed your plugin a few weeks ago which I find very pleasant.
However, I have an issue when using the Designer format and the Kanban Board course type with my primary admin account. When I want to access the course, the page spins in a vacuum and I get the error "Error ERR_HTTP2_PROTOCOL_ERROR".
If I use another account or change the course type to "Normal" instead of "Kanban Board", it works again.
I don't know how to solve the problem.
il semble y avoir un problème avec l'icône qui se trouve au début des sections repliables. Il ne s'affiche pas de la même manière selon les navigateurs utilisés.
Firefox affiche un icône bizarre, une sorte de carré avec des lettres à l'intérieur.
J'utilise le thème New Learning et Moodle 4.2.
Excepción - Call to undefined method format_designer\output\courseformat\content\cm\cmname::get_title_data()
Como lo puedo soluccionar
Saludos
is it running on 4.5 as well?
Thank you