Additional Tools
Design Tools Resources for Faculty and Staff
Component Reference
This page is a visual library that shows the implementation of commonly used Design Tools components.
Design Tools is a series of tools that adds additional functionality when developing content in Canvas. These tools are available in Content Pages, Assignments, Discussions, Quizzes and the Course Syllabus.
There are a variety of themes to choose from of which this is just one example. Themes can include just a stylized heading or automatically include a banner image and navigation items. This page also shows the use of option subtitle and description within the heading. Continue through this page to learn more.
Objectives
Boilerplate blocks (formatted pieces of content) can be customized at the institution level and users can add that easily pull in that content.
- Describe this
- Define that
- Identify this
Image Styles
Design Tools comes preconfigured with a variety of image styles. These allow image borders and styles to be independent of themes. If you would like to suggest an image style, please use the Suggestions feature in the Help section of Design Tools. Here are examples of the included styles.
Tables
New Canvas table style
Text | Date | Percent | Number | Currency |
---|---|---|---|---|
Aardvark | 12/25/2013 | 12% | 100 | $12.00 |
Platypus | 07/04/1776 | 14% | 77 | $1.23 |
Koala | 01/01/2001 | 1% | 0 | $0.50 |
Rhinoceros | 11/11/2011 | 11% | -11 | $111.11 |
Alligator | 01/26/2014 | 23% | 652 | $19.53 |
Manatee | 01/02/2003 | 45% | 14 | $925.00 |
Narwhal | 12/07/1941 | 3% | 123 | $321.01 |
Giant Salamander | 12/13/2014 | 36% | 55 | $0.01 |
Sortable Table
Text | Date | Percent | Number | Currency |
---|---|---|---|---|
Aardvark | 12/25/2013 | 12% | 100 | $12.00 |
Platypus | 07/04/1776 | 14% | 77 | $1.23 |
Koala | 01/01/2001 | 1% | 0 | $0.50 |
Rhinoceros | 11/11/2011 | 11% | -11 | $111.11 |
Alligator | 01/26/2014 | 23% | 652 | $19.53 |
Manatee | 01/02/2003 | 45% | 14 | $925.00 |
Narwhal | 12/07/1941 | 3% | 123 | $321.01 |
Giant Salamander | 12/13/2014 | 36% | 55 | $0.01 |
Accordions and Tabs
Panel Heading
Panel Content
Panel Heading
Panel Content
Panel Heading
Panel Content
Panel Heading
Panel Content
Panel Heading
Panel Content
Panel Heading
Panel Content
Popup Content
A modal dialog is a pop up window that can contain content.
Open the tool tip dialog Tooltip Text
This is popover content.
Modal Title
This is a modal.
Quick Check
Quick Check
Put question text here
Answer A
Response text to display when this answer is selected.
Answer B
Answer B reply text
Instructor Info
Module List
Module 1
Module 2
Module 3
Module 4
Module 5
Module 6
Module 7
Module 8
Module 9
Module 10
Module 11
Module 12
HTML SNippets
Insert quote here
Important Tip: Tag line
Enter message here
Heading
Content
Content
Content
Content
Content
Content
Content
Check Accessibility
Check Accessibility
The Check Accessibility Tools examines page elements for adherence to accessibility standards.
The Interface
- Headings
- The Headings tool looks at the headings on a page for proper order.
- Image Check
- The Link Check tool looks at the Images on a page for the presence of alt text. You can edit an image's alt text with this tool.
- Link Check
- The Link Check tool lists all of the links on a page to make sure they make sense out of context.
Instructions
Check Page Headings
The Check Accessibility Headings Tools allows you to examine and change the heading structure of your content.
The following statement regarding headings comes from the World Wide Web Consortium (W3C) (Links to an external site.) which develops web standards:
Headings add structure and meaning to pages by labeling each content part and indicating the relative importance of those parts.
Assistive technologies and some browsers provide mechanisms to present a list of headings to the user that allows users to jump to individual headings. Headings also provide visual clues that help to skim the page or find a specific section, this is especially useful for people that are easily distracted.
It is good practice to nest headings properly. When stepping down through headings, skipping levels should be avoided. That means that an
<h1>
is followed by an<h1>
or<h2>
, an<h2>
is followed by a<h2>
or<h3>
etc.
To check page headings, complete the following steps:
- Open the page for editing.
- Click Launch Design Tools.
- In the Design Tools panel, click Check Accessibility.
- In the Check Accessibility panel, click Headings.
The tool displays a check mark if the heading passes the check or an exclamation point if the heading does not pass the check. The box also changes color - green for pass or red for fail.
Tip: Click the next to a heading to move the heading up or down one level.
Check Alternative Text for Images on a Page
- Open the page for editing.
- Click Launch Design Tools.
- In the Design Tools panel, click Check Accessibility.
- In the Check Accessibility panel, click Image Check.
The Image Check panel displays the images on the page and their alternate text.
If an image does not contain alternate text, the field will be blank. You can add or edit alternate text with this tool.
Check the Links on a Page
- Open the page for editing.
- Click Launch Design Tools.
- In the Design Tools panel, click Check Accessibility.
- In the Check Accessibility panel, click Check Links.
- Click the button next to a link to change its content.
The Multi-Tool Module Builder
The Interface
The Module Builder Tools contains the following options:
- Module Prefix
- The Module Prefix option is the unit categorization for your modules. The Module Builder provides a number of terms from which to choose.
- Number of Modules to Create
- The Number of Modules option lets you specify how many modules will be created.
- Starting Number
- The Starting Number option determines the start number of the module (only visible if the course already has modules).
- Assignment
- The Assignment button adds an assignment to the list of module items.
- Discussion
- The Discussion button adds a discussion to the list of module items.
- Header
- Add a Text Header to the list of module items
- Page
- The Page button adds a content page to the list of module items.
- Quiz
- The Quiz button adds a quiz to the list of module items.
Instructions
Create New Modules
The New Module Pattern is used to setup the number and arrangement of module items that will be customized before creating the modules.
To set a module pattern, follow these steps:
- On the course navigation menu, click Multi Tool.
- On the Multi Tool page, click Module Builder.
- On the Module Builder page, click Add New Modules.
- Select your options.
- Click Generate Module List.
- (Optional) Customize the module list.
- Click Add Modules to Course.
Update an Existing Module
To update an existing module, follow these steps:
- On the course navigation menu, click Multi Tool.
- On the Multi Tool page, click Module Builder.
- On the Module Builder page, select the module to update.
- Make desired changes
- Click Update This Module.
Update an Existing Module
When adding an item to a new module or an existing module, there are a variety of settings you can specify.
The following outlines the available options and where they can be set.
- Indent Level - All
- The number field at the start of the module item sets the indent level that the item will appear in the modules page in Canvas.
- Include module information in name - All
- This checkbox will specify if the item will include the module identifier and the module number as part of the name when created. In the screenshot above, with the box checked the first item would be created with the name "Module 1: Assignment 1". If the box were unchecked, the first item would be created with the name "Assignment 1".
- Name - All
- This is the name of the item that will be created. If text is entered into the input, that will be used, otherwise it will use the placeholder text which is the type of item and a number. Created name will also include module information if the checkbox is checked.
- Template List - Assignment, Discussion, Page, Quiz
- Whether you have created templates using the Templates tool in the Multi-Tool or you have existing content in your course. The templates dropdown lists existing items that you can choose when creating a module item. Assignments, Discussions and Quizzes will pull in the description content added using the rich content editor as well as the majority of settings (threaded discussions, allow liking, one question at a time in quizzes, etc.). Pages will pull in the page content but not any settings.
At the moment, external LTI assignments (like New Quizzes) and grading rubrics are not copied due to limitations in the Canvas API. We have the code worked out but are waiting on an update from Canvas before we can make it available.Quiz questions/question banks for classic quizzes will not copy due to a lack of API support and probably never will now that Canvas is moving to their New Quizzes tool. - Submission Type - Assignment
- Choose whether the assignment will be Online Submission, No Submission or On Paper Submission. Leave this at the default to pull whatever submission type is set for a template assignment.
- Point Value - Assignment, Discussion
- Specify the number of points the assignment or discussion will be worth.
- Display Grade as - Assignment, Discussion
- If a point value is specified, use this input to select if the grade will be Percentage, Complete/Incomplete, Points, Letter Grade or GPA Scale.
Save Progress
When you are setting up the module structure for a course, the progress will automatically save every few minutes so you do not loose your customizations. This allows you come back and continue building the course at a later period of time.
To make sure progress is saved before leaving the tool click the Save Progress button.
When you come back into the tool, previously saved content will be loaded. Content is not created inside your course until you choose Add Modules to Course.
Tips & Tricks
Tips & Tricks
Below is a carefully crafted library of helpful hints and suggestions that may be useful to you as you begin developing course content inside the DesignPLUS Design Tools Rich Content Editor.
This list has been curated by UF instructional designers so you may benefit from the advice of instructional design colleagues.
Design Inside the Design Tools Wrapper
Design Inside the Design Tools Wrapper
When adding content to the page, discussion, assignment or syllabus be sure you are designing inside the Design Tools wrapper. If you are not inside the wrapper when designing, the responsive and functional features will not work. This is because the code of the wrapper triggers the other specialized code to begin working.
So be sure you see this wrapper AND that your cursor is in place before you begin adding Content Editor elements like content blocks, tabs, or snippets.
How to add a Design Tools Wrapper
To add a wrapper, simply apply any theme to your page. Go to Create/Edit Content > Choose a Theme > Simply select a theme and a wrapper will get added.
Duplicating & Deleting content blocks
Duplicating Content Blocks
The Add/Rearrange Content Blocks tool now has the ability to duplicate an existing block.
Use With Caution: If the content inside requires unique IDs to work (outside of those added by the Design Tools sidebar), you will need to adjust those manually. Examples of items that use ID's are accordions and tabs.
Deleting Content Blocks
Use the DesignPLUS Design Tools rich content editor to delete content blocks. Don't use the Canvas content editor and the cursor to delete content blocks.
Most Useful HTML Snippets
Most Useful HTML Snippets
Here are examples of some of the HTML Institutional Snippets that are used most often to add functionality and quality to your course.
Institutional Snippet > Text | Media
Heading
Replace this text with your text. Sed diam nonummy nibh euismod tincidunt ut laoreet dolore.
- List. Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Suscipit lobortis nisl ut aliquip ex ea commodo consequat duis autem vel.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Suscipit lobortis nisl ut aliquip ex ea commodo consequat duis autem vel.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Heading
[0:00] | Transcript
Place text here.
Image replacement: Ensure “Fill Width” is turned on for “Current Element Style”. Select image > Current Element Style > Image Size/Position/Style. Fill Width Information
Video replacement: Insert videos through the rich content editor’s “Insert/edit media” button.
Institutional Snippet > Text | Text | Text
Heading
Replace this text with your text. Sed diam nonummy nibh euismod tincidunt ut laoreet dolore.
- List. Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Suscipit lobortis nisl ut aliquip ex ea commodo consequat duis autem vel.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Suscipit lobortis nisl ut aliquip ex ea commodo consequat duis autem vel.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Heading
Replace this text with your text. Sed diam nonummy nibh euismod tincidunt ut laoreet dolore.
- List. Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Suscipit lobortis nisl ut aliquip ex ea commodo consequat duis autem vel.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Suscipit lobortis nisl ut aliquip ex ea commodo consequat duis autem vel.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Heading
Replace this text with your text. Sed diam nonummy nibh euismod tincidunt ut laoreet dolore.
- List. Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Suscipit lobortis nisl ut aliquip ex ea commodo consequat duis autem vel.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Suscipit lobortis nisl ut aliquip ex ea commodo consequat duis autem vel.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Design Tools Core Snippet > 2 Columns (Equal)
Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Accordions & Tabs
Accordions & Tabs
Adding and deleting panels in the content editor
Make sure to delete/add panels in the DT RCE and NOT by deleting/copying & pasting with your cursor in the Canvas editor.
ALWAYS use the "Add Panel" to add panels and the delete panel red "X" to delete a panel.
Should I add panels?
Just because you can doesn't mean you should! Be careful and considerate when adding tabs and accordions. Too many or too little can hinder information processing.
Can I nest accordions and tabs?
Do not nest accordions or tabs within each other. If you do, the coding of the Design Tools wrapper can get out of order and the results will not be what you expect.
Full-width vs Max-width
Fill-Width
Fills the entire width of the element with the image. Fills in your page, container, or element 100% and is responsive.
Max Width Fill
Image will display at a set width but never display wider than the element that contains it. This will set your image as a specific pixel width for the maximum size, then when the screen is resized to be smaller (like on a cellular device) the image scales down and does not get cut off.
It's recommended that you at least check Max Width Fill so your images are responsive.
Fill Width
Max Width Fill
Both Used
Course Content Links tool
A pop-up to help you create links to existing course content was introduced to help when you are working with existing links. This release includes a new Course Content Links tool in the Create/Edit Content section to grant access to this functionality for creating new links as well.
The handy thing about this tool is that it is searchable, whereas currently, the Canvas links tool is not. When your course has a lot of pages, you can easily find content quickly. Simply click on the link in the Link to Canvas Content panel and it's automatically added to your course.
Module List Styling
Module List Styling
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.
The module list can be styled with the Design Tools Content Editor to fit your course style guide.
What happens when you update your module list because you reordered modules, changed titles, etc?
Any styling applied to the Module List is stripped when the list is refreshed. This means you'll have to restyle the elements again. So, use caution when you click on the Update Module Names button.
Examples & Inspiration
Here are some images of exemplary courses to get your creative juices flowing!
Course Landing Page Examples
Course Page Examples
Compare Canvas pages before and after DesignPLUS.
Example of a course landing page
Example of a course page
Where to Go for Help
Institutional Block Modifications
For modifications of any institutional snippets or the institutional syllabus blocks, contact coip@mail.ufl.edu
Design Tools help and troubleshooting
Design Tools has a user guide built right in the editor. Launch the Design Tools and expand Get Help > User Guide.
DesignPLUS User Guide
The DeignPLUS User Guide is also very helpful to quickly learn about the Rich Content Editor Tools, the Multi-tool, and the Upload/Embed Image Tool.
Go to the DesignPLUS User Guide
UF Footer