Skip to main content Skip to navigation

Add a course header and other visual elements

This guide will introduce you to the reusable HTML templates that we refer to as Snippets and how these can be used to create Course Headers, separate content and emphasise design elements such as labels. It notes that there is also a Course Description field that can be used to aid with searching.

What is a course header?

All Moodle course page formats have a section or topic 0 that appears at the top of the page. This is typically where someone would add information about the module or course - this might be an image, the module code and name, and contact details for the module convener. We refer to this as the course header and it serves the same purpose as the hero images on a website - to draw the attention of the person entering the page, to give them immediate confirmation that they are in the right place, and direct them to someone or somewhere to get help if they need it.

You do not have to use one of our snippets - you can create your own course header and put in any information that you wish.

What are snippets?

Snippets are reusable HTML templates that are added using the 'Templates4u' button on the editing (atto) toolbar in any editable section of Moodle. They can be added to section headings (including section 0, the course header area), activities such as labels, pages or books, or in the description for an activity, and into a HTML block in the right hand column.

Snippets are designed to be responsive i.e. to work on different sized screens, as well as accessible to screen readers and meeting current standards for the contrast between font and background colours, for example. They use Warwick colours and font awesome 4.7 icons for clarity. Where they use images, these will resize and stay centered.

Add a snippet as a Course Header

  1. Turn on editing by clicking on the cog icon on the top right, and selecting Turn editing on.
  2. Click on the edit link or the small cog next to the top section of the Moodle space. This is commonly referred to as Section 0 and inserting a snippet here will always appear above the main content of the space.
  3. Click on the Templates4u button on the atto editing toolbar
  4. Click on the drop-down to display a list of available snippets. Choose one of the options to display a preview recommend:
    • Large-header-with-fullwidth-image-lifted-paper
    • Large-header-with-image-lifted-paper
    • Large-header-with-image-left-text-right
    • Course-header-light-black-text-image
    • Course-header-dark-white-text-image
  5. Click Insert to add the snippet into the text editing window.
  6. Edit the text, replace the image etc - see the video above for more information.
  7. Click save and return to course.

Add a snippet as a separator

Snippets can also be used in labels, pages and books to separate content, or as a visual element separating activities on the Moodle course page.

Snippets can be inserted at any point within existing text, or into a blank section. Snippets can also be inserted into other snippets - we cannot guarantee there will not be any unexpected issues, however) and text, links and images can be inserted into snippets.
  1. Turn on editing by clicking on the cog icon on the top right, and selecting Turn editing on.
  2. Insert a new activity or edit an existing one.
  3. Access the location where the snippet will be added. This could be the description for the activity or the content area e.g. a label only has a content area, but a page has both a description and a section for content. Snippets can be added to either for differing effects.
  4. Click on the Templates4u button on the atto editing toolbar
  5. Click on the drop-down to display a list of available snippets. Choose one of the options to display a preview. Examples include:
    • Simple-shaded-box-dark-aubergine
    • Simple-shaded-box-with-icon-dark-aubergine
  6. Click Insert to add the snippet into the text editing window.
  7. Edit the text, replace the image etc - see the video above for more information.
  8. Click save and return to course.

Add a Course Description

Moodle spaces can also have a description and image added that appear on search pages. This is added to the page via a course summary block, and which could therefore be added in place of, or in addition to, a course header.

 A course description must be short and to the point. Please do not put a large amount of text in here - a small image and a short summary will assist people in identifying the course they are looking for in the search results, but more than this can cause problems with the search results format.
  1. Click the gear icon on the top right of the Moodle course space.
  2. Click 'Edit settings'.
  3. In the Description section:
    1. Add a summary of the course and any other details that you wish to appear when people search for courses. You can also use the same Snippets that are described above.
    2. Add a Course Image. Click on the Add icon and browse for your image.
  4. Click Save and Display to return to the Moodle space.

Follow the instructions for adding a block to insert a Course Summary block into the right-hand column in the Moodle space.

The information on this page relates to Moodle v3.8 and was last updated October 2020.

Contents

Filter by tool, task or content