View All Pages

Adding Content

page-header-1700v2-1.png

Design Tools Resources for Faculty and Staff

DT-landing-5.jpg

Copy Existing Content

The copy Existing Content Tool

Sometimes it is easier to copy formatting from existing content than to format content from scratch. With the Copy Existing Content tool, you can copy the content and formatting from one piece of content to another.

 

The Interface

copy existing pages interface

Template Assignments/Discussions/Quizzes
Copy content from assignments, discussions or quizzes created using the Multi-Tool or any content with "Template" in the title (based on the type of the current content).
All Course Assignments/Discussions/Quizzes
Copy content from any existing assignments, discussions or quizzes in your course (based on the type of the current content).
Template Pages
Copy content from pages created using the Multi-Tool or any page with "template" in the title.
All Course Pages
Copy content from any page in your course.
Institution Template Pages
Contains any course template pages added to Design Tools at the institution level.
Copy Content by URL
Copy and paste the url from another piece of content in Canvas to copy the rich content editor  content. This does not work for a course home page, the url must contain the content type and identifier.

 WARNING: This command completely overwrites any existing content on the page with the content of the selected page.

 WARNING: This command only copies the HTML code, it will not copy images or files from the original course.

 Note: This tool only copies the rich content editor content, it does not pull over settings like assignment groups, rubrics, etc.

 

Copy Existing Content Steps

To copy existing content, follow these steps:

  1. Click Create/Edit Content.
  2. Click Copy Existing Content.
  3. Do one of the following:
    • Select the content to copy from any of the dropdown inputs. This option copies content between items in the same course.
    • In the Copy Content by URL box, type or paste the URL of the target content. This option copies content from items in other courses.
  1. Click Save.

 Tip: You can also click the Copy Existing jump menu icon button in the jump menu to jump right to the Copy Existing Content section.

 

 

Choose a Banner Image

Choose A Banner Image

Canyonlands National Park

With the Choose a Banner Image tool, you can add a banner image to the page. You can add a new image or replace an existing image.

Interface

choose a banner image interface

Add or Replace Banner Image

To add or replace a Banner image, follow these steps:

  1. Open the page for editing.
  2. Click Launch Design Tools.
  3. Click the Create/Edit Content section.
  4. In the Create/Edit Content panel, click Choose a Banner Image.
  5. Click the image that you want to add or replace.
  6. On the page, click Save.

 

 

Insert Images

Insert Images with the upload/embed image tool 2020

 Authorizing this Tool

When you first open this tool, you will be asked to authorize it so that it can add image files to Canvas on your behalf.

You can use the Upload and Embed Image tool to upload, crop, and embed images for your course. The Upload/Embed Image tool is a rich content editor LTI Tool.

 

Opening the Upload/Embed Image Tool

  1. On the page for editing.
  2. Place your cursor where you want to insert the image or select the image you want to replace.

Old Rich Content Editor

  1. On the content editor menu, click the Upload/Embed Image icon. 
    • Depending on the number of LTI tools turned on in a course, you can find the icon in one of two places:

      The icon may be visible in the toolbar 

      or in the More External Tools section
       more_external_tools.jpg

New Rich Content Editor

  1. On the content editor menu, click the plug icon (Apps) if visible or the three dots (More...) to find the plug icon.
    1. Plug icon on Rich Content Editor toolbar.png
  2. Click the Upload / Embed Image tool.

Choosing an Image

  1. Open the Upload/Embed Image Tool.
    1. Upload Embed Choose an Image.png
  2. Choose an Image Source
    1. Computer
      1. Drop a file or navigate to the folder on your computer where the image is located and select the image.
    2. Canvas
      1. Select an image in your Canvas course or personal files by navigating through the file structure, searching my file name, or sorting them by name, size date created, or date updated.
    3. Unsplash.com
      1. Type a keyword in the search field to browse Unsplash without having to leave the Upload/Embed Image tool interface.
        1.  
    4. Pexels.com
      1. Type a keyword in the search field to browse Unsplash without having to leave the Upload/Embed Image tool interface.
        1.  
    5. Public URL
      1. Type or copy and paste the URL from an image stored on an external server. 
  3. Click Open.

 

 

Choosing an Aspect Ratio

The default for the Upload/Embed image tool selects the entire image. If you want to custom crop or lock the controls into a specific aspect ratio, click on the  icon and follow the instructions below.

Ratio Controls

Image Ratio tool

Predefined Ratios

  1. Open the Upload/Embed Image Tool and choose an image to work with following the instructions above.
  2. Click Image Ratio
  3. Select one of the listed ratios

Custom Ratio

  1. Open the Upload/Embed Image Tool and choose an image to work with following the instructions above.
  2. Enter the desired ratio into the inputs next the Image Ratio button. First input is width, second input is height.

 

 

Rotating or Flipping an Image

Rotating an Image

When working with images, you can rotate the image 1 degree at a time or in 45 degree increments.

  1. Open the Upload/Embed Image Tool and choose an image to work with following the instructions above.
  2. Use the rotate buttons Screen Shot 2020-08-31 at 4.35.39 PM.png to rotate the image left or right 5 degree increments.

Flipping an Image

  1. Open the Upload/Embed Image Tool and choose an image to work with following the instructions above.
  2. Click the flip buttons flip buttons to flip the image horizontally or vertically.

Changing the Size of the Image

  1. Open the Upload/Embed Image Tool and choose an image to work with following the instructions above.
  2. Select a predefined width or height by clicking the Image Size Presets button and choosing a size or manually enter a width or height in the number input field.
    Screen Shot 2020-08-31 at 4.25.04 PM.png

 

 

Editing File Name and Alt Text

  1. Open the Upload/Embed Image Tool and choose an image to work with following the instructions above.
  2. Make the desired selection and size changes.
  3. Give file a descriptive name.
  4. Add descriptive alt text.

Screen Shot 2020-08-31 at 4.43.59 PM.png

  1. The default for the tool is to overwrite an existing file with identical name so be sure to deselect box if preferred to create a new file and keep the old.

Screen Shot 2020-08-31 at 4.44.30 PM.png

 

 

Downloading the Image or Uploading it to Canvas

    1. Open the Upload/Embed Image Tool and choose an image to work with following the instructions above.
    2. Make the desired selection and size changes.
    3. If storing image in course, chose a location in course or personal files.
    4. Select the desired option. Upload and Embed is the default option. Click the arrow to right of button to see all options.
      Upload and Embed
      Send a request for Canvas to upload the image and then embed the image into the rich content editor once the image has been added to the course/user files.
      Save as Course Image
      Description
      Upload to Canvas Only
      Send a request for Canvas to upload the image to your course files (or user files depending on who is using the tool).
      Download Image
      Save the image to your computer.

 

 

Insert & Style Icons

Insert & STyle Icons

Many tools have icon support built in. This tool allows a user to add an icon into the rich content editor at the cursor position.

 

The Interface

icons tool interface

 

Turning on the Icons Tool

 This is an Intermediate level Design Tool

To turn on this tool:

  1. Click the Design Tools Settings icon   in the Jump Menu
  2. Do one of the following:
    1. Choose  Intermediate or  Advanced from the Select a Comfort Level area
    2. Manually turn on this tool by finding the ___ tool in the list and clicking the switch below the tool name
  3. Close the Design Tools Settings

 

Instructions

 Add an Icon at Cursor Position

  1. Open the page for editing.
  2. ClickLaunch the Design Tools.
  3. In the Design Tools menu, clickAdd Advanced Elements.
  4. In the Add Advanced Elements section, clickIcons.
  5. Click Insert Icon at Cursor.
  6. Place your cursor in the rich content editor where you want to place an icon.
  7. Search for an Icon or choose an icon from one of the categories.
  8. ClickSave.

 

Change an Existing Icon

  1. Open the page for editing.
  2. ClickLaunch the Design Tools.
  3. In the Design Tools menu, clickAdd Advanced Elements.
  4. In the Add Advanced Elements section, clickIcons.
  5. Click the button in the Icons in Content section that represents the icon you want to change.
  6. Search for an Icon or choose an icon from one of the categories.
  7. ClickSave.

 

 Style an Icon

  1. Open the page for editing.
  2. Click Launch the Design Tools.
  3. In the Design Tools menu, click Colors - Advanced
  4. Place your cursor at the icon you wish to style in the rich content editor.
    1. Look for the "i" in the Apply To section of the Design Tools style tools to select the icon element.
    2. Uploaded Image
  5. Make and desired style changes using the rich content editor toolbar or Design Tools.
  6. Click Save.

 

 Tip: If your are having a difficult time getting your cursor on the icon, you can hover over the button for that icon in the Icons tool to select it.

 

 Tip: If your cursor is in an existing panel widget in the content editor, you can click the icons tool jump menu icon button in the jump menu to jump right to the Icon tool section.

 

Icon Accessibility

In the current implementation of icons in Design Tools, icons are purely decorative in nature and will be ignored by screen readers.

If you want an icon to be viewable by a screen reader, you will need to take additional steps.


To learn more about icon accessibility visit:
fontawesome.com/how-to-use/accessibility

 

 

Add HTML Snippets

Add HTML Snippets

HTML Snippets are preconfigured chunks of html that can be inserted at the cursor position within the rich content editor.

A variety of snippets are provided and additional snippets can be added into a primary or extended customizations course.

 

The Interface

Default

default HTML Snippets tool

With Institutional Snippets

html snippets tool with institutional snippets

 

Turning on the HTML Snippets Tool

 This is an Intermediate level Design Tool

To turn on this tool:

  1. Click the Design Tools Settings icon   in the Jump Menu.
  2. Do one of the following:
    1. Choose  Intermediate or  Advanced from the Select a Comfort Level area.
    2. Manually turn on this tool by finding the HTML Snippets tool in the list and clicking the switch below the tool name.
  3. Close the Design Tools Settings.

 

Insert an HTML Snippet

To add an HTML Snippet, follow these steps:

  1. Open the page for editing.
  2. Click Launch the Design Tools.
  3. In the Design Tools menu, click Add Advanced Elements.
  4. In the Add Advanced Elements section, click HTML Snippets.
  5. Choose the Desired Snippet in one of the following ways:
    1. Select snippet name from dropdown list(s)
    2. Click Preview Snippets and click the button next to the desired snippet
  6. Use the rich content editor to make any changes.
  7. Click Save.

 Tip: You can click the html snippets jump icon button in the jump menu to jump right to the HTML Snippets tool.

 

 

Add Accordions & Tabs

Add accordions & Tabs

With the Panels tool, you can add panel widgets like accordion panels, expanders, or tabs.

 

Accordion

An accordion is a series of vertical panels that can be expanded by clicking the title. The instructions below are an example of an accordion. With accordions, only one panel is open at a time. Accordions default with all panels closed but you can select any of the panels to be open by default when creating an accordion.

Accordion Panel 1

Accordion panel 1 contents. This panel can include just about anything.

Accordion Panel 2

Accordion panel 2 contents. This panel can include just about anything.

 

Expander

An expander is similar to an accordion, but multiple panels can be open at once. Expanders  default with all panels closed but you can select as many of the panels to be open by default as you would like when creating an expander

Expander Panel 1

Expander panel 1 contents. This panel can include just about anything.

Expander Panel 2

Expander panel 2 contents. This panel can include just about anything.

 

Tabs

Tabs are similar to accordions with only one panel visible at a time but titles appear in one row like folder tabs. With tabs, the first panel will default open but you can change the default when creating the tabs.

Tab Panel 1

Tab panel 1 contents, default open. This panel can include just about anything.

Tab Panel 2

Tab panel 2. This panel can include just about anything.

 

Turning on the Accordion | Tabs Tool

 This is an Intermediate level Design Tool

To turn on this tool:

  1. Click the Design Tools Settings icon   in the Jump Menu
  2. Do one of the following:
    1. Choose  Intermediate or  Advanced from the Select a Comfort Level area
    2. Manually turn on this tool by finding the Accordion | Tabs tool in the list and clicking the switch below the tool name
  3. Close the Design Tools Settings

 

Interface

Add a new panel widget

Controls to edit an existing panel widget

 

The following list describes tool options:

Add new
Create a new panel widget as a content block or at the cursor position.
Add new - As Block
Adds a panel as a content block. When you add a panel as a content block, you can reorder it on the page just like other content blocks.
Add new - At Cursor
Adds a panel at the cursor. When you add a panel at the cursor it is tied to that spot on the page and cannot be moved without changing the html code.
Type
Specifies the type of panel.
Add panel
Adds a new panel below the current panel in the selected panel widget.
Reorder panel
Moves the panel up or down in the display order.
Insert paragraph after
Inserts a blank paragraph after the panel widget.
Default open
Changes the default open behavior. The default behavior is to display the panels as initially closed. Enabling this option displays the panel as initially expanded.
Delete
Deletes the panel.

 

 

Add & Edit a Module List

Modules are containers that Canvas uses to organize course content. With the Module List tool, you can create a list of links to existing course modules.

Turning on the Module List Tool

 This is an Intermediate level Design Tool

To turn on this tool:

  1. Click the Design Tools Settings icon   in the Jump Menu
  2. Do one of the following:
    1. Choose  Intermediate or  Advanced from the Select a Comfort Level area
    2. Manually turn on this tool by finding the Module List tool in the list and clicking the switch below the tool name
  3. Close the Design Tools Settings

 

how to edit the modules list

image6.png

Open Design Tools

On your course home page, click Edit. Then click on the Design Tools icon (rocketship) in the upper right-hand corner.

Design Tools Add Advanced Elements

Add Advanced Elements

In the Design Tools menu, select Add Advanced Elements.

Design Tools Add Module List

Select Module List

Next, select Module List. 

Module List in Design Tools

Customize the Appearance

In the Module List, you have a variety of settings to choose from to customize how it appears on your home page.

image7.png

Save

Be sure to click Save to apply your changes.

 

The following table describes options for the Module List tool:

Module List Options Description
Module List Displays the course modules in the Module List panel.
Add All Modules Adds a link to all modules in the course.
Update Module Names Retrieves updated names for modules from Canvas
Module List Icon Adds an icon to the module list,
Link to Module List Opens links to the main Modules page.
Link to First Item Opens the links to the first item of the module. Browser version of Canvas only
Include Quick Links

Includes a list of module items below the module list for either the current module or all modules. The “Current” setting displays the modules as a bulleted list. The “All” setting displays the modules as a tabbed list. The default is None.
Browser version of Canvas only
Note: The colors for the tabs is pulled from the themed heading of the page and not based on any colors that might be added after the fact in the rce.

The “Current” setting displays the modules as a bulleted list. 

The “All” setting displays the modules as a tabbed list. The default is None.

 

The “None” setting displays the modules as a bulleted list:

Module List 

  

 The “All” setting displays the modules as a tabbed list. The default is None:

Module List Tabbed 

 

The “Current” setting displays the module that is marked as current. See how to mark a module as current in the “Mark as Current” section below.

Module List marked as current   

 
Columns

Selects the number of columns in the module list. The selected number reflects how many columns when Canvas is open on a large screen. The number of columns decrease with the window size.

Columns do not apply when All Quick Links is selected
The tabs/buttons for All Quick Links are based on the width of the longest module name. If there is a colon in the title, only the text before the colon will be used. For example, the button for a module titled "Module 1: Welcome to Class" would just display as "Module 1"
Date Fields Toggles the date fields on and off. Sets a start and end date for the module. The Date field determines which module link is highlighted in the module list on the published page. Canvas displays the date field with the name of the module. The actual dates are hidden from students to limit the text they have to comb through to find the current module.Need to update manually after a course copy
Publish Indicates is the module page has been published.
Change Icon Changes the icon for the individual module.
Visibility Detemines if the module is included in the list on the content page.
Mark as Current

Bolds the text of the current module.

To mark a module as current, select the checkmark next to the module.

Mark as current  

 

UF Footer