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]

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.

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.

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.

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 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 info goes here. To learn more about a tool, open the tool panel and view its help section.

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.