Requires Designer Pro
The Designer Flow tile layout provides ample creative freedom for course designs using square-format images. Additionally, Designer offers a wide range of layout and design options. Features like gradients and color variations unlock even more possibilities to bring your designs to life.
We are constantly creating design packages to inspire and support your course creation. These packages are ready to use and designed to enhance the visual appeal of your courses. Explore our catalog to find a variety of themes and styles that suit your needs.
Get ‘flow’ design packages
How to use a design package with Designer flow
- Install the plugin
Install the Designer Pro plugin and set the course format to “Designer format” and choose the course type: flow. - Download a design package
Download one of our design packages. All packages include files for activities in different states (available and completed) as well as a course image.
Course setup
You can enable the option to display activities in popups, allowing students to stay within the designed course while learning. When activated, a modal will open for each learning unit, ensuring a seamless experience.
The course layout provides two options:
- “Show all sections on one page”: Students start directly in the course, where they can view the section tile followed by tiles for activities within that section.
- “Show one section per page”: A section overview is created with section cards linked to specific sections, all presented in the same tile layout.
Additional customization options include:
- Hiding or displaying hidden sections (e.g., marked as “not available”).
- Enabling a flow animation for activities when entering the course.
- Adjusting the tile size (small, medium, large).
- Defining whether activity tiles should be expanded or collapsed by default.
- Configuring the visibility and position of the course index.
Decide whether to include a Designer header with a progress bar or dynamic information, and specify any hero activity to be placed within the sub-navigation.
Our design packages work with all these options. Of course, the final result may vary slightly, so feel free to experiment with the settings!
Section setup
With the course type “flow,” there aren’t many options for section layouts, as all sections are displayed in a tile format (unlike the “normal” course type, which offers more flexibility). However, you can customize the layout by defining a minimum height and specifying the number of columns to display based on the viewport.
For sections, you can:
- Choose a background color or upload a background image.
- Define how the background is aligned.
- Add semi-transparent gradient overlays or masks.
- Set a custom text color.
Activity setup
All activities are displayed as square tiles, and there is a dedicated Design Tab with numerous configuration options for styling. You can decide which elements of an activity to display and whether to include call-to-action buttons or informational elements, such as the number of visits, completion status, or other activity statuses.
When using our design packages, we recommend minimizing the amount of displayed information. If necessary, you can display a title, but ensure that the text color is readable against the background image.
Additionally, you have the option to display information on hover. This is a great alternative if you don’t want to remove details entirely, although it can sometimes disrupt the overall design.
You can now drag and drop images from our design package as background images. If you’d like the image to change upon completion, simply select the checkbox and upload different images.
Since all our images are in square format, they fit perfectly without needing to adjust the background position (just set it to “initial”). Use “cover” as the background size and disable repeat for the best result.
Additionally, you can include a gradient or mask or customize the text color – it’s entirely up to you.
See our designs in action!
We have created a demo course using our design packages. Feel free to explore it!
How to create your own designs
What size format should the activity files have?
We recommend to use a square format 500x500px.
Which file types are best to use?
Use jpg, png or gif files.
What needs to be considered when designing the activity images?
Designer Flow is ideal for small courses with only a few activities, as too many tiles can appear overwhelming.
Start by deciding which activity elements you want to display, such as the title, module type, or icons. Consider whether you’d like to include Designer’s special features, such as call-to-action buttons (e.g., “Open”), a visit count, or a completion badge showing progress.
If you choose to include these elements, ensure they align with your design. The background in these areas should remain clean and uncluttered. Using gradients can enhance readability and maintain a professional look. You can add gradients directly in Designer or incorporate them into your image files beforehand.
If specific text colors are required, ensure they contrast well with the background image. Also, keep in mind that activity elements might cover parts of your image, so plan your layout accordingly.
Your design should be created in a square format. Use the “cover” setting to ensure everything is displayed exactly as intended.
Consider whether your course has multiple sections and what the design of your section tiles should look like. You might need different styles for each section and its activities. If you choose to include a section overview with section cards, these cards will share the same style as your section tiles.
The option to differentiate between available and completed statuses using two different activity images only makes sense if you are tracking completion. Keep in mind that Designer automatically adds a color stripe to indicate an activity’s status. It’s a good idea to first develop a concept and test it with one activity before creating separate images for every activity, as this will double the number of images you need to provide.
Design inspiration and tips
If your course has only one section, you can use icons or color codes to differentiate activity types. For courses where activities need to be completed in a specific order, consider incorporating numbering into your design.
You can also enhance your course with patterns, illustrations, or photographs that align with the content of each activity.
If your course has multiple sections displayed on a single page, it’s essential to differentiate section tiles from activity tiles. This ensures that users can easily identify where one section ends and the next begins. To further distinguish sections, consider applying unique visual styles or design elements for each one.
Masks
Requires Designer Pro
Masks provide additional creative options for your course designs by allowing you to shape and enhance images with gradients or overlays. They offer endless possibilities to customize the look and feel of your content. Browse our catalog to discover masks that perfectly fit your design vision.
Get design packages for masks
-
Silhouettes0,00 € -
Category names0,00 € -
Forms and shades0,00 € -
Symbols0,00 € -
Numbers0,00 €
How to use masks with Designer flow
- Install the plugin
Install the Designer Pro plugin and set the course format to “Designer format” and choose the course type: flow. - Download a mask design package
All packages include files for masks that will hide some parts of your background image. Mask files are black or (semi-)transparent and are considered to be combined with a background image or color. - Admins have to add the masks files here: Site administration/Course formats/Plugins/Designer/General settings/Activity
Upload the files as “mask image” via drag & drop. The file names will appear as mask names in the Designer activity settings for course creators. If you want to change the names, be sure to do so before uploading.
Admins can configure various default settings, such as the size, position, and gradients of activity background images. They can also define a specific mask to be used for each activity. This is especially useful for branding purposes, for example, if you want to incorporate logos into every activity via a mask. - Setup your course as described above
- Setup your section(s) as described above
- Setup your activities as described above and integrate a mask in combination to your activity background image. You can choose the mask from a drop down menu in the activity settings in the “Design” tab.
How to create your own masks
How do masks work?
Masks can be placed over color areas or images to cover specific areas. This also works with transparencies, so that areas of an image are shown semi-transparent and others completely or not at all.
This is how simple masks work: black areas are displayed, transparent areas are hidden.
image + mask = masked image
What size format should the activity files have?
We recommend to use a square format 500x500px.
Which file types are best to use?
Use png files, because you might need transparencies.
What needs to be considered when designing masks for activities?
Consider which background image you want to use, as it needs to complement the mask design. Masks are great for integrating numbers, logos, icons, gradients, or shapes in photographs or patterns.
If you choose to integrate gradients, the gradient color will only be visible in areas where the mask covers the background. Without a gradient, these areas will simply appear white. With gradients, you can color these white spaces in any scheme that suits your design. Areas masked with semi-transparency will display the gradient in a semi-transparent way, allowing the background image to shine through while still being tinted by the gradient.
As with other activity designs, you should consider whether you want to integrate activity elements and ensure they don’t conflict with your mask design. For example, make sure that elements like logos are not partially hidden by titles.
Your design should be created in a square format. Use the “cover” setting to ensure everything is displayed exactly as intended. If you are using existing masks in a different format, define the mask’s position and size to achieve the best result.
Masks are not differentiated by status; the same mask will be applied to both background images, including the background for completed activities if defined.
Design inspiration and tips
- Keep it simple:
Masks are most effective when they don’t overwhelm the background. Use simple shapes, subtle gradients, or minimalistic patterns that complement the content, rather than distract from it. - Use semi-transparency:
Experiment with semi-transparent masks to allow background images to partially shine through. This creates a layered effect and adds depth to your design, while still providing structure to the content. - Ensure consistent branding:
Masks are a great tool for adding consistent branding elements, such as logos, icons, or brand colors. Consider using masks to subtly incorporate these elements throughout the course. - Align with content:
Tailor your mask designs to the activity content. For example, use icons or illustrations related to the theme of the activity. A reading activity might benefit from a book icon in the mask, while a quiz activity might use a question mark symbol. - Add gradients for visual appeal:
Gradients can help create smooth transitions between areas of your design, especially in backgrounds. They can add vibrancy or create a soft, professional look depending on your color scheme. - Experiment with geometric patterns:
Geometric shapes like circles, triangles, or squares can add a modern, structured feel to your course. These shapes can be subtle but effective when placed strategically on your background. - Maintain readability:
When using masks with images or patterns, make sure the content remains readable. Consider using a semi-transparent mask behind text or icons to enhance legibility, especially on complex backgrounds. - Experiment with multiple masks:
For courses with multiple sections or activities, consider using different masks for each section to visually distinguish them. This can help students quickly identify which section or activity they are in.
Need some more inspiration?
Check out our product demo courses. We now have a dedicated plugin hub for each of our premium plugins. These hubs are product courses directly on our Moodle Demo Site. We offer demo courses on features and full showcases for inspiration and examples. Additionally, there are already several videos with instructions and information about the products. We are continuously expanding and adding more informational material to the hubs.