The Banner Image will appear on the Course details page for every Course and Curricula within the Portal for the Department that the Template is assigned to. This article offers guidelines on how to most effectively customize Page Banners.
By Default
The two below sections outline default options available, when no customization has been done for the Course Details, My Courses and Catalog pages.
Course Details Page
If you do not upload a Banner Image to the Course Details page there will be a default image visible.
My Courses and Catalog
If you do not upload a Banner Image to the My Courses and Catalog page there will be a default image visible.
Recommended Image Size
For the best User experience, we recommend utilizing a 1920px x 160px image with a 300 KB file size for page Banners.
While the above dimensions and file size are the limit for Banner images, a larger image can be used, with the caveat that part of that image will be cut off when viewed from within the Learner Experience. A graphic designer, for example, could use a larger image with the intent of showcasing only a portion of that image within this space.
Banner Images - Appearance on the LMS
Visualize the Page Banners on the LMS and how the images are used in the context of a component.
Page Banner Details
Keep in mind banner images have additional interactivity that overlay on top, samples are shown below. Depending on your view some images might be covered or clipped off. Banner Images are also associated with Theme Type > Banner & Button Text.
Image Pointers for Banner Images
- Images that are abstract or a pattern make great banner images.
- Use images that don't have a focus point.
- Images with a colour overlay in contrast with the interactive text and buttons.
- Banner images can be a collection of objects related to the course.
Examples
Considerations
When customizing the look and feel of the LMS, the following considerations are worth bearing in mind.
Images with Text
Some components will overlay the banner image, therefore, images with text are not recommended unless used intentionally.
Aspect Ratio
Make sure images have a proportioned scale or widescreen aspect ratio. Unproportioned images could look stretched or objects can be cut-off.
Transparency
Transparent Images will overlay with a Gray background (Hex #b2b2b2), make sure the chosen image can compliment the gray background.
Low Contract with Text
Page Banners are associated with a Theme Color "Banner & Button Text". If you select a text colour similar to the image, course titles will not be readable.
Copyright
Use images that you own, have purchased, credit authors properly, ask permission for image usage or use creative commons license images with caution. Protect your content from copyright infringement.
Comments
Please sign in to leave a comment.