Showing results for 
Search instead for 
Did you mean: 
Community Member

Template for Canvas Homepage?

Jump to solution

Now that the Canvas Announcements feature shows announcements on the home page (which we love by the way!), we're starting to rethink our old home page template that we use in every course.  I was wondering if anyone had any new designs they are using that they'd be willing to share?  I've attached a demo of what we currently do.  We're looking to have the instructor's contact info somewhere on the page as well, but we'd like to keep the course navigation box.  stefaniesanders your blog post ( ) helped us immensely coming up with ideas for the home page in the past.  Are you using Announcements feature at all now? Does anyone have anything that they are using with success?  current homepage template

75 Replies

I know how to do this with jQuery but I have to warn you that Canvas is planning on phasing out jQuery in the future so this might break later. Here's a quick discussion on what that means and some ideas on how to keep your Canvas functioning p....

So this code works if you add it to your global JS file:


And here's a pic of what it looks like in our test environment:

the announcements area has been moved beneath the homepage content in a canvas course

Have fun!



Ours is less fancy but also generally unbreakable and easy for faculty to edit.  You can find it on the commons as CBS Home Page Template.

We are converting from Moodle and have been using this to create a landing page for the Canvas version of existing course site.  I link the name back to the faculty webpage and the email address autolinks.  The commons version also contains instructor information in a first module and standard course settings that include announcements on the home page set to display one.  We have academic techs doing the initial conversions from Moodle, so faculty first see this with a banner and all the links already established.  We also set up this page for instructors that want to build their own.  There are no countless variations on this basic starting point.


Explorer III

We have a basic Canvas starter kit that faculty can use that avoids tables since they are tricky for most to use and inaccessible by default.  You can search Commons for 'Valencia Sample Course' to see that and some other sample courses, and preview it here: Valencia Sample Course - Weekly Modules 

Our Canvas training course is adapted from Kona Jones and others.  A screenshot is below and you can preview it here: Canvas Essentials Sandbox 

Sticking with the 'large panda' theme: Smiley Happy

Canvas Essentials homepage


Thanks for your response.  The idea of globally moving the announcements has been gaining steam with our design team.  Any idea how we could implement this for all accounts using custom javascript inside a theme?  None of our folks have a coding background. 

Community Member

We gravitate toward squares and tiles in our front page designs. Some have large images with buttons beneath. Here's an example Art 1010 course front page. It's responsive and collapses down to two columns on smaller screens. I've also thrown in our Canvas Training front page with extra Panda awesomeness and a cool hover tile effect.

the front page design of an art 1010 course



Hey Mike,

In this scenario, I think JavaScript would need to do the heavy lifting rather than CSS. The Canvas front page section that is editable is situated beneath the Announcements component in the DOM. The Announcements component has this ID:

<div id="announcements_on_home_page">.

It's possible you could target that specific ID with custom JavaScript at the account level and switch its position in the DOM but you'd need to be sure to target only the course you're changing, unless you want to move it globally for every course.

The thing I'd be most worried about with this route is Instructure changes Canvas components so often that it might be something you're constantly having to fix.

Not the most helpful answer here but something to think about.


Lots of great examples here showing announcements ABOVE the HTML field, so this may be an odd question....

How would I adjust code (css?) to move the announcements page BELOW the HTML field?  I know it isn't the optimal place, but I'm looking to fill a specific requirement.

Hi - yes, exactly that! 'Weekly resources' links to the modules page (which has templated Week 1, week 2 etc blocks) and  'general resources' also links to a module block. Assignment due dates show in the course summary. We use images for all our buttons to make sure they can be seen in the app.

Hi Natalie,

I like the fresh colors and the graphic layout for your links. Does the Weekly Resources link lead to the Canvas Modules page? And I'm guessing as the term progresses, all of the upcoming assignments are first in the Course Summary list?

Cheers - Shar

Community Member

Each of our depts has their own template for their courses, with slight variations of colour/content but many have opted for variations on the design below. We use the syllabus page as the homepage, with tables, as this seems to resize better in the app and we know a lot of students are using the app extensively. Each course will replace the homepage image, which will also match the dashboard image. (Should explain in UK module = programme unit, so each course is a 'module'!)

eg1 in web and app

School media &amp; film template              SMF template in app


Psychology template