Design Tools Resources for Faculty and Staff

DESIGN TOOLS INTERFACE

QUICKSTART

INSTITUTIONAL CONTENT

ADDING CONTENT

STYLING CONTENT

ADDITIONAL TOOLS

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

Open the popover dialog

Open the modal dialog

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

Lori Gibbons

Teacher

me@ufl.edu

Center for Online Innovation & Production

M-F 8-5

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

Info: Sample flash notice style.

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

Check Accessibility 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.

Web Accessibility Tutorials (Links to an external site.)

To check page headings, complete the following steps:

Update Heading Interface

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 adjust heading controls 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.

Image check interface

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

New Module Pattern

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.

adjust module items interface

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.

Uploaded Image

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.

Uploaded Image

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.

Uploaded Image

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

The University of Florida

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

Uploaded Image

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.

Uploaded Image

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

Uploaded Image

Max Width Fill

Uploaded Image

Both Used

Uploaded Image

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.

Uploaded Image

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.

Uploaded Image

Examples & Inspiration

Here are some images of exemplary courses to get your creative juices flowing!

Course Landing Page Examples

Uploaded Image

Uploaded Image

Uploaded Image

Course Page Examples

Uploaded Image

Compare Canvas pages before and after DesignPLUS.

Example of a course landing page

Uploaded Image

Example of a course page

Uploaded Image

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.

Uploaded Image

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

Home

UF Footer