TC Technology Knowledge Base

Create a custom built Overview page using Canvas template

Updated on

This intermediate tutorial covers how to copy code from the template's Code Breakdown Page and assemble the components of your overview page in whatever order you desire.

1. Navigate to Pages, View All Pages, and locate two pages: (1) Copy Me or Blank Overview Page and (2) See the Code or Code Breakdown Page

Wording may vary depending on your template version. If your course site does not have these pages (or similarly named pages), contact DFI and they will be added.

2. Duplicate the Blank Overview Page

Template Form Test - [Brennan]: Pages - Google Chrome

3. Open the duplicated Blank Overview Page and the Code Breakdown Page.

It is recommended to open both of these pages simultaneously with tabs.

4. In the Code Breakdown page, identify the section you want to copy.

The code breakdown page presents bold text to describe the section below, then the HTML code necessary to produce it, and finally, how the section will appear in the front-end view.

Code Breakdown Page: Template Form Test - [Brennan] - Google Chrome

5. Highlight and copy the HTML of the section you want.

Code Breakdown Page: Template Form Test - [Brennan] - Google Chrome

6. On the duplicated Blank Overview Page page, select Edit.

Blank Overview Page Copy: Template Form Test - [Brennan] - Google Chrome

7. Rename the page for your purposes.

8. Click into the Rich Text Editor to place your cursor in the blank space below the existing content, press Enter/Return three times.

Pressing Enter/Return now creates more blank spaces, which will be easier to select later on when adding multiple additional sections

Blank Overview Page Copy: Template Form Test - [Brennan] - Google Chrome

9. In the toolbar menu, click Insert, then select Embed.

Blank Overview Page Copy: Template Form Test - [Brennan] - Google Chrome

10. Paste your code in the window that appears, click Submit.

The item that you copied from the code breakdown will appear in the editor.

11. Edit your the text as desired.

12. Before repeating this process, ensure that your cursor is in the blank space below the existing content- the space that was created in Step 7 by pressing Enter/Return.

You can check that your cursor is in the proper place to perform this procedure by looking for div ▶ div ▶ p beneath the Rich Text Editor, on the left.

Blank Overview Page Copy: Template Form Test - [Brennan] - Google Chrome

13. Add additional items as needed.

14. Save your work.

Previous Article Fix a broken homepage thumbnail link
Next Article Link learning activities to the Overview page in the Canvas template

Canvas for Faculty

Get Started with Canvas 18
Canvas Basics: Pages & Modules 25
Publish a Canvas Course for Student Access 2
Canvas Gradebook 5
Canvas Quizzes and Surveys 5
Settings in Canvas 6
Add/Remove People in Canvas Course 2
Access Canvas as a Guest Without a UNI 2
Recording in Canvas 1
Error Messages in Canvas 1
Canvas Analytics 8
Honorlock Proctoring in Canvas 2
Canvas Assignments 8
Canvas Discussion Board 6
Canvas Home Page Template Editing 14
Canvas Overview Page Template Editing 7