LTU ALERT:

For Thursday 02/06/25, the campus will be closed until 12 noon today due to the severe weather. All classes scheduled after 12 noon will take place as scheduled. Students should check Canvas for details on classes.

eHelp
Canvas Page Templates

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?

Add Page Templates

You can choose between using Accordion or Tab Template.

Accordion Template

Tab Template

» Create a New Page

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

» Add Your Template

  • 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

Edit Template

  • 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

» 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
  5. Save

» Editing Content and the Template

Add Video to 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

» Adding the Unique Video

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

Youtube unique code

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.

Save!

» Adding and Linking Videos

Embed Images

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

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

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.

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