Cidi Labs Design Tools: Building a course homepage

Creating a Homepage

Using Cidi Labs Design Tools, you can create a custom Homepage for your Canvas course(s). Creating a course Homepage will allow you to provide your students with the tools necessary to successfully complete your course, while at the same time adding some creativity and visual interest to your course.

To begin creating your Canvas course Homepage:

1. Access the course that you would like to create a homepage for by clicking on the Dashboard icon in the Global Navigation Menu, or by clicking on the Courses icon in the Global Navigation Menu and then click the All Courses link.

   

2. Click on the desired course.
3. On the Course Navigation Menu, click Pages.
4. Click the View All Pages button in the upper right.
5. Create a page by clicking on the +Page button in the upper-right hand side of the screen.
6. Name the page "Homepage".
7. Click Save & Publish.

Once you have created your "homepage," you can begin using Design Tools:

1. Click on the Edit icon of any page. In this instance, click the edit icon for your homepage.
2. Click on the rocket ship icon that will appear in the top-right corner of the screen.
   Quick Tip: If you prefer using keystrokes, you can use the keyboard shortcut Alt-Shift-D to access Design Tools.

You should now have Cidi Labs Design Tools available for use, with all of its features listed on the right-hand side of the page.

Selecting a Theme

By default, there are a number of preset institutional themes that you can select. Once you have Design Tools open and you are able to see the menu items:

1. Click Create/Edit Content.
   
2. Click Choose a Theme.
   
3. Choose Front Page where it tells you to select a Page Type.
   
   
4. Select a theme from the available Institutional Themes.
   Quick Tip: Our favorite theme to use is "Colored Headings 1"

Adding Banner Text

After selecting a theme, you will be left with a generic Homepage, so you will need to customize this theme according to your course.

To add your course information as Banner Text:

1. Select Customize Banner Text.
   
   
2. Type in your course prefix (e.g, for ENC1101 the prefix is ENC) for the Unit Name.
3. Type in the four numbers that follow your course prefix (e.g., for ENC1101 this would be 1101) for the Unit Number.
4. Type in the name of your course under Content Title.
   
   

Add a Banner Image

Adding a Banner Image is what turns a generic Homepage into a more personalized user experience for you, your TAs, and your students.

It is easier to upload your course banner image by taking a step back and using Canvas' File manager.

**Take this time to save your progress by clicking on the Save button at the bottom of the page.**

To upload a Banner Image:

1. Click Files on the Course Navigation Menu.
   
2. Click the Upload button in the upper right of the screen.
   
3. Select the image you would like to upload.
   Quick Tip: It helps if the aspect ratio (height to width ratio) of the image is about 1100 x 313 pixels or so.

Return to your page that you have created, and access Design Tools:

1. Click Pages on your Course Navigation Menu.
2. Click View All Pages.
3. Select the "Homepage" page.
4. Click the Edit button.
5. Click the Rocket Ship icon in the upper right corner of the screen, or use the keyboard shortcut Alt-Shift-D.

To place the Banner Image you've uploaded into your Homepage:

1. Click Create/Edit Content.
2. Select Choose a Banner Image.
   
3. If you do not see the image you uploaded, click Refresh Image List.
   
4. Scroll down this menu and select the image once you have found it.

The image should automatically embed and you should now have a Banner Image for your course.

**Save your progress so far by clicking on the Save button at the bottom of the page**

Add/Edit the Navigation Links

By default, you should have four course links on your home page.

To add or edit the links that appear in your course home page:

1. Click Edit and then click on the Rocket Ship, or use the keyboard shortcut Alt-Shift-D.
2. Click on Add/Edit Navigation Block.
   

To add a navigation item:

1. Click the +Add Item button.
   
2. Type in a name for this Navigation item.

To remove a navigation item:

1. Click the X button to the right of the navigation block.

For your knowledge:

• Clicking the x Remove button that's to the right of the Refresh list button will remove all of your navigation items.

You must make this Navigation item a link for in order for users to be directed to their destination.

To make this Navigation item a link:

1. Place your mouse cursor where the navigation item is located and click on it.
2. Click the Link to URL icon that's located in the Rich Content Editor (2nd row, 3rd icon from the left).
   
3. Copy/Paste the link and then click the Update Link button.
   

To place an icon to the left of the Navigation Item:

1. Click on the box that's to the left of the Navigation item.
   
2. Select a relevant icon from the hundreds of icons that we have available for use.
3. Save your progress.

Following these steps, you should now have a completed Canvas course Homepage.

You should now be able to use and transfer this page to any of your courses that might require this Homepage.

The final step is to debut your masterpiece!

Making a Page the Front Page

To make this Homepage the Front Page for your Canvas course:

1. Click the Pages link located in your course navigation.
2. Click View All Pages.
3. Locate the Homepage you created on this list.
4. Click on the Gear icon to the farthest right on the row where your Homepage is located.
5. Select Use as Front Page.
   

If in the event that you don't see the Home Page that you created as your Front Page:

1. Click on the Home button in your course navigation.
2. Click the Choose Home Page button located on the far right of the page.
   
3. Select the Pages Front Page option and change the page to the Course Home Page that you designed.
   

When you click on Home, and any time you access your page, you should be redirected to the Homepage that you have created.