Alamo Colleges District

DesignPLUS Tools Menu Overview

Updated on

DesignPLUS content editing tools augment the native Canvas Rich Content Editor (RCE), enabling you to easily create, customize, and style content in Canvas. View How to Launch the DesignPLUS Content Editor for instructions on how to access this tool prior to use.

When creating course content with DesignPLUS, it is highly recommended that you use the tool in a Canvas staging shell (or "sandbox"). This will prevent students from receiving notifications for any updates to course content as well as accidental loss/deletion of course content or feedback/grades from a production (or "live") course shell.

Contact your Alamo Colleges Online Instructional Designer or College Instructional Innovation/Distance Learning Center to request a Canvas staging shell for use with DesignPLUS.

Design Tools Menu

When first launched, the Design Tools menu will display the tools in an accordion view on the right side of the Canvas Rich Content Editor window:

Select the header link below for more information on each menu section. Links to the Cidi Labs DesignPLUS User Guide have been provided for more information about the various content editor tools.

Jump Menu

As you select different design elements in the content editor, the Jump Menu buttons will provide you shortcuts to "jump" to a specific section in the design tools menu. From left to right, the buttons are:

  • Jump to Add/Rearrange Content Blocks panel [server icon]
  • Jump to Current Element Style panel [bullseye icon]
  • Jump to HTML Snippets panel [cubes icon]
  • Jump to Icons panel [tags icon]
  • Design Tools Settings [cogs icon]
Editor View

The Editor View buttons control the way content appears in the editor. From left to right, the buttons are:

  • Blocks (default) - Provides outlines for most element types to visually help with cursor placement.
  • Browser - Removes outlines to approximate what content will look like in a web browser.
  • App - Removes outlines and labels and adjusts some advanced elements to approximate what content will look like in the mobile app.
  • No Style - Removes all CSS stylesheets to approximate what content will look like without use of external CSS design tools (i.e., basic Canvas RCE design).

Select the "?" icon or the "Help" link to view keyboard shortcuts and descriptions for each of these editor view options within the Design Tools menu.

Create/Edit Content

The Create/Edit Content menu contains the basic tools for building out your content. A brief summary of each tool is described below. To learn more, open the tool and view its help section.

  • Copy Existing Content - Copy content from an existing course or template page.
  • Add/Rearrange Content Blocks - Select from boilerplate content blocks or create your own. Rearrange block order, add/change icons or delete existing blocks.
  • Choose a Theme - Preview and apply a theme to your content.
  • Customize Banner Text - Adjust the content of the themed banner including adding a subtitle or description.
  • Choose a Banner Image - Select an image from your course or institution to use as a banner image.
  • Add/Edit Navigation Block - Insert boilerplate navigation links or create your own. Rename links, add/change icons, reorder, or delete existing links.

Select the "?" icon or the Help link to view the descriptions for each of these panels within the Design Tools menu.

Customize the Style

The Customize the Style menu contains tools that you can use to customize the style attributes of your content. A brief summary of each panel in this section is described below. To learn more, open the tool panel and view its help section.

  • Colors for Banner Theme - Use this tool to target the different parts (elements) of the themed banner and adjust the element's background and text colors.
  • Current Element Style - The tools in this section apply to the current element selected in the rich content editor. Visit the Cidi Labs Current Element User Guide for additional details.
Add Advanced Elements

The optional Add Advanced Elements section contains a variety of tools that can extend content in Canvas. To learn more about a tool, open the tool panel and view its help section.

  • Accordions | Tabs - Add, rename, reorder, or delete accordion panels and tabs.
  • Custom CSS - Tells the page to look for a custom CSS file in the course files. Use this if you have created a custom stylesheet to override the default style.
  • Description List - Add a description list to the content.
  • HTML Snippets - Preview and add custom HTML content such as smaller headers, code blocks, preformatted text, tables, columns, alerts and bootstrap callouts, images with captions, and decorative dividers.
  • Icons - Identify and insert decorative icons into the content.
  • Module List - Adjust the size, position, and style of an image.
  • Module Progress/Navigation - Dynamically built progress bars and navigation for current module.
  • Objectives/Outcomes - Inserts terms from Bloom’s Revised Taxonomy or institutionally-specified outcomes into the content.
  • Popup Content - Add modal dialog to the content through tooltips, popovers, and modal dialog boxes.
  • Quick Check - Add an ungraded question (or Quick Check) to the page to test learner comprehension.
  • Teacher & TA Details - Add teacher and TA details to the content.
Check Accessibility

Check Accessibility info goes here. To learn more about a tool, open the tool panel and view its help section.

  • Heading Outline - View and adjust the heading structure of your content.
  • Image Check - View all of the images on this page and adjust their alt text.
  • Link Check - View all links in the content area out of context to get a feel for what it would be like navigating the page with a screen reader.
Get Help

Get Help info goes here. To learn more about a tool, open the tool panel and view its help section.

Advanced HTML Editor

Advanced HTML Editor info goes here. To learn more about a tool, open the tool panel and view its help section.

Select each design element below for a description and list of items found within each of the menu's tabs.

  1. Create/Edit Content - Create and theme basic content.
  2. Customize the Style - Adjust Colors, borders, spacing, and a variety of other visual aspects of your content.
  3. Add Advanced Elements - Includes a variety of elements like Accordions, Modal Dialogs, Objectives/Outcomes help, etc.
  4. Check Accessibility - Review and address heading structure, image alt text, and links for accessibility.
  5. Get Help - Find training and feedback resources.
  6. Advanced HTML Editor - Dig into the HTML for your content. [Recommended for advanced users only.]

View the Cidi Labs DesignPLUS User Guide for more information about the content editor tools.

0 Comments

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Previous Article Basic Tools in DesignPLUS
Next Article Accessing the New DesignPLUS Sidebar
Still Need Help? Contact Us