Anna Stirling

Example Home/Front Page Template

Blog Post created by Anna Stirling on Aug 31, 2015

The idea of an example home page has been discussed multiple times during the Faculty support calls @ONE has been facilitating for OEI Full Launch Pilot colleges.  In an effort to support the conversation and those looking for a template to use @ONE has designed a simple, yet functional home page that can be customized by each individual user.  The example home page relies on the default Canvas styles available for use and explained in the Canvas Style Guide.


If you are familiar with HTML you will be able to use the information provided in the style guide and the foundation example home page to create a highly personalized home page.  Attached you will find a .txt file with the HTML code (with comments) needed to re-create the homepage. *Please note: The banner included in this design is just an image, it is not based on built in styles and is not responsive for mobile viewing.


However, the great news is that you don't have to know HTML to make basic edits to the example home page provided.

To get started:

  1. Copy all of the text from the included file
  2. Switch to HTML editor and paste the text from the file
  3. Switch back to the Rich Content Editor

*Please note: When you are in the Rich Content Editor view you will NOT see the buttons.  Your page will look like this:


You can edit the text of each button or link by editing the text information on this page.  To change the location of where the link goes, click on the text, select the insert link icon and add the correct link for your course.  Once you save the page; the styles will take effect, and you will see the buttons and the list of links that show as a vertical list will display as a horizontal list.


If you have questions about using this template, please feel free to post them as a comment to this blog.