Citilabs page header

Design Tools Resources for Faculty and Staff

Landing Image, a computer

DESIGN TOOLS INTERFACE

QUICKSTART

INSTITUTIONAL CONTENT

ADDING CONTENT

STYLING CONTENT

ADDITIONAL TOOLS

Design Tools Tour

Welcome to Design Tools

Using Design PLUS will improve the quality, consistency and accessibility of your course content while enabling you to do more in less time. You will encounter tools such as the rich content editor tools, the Multi-tool, and the Upload/Embed Image Tool that will help you add functionality to your course quickly and with ease.

Watch the Introducing the Design Tools video to get to know the interface and learn about the additional functionality Design Tools allows in any Front, Content, Discussion, Assignment, and Syllabus page in Canvas

Launching Design Tools

Launching Design Tools

You can launch the Design Tools from content pages, assignments, discussions, announcements, or the course syllabus.

To launch the Design Tools, follow these steps:

Open the Canvas course.
Navigate to the content you wish to edit.
Click Edit.
On the Edit page, in the top right corner, click the Launch Design Tools button or use the keyboard shortcut Alt+Shift+D.

What Design Tools Can Do

What design Tools can do

Using Design Tools, you can easily customize the content of Front, Content, Discussion, and Assignment pages. The following list describes some of the things you can do to customize your content:

Style content with predefined themes.
Insert boilerplate sections and content.
Duplicate existing content pages.
Apply styles from the Canvas Style Guide including:

Accordions and Tabbed content.
Buttons.
Modal windows.

Adjust element colors, borders, margins and padding.
Add icons.
Customize links, headings and lists.
Write objectives and other content supported by Bloom's Revised Taxonomy.
Run an accessibility check on a course page.

The Design Tools Menu

The Design Tools menu displays the available tools in an accordion view.

Element	Description
Jump Menu	Shortcuts to jump to a specific section based on the currently selected element in the editor.
Editor View	Selects the Labels, Blocks, Browser, Mobile App or No Style view.
Create/Edit Content	Create and theme basic content.
Customize the Style	Adjust colors, borders, spacing and a variety of other visual aspects of your content.
Add Advanced Elements	Includes a variety of elements like Accordions, Modal Dialogs, Objectives/Outcomes help, etc.
Check Accessibility	Review heading structure, image alt text and links for accessibility concerns.
Get Help	Find training and feedback resources.
Advanced HTML Editor	Dig into the HTML for your content.

UF Footer