franke
Community Contributor

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 (https://community.canvaslms.com/groups/designers/blog/2015/04/16/creating-an-inviting-course-home-pa... ) 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

2 Solutions
jlstalke
New Member

We also have a course home page template and I am excited to see what others are doing.  Here is our template:

215997_pastedImage_1.png

View solution in original post

Shar
Community Champion

Hi Emily,

We also like the Front page announcements. Here's one of our front page designs that has a larger lesson navigation area than yours but the idea is the same. Each mini card leads to the specific week on the Modules page.

  • About Course is sometimes called Start Here but either way leads to the Course Overview.
  • Resources contains information about the syllabus and textbook.
  • Study Hall Cafe is the pinned general discussion.
  • Teaching Team contains the instructor contact information; when there is no TA, that link is called Instructor.

Front Page of Shar

We've got some custom CSS involved suppressing the underlines on those links otherwise the whole page would show up too underlined. Smiley Wink

Cheers - Shar

View solution in original post

78 Replies
jlstalke
New Member

We also have a course home page template and I am excited to see what others are doing.  Here is our template:

215997_pastedImage_1.png

Can I ask how you created the template? or was it one that can be downloaded?

We actually made the page first.  Then I took a snip of it and pasted it into Word.  I then added the instructional arrows.

We wanted our students to have a familiar feel when they swapped from class to class and we wanted them to know where to find all of their teachers' contact information.

Brilliant idea  @jlstalke . I guess for K-12 it needs to be more image linked?

s_j_beale
Community Participant

Hi @jlstalke 

Thanks for sharing this design.

As with the others on here, just curious to see how staff handle amending the banner image and whether it is fully responsive in mobile devices/on the app?

Thanks,

Steve

0 Kudos
Shar
Community Champion

Hi Emily,

We also like the Front page announcements. Here's one of our front page designs that has a larger lesson navigation area than yours but the idea is the same. Each mini card leads to the specific week on the Modules page.

  • About Course is sometimes called Start Here but either way leads to the Course Overview.
  • Resources contains information about the syllabus and textbook.
  • Study Hall Cafe is the pinned general discussion.
  • Teaching Team contains the instructor contact information; when there is no TA, that link is called Instructor.

Front Page of Shar

We've got some custom CSS involved suppressing the underlines on those links otherwise the whole page would show up too underlined. Smiley Wink

Cheers - Shar

ishar-uw Is this available in the Commons?

s_j_beale
Community Participant

Hi @Shar 

This looks nice - just curious how the design performs on mobile devices or with any assistive technology?

Looks like it might use Bootstrap for the table design - if so, how do staff with no coding knowledge handle adapting/customising it?

Thanks for your input!

Steve

0 Kudos
Stef_retired
Instructure Alumni
Instructure Alumni

 @franke , I'm not currently teaching. If I were, I'd join you in rethinking how I configure my course home page in light of the new announcements feature, because I have always used the Syllabus page as my course home page; currently, the announcements feature can only be used on a page of one's own design.

awilliams
Instructure
Instructure

We are using Certified Partner - Cidi Labs‌ Design Tools for our course design and template management. Here's an example of one of our courses that is using that as well as the new announcements on homepage feature.

216033_pastedImage_1.png

franke
Community Contributor

Thanks awilliamsI like this homepage design.  With the image, does that change depending on the course or do you always use the same one?  Never heard of Cidi Labs, will have to check them out.

This is a little late... but we have a selection of banners to pick from, have added ones that are specific to our area, and there is also an option to use whatever you like.

Hey  @franke ‌. There is going to be a demo of Design Tools by Florida State and Embry-Riddle in just a little bit. Check it out over here and if you miss it there may be a recording. https://community.canvaslms.com/events/2465-partner-webinar-design-tools-introduction-featuring-flor... 

jblumberg
Community Contributor

Hey Emily,

I can catch you up on CIDI labs.  You saw the early demos of Kennethware from Utah State... it has evolved into CIDI labs. Give me a call.

Hi awilliams‌,

Do you know how they did that transparent left side of the page? 

0 Kudos

Hey Tracie. I don't know much about how it was done, just it was some combination of CSS and JS. This was one of the provided themes that was available to choose from and not having to know the specifics of how any of it worked was part of the beauty of having that tool Smiley Happy

You used something named "Design Tools"? Do you happen to have a link to it?

0 Kudos

traciebosket, here's the link my Google search unearthed: https://cidilabs.com/ 

Great, thanks Stefanie Smiley Happy

873179959
Community Contributor

@awilliams I love the look of this homepage example, with the links menu overlaying the Banner image. We have CIDI Design Tools, but I can't figure out how to recreate what you did there. Do you have a template in Commons or have a some tips on how to create something like that?

Thanks!

Chelsie 

Tags (2)
0 Kudos
rmthomas
Community Participant

I appreciated getting to see some of the designs from the reply posts. Also, I like the idea of linking from the Home (Front) page to a "about me" page.

sonya_mcchristi
New Member

We have repurposed the Syllabus tool to serve as our default home page which we apply to all newly created modules. It's pretty simple and generic, with a welcome message and a couple of buttons taking students into the 'Units / Modules' tool and a pre-prepared page about study skills.

Sunderland Home Page

Boekenoogen
Community Contributor

Here is a template that we use in our college...

Template for OU-PACS Homepage

franke
Community Contributor

Thanks for the example  @jrboek ‌.  Do you use the same images in each course for each unit?  Where is the Instructor contact info/Syllabus?

0 Kudos
Boekenoogen
Community Contributor

We use different images for the different courses and different colors for our different degree programs. The instructor information is in the course menu.  I will add an image to this site later.  

Nicely done. This template looks fantastic. I’m a Canvas ‘Newb’ but would love to test something similiar. Where do you put announcements? 

natalie_norton1
Community Champion

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 & film template              SMF template in app

eg2 

Psychology template

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

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.

canvas18
New Member

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.

mmitchell
Community Contributor

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.

Mike,

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. 

mmitchell
Community Contributor

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:

$("#announcements_on_home_page").insertAfter("#course_home_content");

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!

Mike

Mike,

This is outstanding!  Exactly what I was looking for...until I started to play with it.  Your code gave me what I needed to change our approach.  I have now adapted it to always show announcements in the sidebar.

In my theme's custom JS, I added:

$("#announcements_on_home_page").insertAfter("#course_show_secondary");

And it looks great, too!

Sample Sidebar Announcements

mmitchell
Community Contributor

Looks good Mike! Well done.

How did you add the recent announcements to the bottom of your page?

0 Kudos

How did you get your recent announcements at the bottom of the page?

0 Kudos
mmitchell
Community Contributor

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

273249_ArtHomepage2.png

273250_TrainingFrontPage1.jpg

Hi  @mmitchell , I really like the templates you created - are they available through the Commons?

Thank you!

Veronica