Canvas CSS for CTA Headers Guide

Canvas CSS: Call-to-Action Header

I developed this header to add call-to-action (CTA) content at the top of a Canvas course’s homepage. It provides space for a quick text announcement, and it can include a button that directs students to a specific spot in the course.

Screenshot of a call-to-action header for a Canvas course
Screenshot of a sample call-to-action header for a Canvas course

If I build a course myself, I create a series of pages with a new CTA header for each week. These pages hang out in the Pages area of the course, where students can’t see them. (Just remember to remove the Pages link from your course’s navigation menu if it’s displayed by default.) Then, the instructor (or a TA or staff person) simply needs to reset the front page in the course each week. If you can pull this off, it’s a great practice. Consider that if a course’s homepage stays exactly the same, students will skip right over it without stopping to look at its content.


Considerations

Keep in mind 3 main things when using this type of header:

  1. Make sure you’re using a large enough image. It should be at least 1600px wide and 800px high—but perhaps the height will need to be even bigger if you have a lot of text (but hopefully not—see #2).
  2. Keep your text brief. The CTA button is designed to hold just 1-2 words, and ideally your heading will be 1-3 words. Paragraph text works best at 3 lines or fewer, and you should have only one paragraph.
  3. This layout doesn’t work well in the mobile app. I just hide the image and add in a color background in my mobile CSS for Canvas. I’ve found that the mobile app sometimes doesn’t display larger images, and regardless, many images won’t look good on a smaller screen in portrait orientation.

If you want to include more text than what a CTA header allows for, consider putting it into a separate section under this header. A call-to-action header is by design meant to provide a very short message that directs users to a page with more content. 


Code

Note that I haven’t included mobile CSS in this pen since you have to add it as a separate file in Canvas, so the result may not look good in this pen if you have a smaller screen. To learn more about creating your own custom style sheets, check out my Canvas CSS Overview.

css.php