How to Use Page Templates

You are free to design your homepage in any way that makes sense to you. The most important consideration is that your homepage directs your students to the course materials they need. However, if you would like a shortcut, we have created a number of page template variations that will work in Canvas courses. These templates are built to be responsive so they will resize on mobile devices.

If you are interested, check out the Page Templates site.

There you will find 44 homepage templates in Seattle University colors. There are 5 basic variations. The first three variations are templates that you can copy directly into Canvas and edit. The last two are templates that allow you to insert a banner you make in PowerPoint using the PowerPoint templates you will find on the site. You will also find a number of Module Landing Page templates at the site. We encourage you to explore them.

How to Use the Templates

Peruse the templates you are interested in; when you find one that suits you, copy the code that is available on the bottom of each template's page and paste it into the HTML editor on your own Canvas page. You can also follow the step-by-step instructions on the site. Below is an example for you to try. It is the code for the basic template in SU Red that is pictured top right.

COPY CODE BELOW

<table style="min-height: 400px; width: 100%; max-width: 800px; min-width: 315px; margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td style="height: 100px; background-color: #ef4135; text-align: center;" colspan="2"><span style="font-size: 24pt; color: #ffffff;"><strong>Course Name Goes Here</strong></span></td>
</tr>
<tr>
<td style="height: 40px; background-color: #000000; text-align: center;" colspan="2"><span style="color: #ffffff; font-size: 14pt;"><strong>Course Code&nbsp; |&nbsp; Quarter&nbsp; |&nbsp; Instructor Name</strong></span></td>
</tr>
<tr>
<td style="width: 30%; vertical-align: top;">
<p>Start Here</p>
<p>Course Syllabus and Policies</p>
<p>Contact Your Instructor</p>
<p>Technology Tips and Help</p>
</td>
<td style="width: 64%; text-align: left; vertical-align: top;">
<p style="padding-left: 30px;">WEEK 1: Topic Name</p>
<p style="padding-left: 30px;">WEEK 2: Topic Name</p>
<p style="padding-left: 30px;">WEEK 3: Topic Name</p>
<p style="padding-left: 30px;">WEEK 4: Topic Name</p>
<p style="padding-left: 30px;">WEEK 5: Topic Name</p>
<p style="padding-left: 30px;">WEEK 6: Topic Name</p>
<p style="padding-left: 30px;">WEEK 7: Topic Name</p>
<p style="padding-left: 30px;">WEEK 8: Topic Name</p>
<p style="padding-left: 30px;">WEEK 9: Topic Name</p>
<p style="padding-left: 30px;">WEEK 10: Topic Name</p>
</td>
</tr>
</tbody>
</table>

NOW PASTE INTO THE HTML EDITOR ON YOUR HOMEPAGE