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.

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