• Log in to Canvas
  • Access Canvas Course
  • Select Pages, View all Pages
  • Click +Page to add a new Tabbed Page

New Page

  • Type in new name
  • Launch Design Tools (rocket ship)
  • Select “Create/Edit Content
  • Select “Copy existing content
  • Select Institutional Template and here you can select either the Accordion or Tab Page

Page loads in Edit Mode

  • To edit the text within the tabbed box; highlight the text and begin typing replacement text (or copy/paste existing text)
  • To edit the Tab Headings position cursor within any of the Tab Headings
  • Select Add Advanced Elements. Don’t see Add Advanced Elements?
    • Click the Cog wheel to open settings
    • Click on Intermediate
    • Click X to close

Select Accordion and Tabs to expand and see all the “blocks” available in the template

  • To reposition – click to drag/drop
  • To delete – click on the X to the right of the tab name
  • To rename - click inside the box, highlight text and rename

Adding New Tab or Accordion Panel
From Design Tools (Rocket Ship)

  1. Click Add Advanced Elements
  2. Click on Accordions | Tabs
  3. Click in any of the preexisting blue tab panels
  4. Click +Add Panel

Choose which type you want (Accordion or Tab). Rename Panel Heading to desired title


Changing Tab Panel Color
Click inside the new panel box, from Design Tools (Rocket Ship)


  1. Click Customize the Style
  2. Click Current Element Style
  3. Click Color
  4. Click the grey color box under Background Color
  5. Choose the top first Blue color

Linking to an Assignment Using the Tab Page Template

  1. Highlight the existing text in the text box under the tab you want to place your assignment link, then delete existing text.
  2. With the cursor still in that text box, select Links tab from the right-hand side
  3. Click Assignments
  4. Click the assignment you want to link. The assignment link will now appear in the text box



Editing Content and the Template

Adding Videos (YouTube, Panopto) in Canvas Tab Template

Adding the video player

  • Select Pages, View All Pages
  • Find desired Page, click Edit
  • Launch Design Tools (Rocket) at the top right
  • Place your cursor in the Rich Content Editor (RCE) where you would like the video
  • Click on Add Advanced Elements from Design Tools 
    Don’t see Add Advanced Elements?
  1. Click the Cog wheel to open settings
  2. Click on Intermediate
  3. Click X to close
  • Select HTML Snippets
  • Click Institutional Snippets dropdown
  • Choose video player embed (Youtube, Panopto)


Adding the unique video
Go to Youtube or Panopto, this depends on which player you embedded, and find the desired video

Youtube unique code
Panopto unique code
Highlight the section of text after v= (Youtube) to the end before & and id= (Panopto) to end and copy (Ctrl C for PC or Cmd C for MAC)
Launch Design Tools (Rocket) at the top right

  • Select Customize the Style
  • Click Style iframes
  • Under iFrame 1 locate the # highlight and paste the unique code from the video URL

Done! Your video will appear in the player in the RCE

Video is now displayed in the template page



Adding and Linking Videos