Download FREE!

To download Dash Basic today just enter your email address!


99,00  / year

Add to Cart


299,00  / year

Add to Cart


499,00  / year

Add to Cart

Learning paths

Unveil users’ learning journeys visually with our Learning paths widget. This widget showcases completed and pending courses for each user in a visually engaging manner, akin to a pathway rather than a conventional list. Administrators can craft these paths using uploaded vector graphs (SVG files), with courses automatically distributed along the path. The creative possibilities are boundless, from simple lines to vibrant, thematic designs that narrate a story.

Moreover, administrators can tailor learning paths for desktop, tablet, and mobile devices, ensuring an optimized experience across all viewports.

Additional configuration options allow administrators to include an info area, adjust the size of course images within the learning path, and define the display of start and finish elements or a details area. They can also dictate the order and limit the number of courses shown. Furthermore, each learning path can contain courses from one or multiple course categories.

By default, the widget presents a pattern of hexagons representing courses, adding visual appeal to the learning journey.

We have set up a course for this widget on our demo page.

We provide lots of free design packages to create different learning paths.

Instructions for creating your own learning paths

What size format should the files have?

The format always depends on the design and how the learning path will be used later (number and size of course icons etc.).

You can use these formats as a guide:

  • desktop: 1200x800px
  • tablet: 834x1000px
  • mobile: 400x1000px

However, the values are only guidelines and should be checked with the respective design ideas.

Which software should be used to create the paths?

Paths can be created in any graphics programme such as Adobe Illustrator or Figma. It is important that the final file has the SVG format.

What needs to be considered when designing the path?

First consider the direction in which the path should run, as your courses will be arranged from start to finish.

A path needs a clear beginning and an end and should not be interrupted. It can also cause problems if anchor points are subsequently deleted or added. It is advisable to use a simple path and to redraw it again if a change is required. Shapes do not work well either, as the start and end points of a circle or square fall on the same anchor point.

Make sure that there is always enough distance from the path to the edge, especially at the start and end points.

Note that the length of the path must be approximately the same for all viewport versions. Otherwise, for example, 15 course icons will fit on the path in the desktop version, but it will look squashed on mobile.

What styling options can be used for the path?

First of all: The styling of the path must be the same for each viewport. In other words, whether on desktop, tablet or mobile – the path must have the same thickness, colour, etc. Otherwise, the settings of the mobile variant apply to all variants.

We have tested various styling options and noticed that something may work when exporting from one graphics programme and not from another. So it’s best to try out whether your idea works as a learning path.

Basically, we noticed the following if you work in Adobe Illustrator:

  • Angular paths or completely straight lines are problematic and should therefore be avoided. However, this works in Figma, so you should test it in your graphics programme. In Adobe Illustrator, you can make do with minimal curves that are hardly noticeable visually.
  • If you use a dashed path, then do without the corner compensation.
  • The end of the path must be rounded, angular does not work properly.

Paths can basically be any colour, dashed, dotted or have a shadow. A colour gradient also usually works, although we sometimes had problems with this in Adobe Illustrator. Files exported from Figma are somewhat more stable in combination with Dash Learning Paths; we had no problems with colour gradients here.

How to integrate background images?

To add a background image to the path, this can either be inserted afterwards in the Dash settings or integrated into the SVG itself.

We recommend integrating the image into the SVG if the path interacts visually with the background image (e.g. a road passing a tree). In this case, it is important that the path remains in a specific position, which can only be guaranteed if the image is integrated in the learning path.

Please note: Background images must always be created as pixel graphics. If you create background graphics from vectors, convert them to pixels before exporting the SVG. The only vector path should be the learning path. Otherwise Dash will not know where to place the course icons.

Do I need to take anything into account when exporting the file?

Export the file as SVG, there should only be one vector path in the SVG, the Learning Path. When exporting to Adobe Illustrator, always set the SVG settings to presentation attributes.

Track learning journeys through a visual learning path, illustrating which courses remain pending and which are already completed.

See also: Curved design

Enhance your learning path by adding background images that weave a narrative.

See also: Mountain design

Additionally, customize the path itself to seamlessly blend with the background and storytelling elements.

See also: Race design

Include photos and use spotlights to highlight the overall topic of your course series.

See also: Surfer design

Create entire compositions and incorporate the path as part of them.

See also: Landscape design

Integrate your own icons or logos alongside the learning path.

See also: Runner design

It is not necessary to upload a SVG file to use the learning path widget. Per default, courses are represented by a pattern of hexagons.

If the details area is activated, users can click on one of the course images and a course modal will open containing further information.


Full list of features

Highly customizable blockfeatured
Fine-tuning Dash blocks visually and enhancing user experience.
Usable everywhere
Dash is a versatile block type that seamlessly integrates into any available block region within your LMS.
Combining dynamic and static content
Incorporating static content alongside the dynamic core information of a Dash block can greatly enhance user experience.
Styling options
A range of customization options is available to craft a distinctive appearance.
Empty state handling
In cases where no data is available for the defined Dash, admins can integrate fallback content or hide blocks.
Visual content blocks
Selection of layouts for static content offering multiple customizable content fields.
Layouts for static content with a different number and arrangement of content fields.
Course section headers
Content is tailored and limited to specific course sections.
Create dynamic pages with highly adaptable layouts.
Create unlimited dashboards
Create and manage an unlimited amount of dashboards through an intuitive dashboard management interface.
Dashboards can be linked from any block region or integrated into the navigation.
Course context
Create dynamic course previews or overviews with metadata.
Add to course navigation
Dashboard with a course-specific context seamlessly integrated into the course navigation.
Customize course listings
Prevent users from accessing Moodle's course listing page.
Access restriction
Restrict access to all logged-in users, specific cohorts, role-specific or even the public as a landing page.
Data sourcesfeatured
A powerful query builder displaying tailored information from various data sources – without writing SQL queries.
Full control over which user details are displayed.
Video Time stats
Overview of all Video Time activities within the LMS – Requires Video Time Pro.
Video Time sessions
Providing insights into video consumption patterns – Requires Video Time Pro.
Curating tailored course lists.
Course categoriesnew
Providing overviews or figures related to categories.
Course certificatesnew
Generate visually appealing walls of certificates – Requires Workplace course certificates (free plugin).
Creating detailed badge walls.
Course completions
Tracking completion of critical courses for compliance dashboards.
Site logs
Create a news feed highlighting recent actions.
Present all available dashboards to users for easy access and navigation.
Create detailed overviews of activities used in specific courses or categories.
Create an intuitive interface for students to explore and select programs – Requires programs (free plugin).
Query layoutsfeatured
Each layout offers plenty of configuration options to craft a unique data visualization – without any coding.
The table layout presents data in a structured format that is easily filterable and sortable.
Presents data in a visually appealing grid format, offering extensive customization options.
Showcase highlights and create eye-catching sliders.
Characterized by a responsive design, as the content blocks adapt to the available vertical space.
Prioritize essential information while keeping the rest readily accessible.
Accordion with tables
Present data in tables grouped within accordion headings.
One figure with label
Minimalist layout to spotlight a single figure as an information status.
One figure / other figure
Minimalist illustration of comparisons or provision of context to numerical data.
Ideal for visualizing events over time, particularly when paired with the site logs data source.
Ready-to-use widgets, meticulously crafted to showcase targeted information for defined use cases.
My learning
Showcases all courses in which the current user is enrolled but hasn't completed yet.
My contacts
Visually presenting the contacts from the user's address book.
My groups
Bringing course group management right to the user's fingertips.
Skill progressnew
Essential tool for both gamification enthusiasts and skill assessors alike – Requires Skills Premium.
Skill level visualsnew
Discovering skill progression visually and exploring skill levels through images – Requires Skills Premium.
Course completions
Visualize course progress with progress donuts.
Course enrollments
Elegant accordion layout with a dynamic color scheme indicating completed sections and activities.
My profilenew
Designed to showcase user-related KPIs.
Competency graph
Radar graph, designed to encapsulate aggregated insights into competency frameworks.
Learning pathsnew
Showcases completed and pending courses for each user in a visually appealing path. – Free Design Packages available
Empowering developers to craft custom data sources and layouts.
Custom data sourcesnew
Creating SQL queries to craft bespoke data sources.
Custom layoutsnew
The Mustache template serves as the framework for defining the layout structure.
Integration with Dash Blocknew
Tailor-made data sources and layouts seamlessly integrate with Moodle's Block Dash feature.
Item added to cart.
0 items - 0,00