Top Tips for Using Canvas


  1. Use the weekly topic title in the heading of every component of that week. This ensures that which ever page the student lands on they are aware of where they are. "Weekly Topic: page topic title"

  2. When using the "next buttons" to navigate forwards and backwards between pages, Canvas will not recognise weekly blocks of content. Ensure there is an "End!" page to each topic/week that is bright and obvious. This will prevent students daydreaming on to the next topic (as will the use of weekly title in the header). See "Adding buttons" below.

  3. Use a table on the homepage to lay out the weekly content and direct the user via hyperlinks.

Using Tables


  • offers many design templates that are easy to edit and free to use.

Design & Navigation

Scroll to Top

Adding the code below to a long page of content can be good for navigating the page.

<a id="scroll-top-link" class="avia_pop_class" title="Scroll to top" href="#top" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello">

<span class="avia_hidden_link_text">Scroll to top</span>

Add a Straight Line

A horizontal line can be useful for organizing information and breaking up content on a Canvas page.

  1. "Insert" on the top ribbon and "Horizontal Line", or

  2. In HTML, add <hr />. Tip: To keep track of where it might be needed, create a long row of x's where you'd like the line to go (e.g., xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx). Then, click on 'HTML Editor' to switch to HTML view. Look for the row of x's. Highlight the row of x's, and replace them with the HTML code <hr />

Embedding Google Docs

  1. Sample html code below for embedding a google doc taken from (my emphasis in red)

    • <p><iframe src="" width="100%" height="600"></iframe></p>

  2. Embedding Interactive Digital Worksheets -

Embedding a website

Managing the Dashboard View

  1. Images can be added to the card that represents each module page. Click here to see how to do this.

  2. Images can be added to the card that represents each module page. If the students want to see them more clearly they can remove the coloured overlay like this

Image sizing

  • If you add a new image it will be added as the size that it is by default. When the browser window varies in size this image will then appear out of line with the text which will be moved around in a responsive way to make it easier to read.

  • Once the image is uploaded to Canvas, use the "Edit HTML source" button (<>) to expose the code that represents the image.

  • In the htmal example below, I found the URL for the image I had added and added the last phrase, width=”100%”, after the closing speech mark and before the slash/greater-than code.

  • <img src="" alt="people at work" width="100%" />

Adding Tabs

Adding icons

Adding Buttons

Add padding to an image/icon/button

Use a template for a homepage

Tweeking the html

Embedding more visually stimulating components

  • MS Sway offers a relatively easy way of embedding ppt/google slides/youtube/text in a visual package that has it's own narrative.

Creating hyperlinks

  • There are two ways of creating links to other content and the choice of method depends on whether you are directing the user to another page in the same Canvas site or to an external link. Find out more here

Broken links to images when importing a course