Design Tools is integrated within Canvas and provides additional tools for streamlining the creation of course sites and improving the style and design of course banners, content pages, assignments, discussions and quizzes. Once in Edit mode, Design Tools (rocket ship icon at the top right) can be used to add more elements to the rich content editor. 
First, set Design Tools to display Add Advanced Elements?

  1. Click the Cog wheel to open settings
  2. Click on Intermediate
  3. Click X to close

templateUnlockingAddAdvancedElements

You can choose between using Accordion or Tab Template.

Accordion

canvasPagesAccordion

Tab

canvasPagesTab

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

canvasPagesLocation

New Page

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

Page loads in Edit Mode

canvasPageTemplateChoice

  • 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.

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

newTab


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

tabPanelColor

  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

Save

linkTabPage

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
  • Select HTML Snippets
  • Click Institutional Snippets dropdown
  • Choose Youtube player embed
canvasDesignToolsYoutubeEmbed

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

Youtube unique code
templateYoutubeUniqueCodeLocation
Highlight the section of text after v= (Youtube) to the end before &, 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

templateVideoAddDone

Save!

Adding and Linking Videos

templateAddingUniqueCode

The instructions below will take you through how to change or add images in Canvas using Design Tools Upload/Embed tool.

To upload/embed image in Edit mode:

  • Log into and access Canvas course
  • On the Home Page (or desired page) select Edit mode
  • Click to select the image to be replaced

In the Tool Bar click either Tools -> Apps or the Plug icon

canvasNewRCEKalturaEmbed

If you have not previously chosen any apps, you will see the below window after clicking Apps. Click Upload/Embed Images

canvasUpload-EmbedImagesNew


On the Upload/Embed Image page, follow the below steps:

Step 1: Prompts you to Choose Image. Locate the image desired from local file.
Step 2: Move, position and align the cropping outline on the image until Width is as close to "640" and Height is as close to "263" as possible.
Step 3: Click Crop Image. On the next screen add a file name and select Upload to Canvas.

cropping


The Cropped/Resized Image screen displays status of the status. Once complete you will have to option to select Embed into Editor. This will replace the generic image and also place the image file in Canvas Images files

embedding