Adding an Image Grid Menu to your course can be a useful way to link and direct your user to different sections of your course. This can be particularly useful if your course is long.
Adding an image grid menu to a page
1. Go to the page in your course where you want to add an Image Grid Menu.
2. In Layout, select the Add here button at the location where you would like to add the menu.
3. Select Menus:
4. Choose Image Grid Menu:
5. Save your changes using Save. The Image Grid Menu will now be added to the page:
Image grid menu settings
In Layout, click the Variations menu icon on the top right of the Image Grid Menu to open the settings:
The Items per row setting allows you to set the number of image grid tiles there are per row. This is set to the default of 3, to match the default number of grids added to the page:
The Items per row on Tablet (<767px) and Items per row on Mobile (<480px) settings set the number of image grid tiles that display for different device screen sizes, ensuring the element is responsive. Any tiles added beyond this number will be added to a new row.
The Image type setting allows you to change the shape of the image container for the tiles and the Padding settings sets how close the image grid tiles are to the Image Grid Menu section container.
Image grid menu example
In the following example the Items per row is set to 2 and, in Author, a new link has been added via the + Add link button:
There are four sections to the course: Support, Success, Management and a Quiz. Each section is in its own Chapter:
The Image Grid Menu links the user to the first page of each Chapter. When the course is taken by a learner they will be directed to the start of each Chapter via this menu. Once the Chapter is complete, the corresponding menu link will update to show a tick:
This can be a useful way to break the course down into manageable sections for the learner.
| Note: This functionality requires the parts of the course you want to be marked as Completed to be in separate Chapters in order to work. |