Course Homepage Banner

Creating a Course Homepage Banner

By default, your course homepage in Moodle will display the course name in bold, large font directly below the Moodle site banner and course menu (A). However, you can edit the space directly below your course title to create a custom course banner (B). Follow the steps below to edit your course banner.

A. Default Homepage

B. Custom Course Homepage Banner

Step 1

Turn the Edit Mode toggle, located in the upper right corner of your course, to the "on" position

Step 2

Click on the Gear icon, which will appear directly under the course title

Step 3

Type in the Section Name (1). Under Summary (2) , begin typing your banner message using the Text Editor (3).

Step 4

You can edit the size and style of the font by using the Paragraph styles and other font-specific menu options. To add an image, click on the Image icon.

Step 5

After selecting the Image icon on the Text Editor menu, click on Browse Repositories (A). Next, click on Choose File to select an image from your computer and then Upload this File (B).

A. Browse Repositories

B. Upload File

Step 6

After you upload your image file, there are a couple of important settings to note in Image Properties box:

1. If the image is integral to your course banner's meaning or text, it is important you add a description (i.e., Alternative Text) so that it is accessible and can be read by screen readers. If the image is purely decorative, check the This image is decorative only checkbox.

2. Adjust the size of your image so that it does not overtake the course homepage. Keep the Auto size box checked so that the image will retain the proper aspect ratio or proportions.

3. Select the Alignment dropdown to position the image. You can set the image's position relative to the text you have also added in the Text Editor.

4. Click on Save Image to finish adding your image.

Step 7

When you are done with editing your banner, click on Save changes below the Text Editor.

NOTE: When you are using images, it is important you provide the proper copyright or author attribution for the images you are using. See below for information on free image resources.

Resources for Free Images

There are a number of free resources, which provide images under Creative Commons licensing. FREEP!K is one example. Follow the steps below for using FREEP!K.

Step 1

Go to https://freepik.com. In the Search bar, type in a key word that best describes the type of image you are looking for.

Step 2

Once your search results appear, you can further refine your selections by applying the Free filter on the right hand side. You can also narrow it down by type of graphic (i.e., illustrations, photos, etc.).

Next, select the thumbnail of the image you would like to use.

Step 3

Click on Download in the upper right corner.

Step 3

A zip file will download to your computer. This file contains the .jpg file and a text document with the free licensing information. At the bottom of the screen, there will be a confirmation that the download is complete. For your convenience, you can also copy the html tag to hyperlink the attribution (A). When you are using the Text Editor in Moodle, you can toggle over to the HTML view and paste the HTML tag in to the body of your content. When you toggle back to the default Text Editor view, you can then readjust the attribution link's position using copy and paste so that it is directly below or near the image.

A. Copy the attribution direction from the Download page.

B. HTML Toggle Button

Page updated

Report abuse