Getting Started with: Sidebar Overview

Faculty Resource Sidebar Introduction

The DesignPLUS Sidebar in Canvas empowers you to craft content that is not only organized and accessible but also engaging and visually stunning. This course serves as a guide to navigating the fundamental elements of the DesignPLUS Sidebar interface.

Watch this quick introductory video:

   Add New Elements

When opened, the DesignPLUS Sidebar automatically wraps all content in a Design Tools wrapper, streamlining your workflow. Content blocks are now optional!

  1. Place your cursor in the Canvas Rich Content Editor (RCE) where you want to insert new content.
  2. Select a tool, and it will insert new content (or a placeholder) at the cursor's location in the Canvas RCE.
  3. The new content then becomes the active element, and the "Edit Current Element" tab is automatically enabled for further customization.

   Edit Current Elements

  1. Position your cursor in the Canvas Rich Content Editor (RCE) to select the element you want to work with.
  2. The tool options will automatically update based on the context of the selected element (for example, text within an accordion).
  3. Since multiple tools may be applicable to a single element, choose a tool option from the Edit tab to specify the Active Tool you want to use.

Active tool:

  • This tool focuses on a specific aspect of the current element's content.
  • The Action Toolbar buttons, and editor panels will only affect the Active Tool's content.

Action Toolbar:

  • Use action buttons (e.g. duplicate, delete, move) to edit the Active Tool content cleanly, without leaving any remnants.
  • To apply actions to different content, simply switch to a new current element or Active Tool.

Editor Panels:

  • Editor panels offer options to customize the Active Tool content in three ways:
    • Content: edit the content itself.
    • Style: adjust the visual styling.
    • Advanced: access additional settings.

  • Certain tools with dynamic content, such as accordions, feature a Preview panel in the sidebar for easy viewing.

   Accessibility/Usability

The Accessibility/Usability tab provides notifications when it detects suggestions for improvement or identifies errors on the page.

Utilize these tools to:
  • Detect and correct accessibility issues affecting diverse page elements.
  • Assess and address usability concerns related to design, file accessibility, and responsive design for various screen sizes.

When problems are detected, a red alert icon will appear on the Accessibility and Usability button, as well as on any tools where issues have been identified.

   User Settings

Utilize this tool to customize your personal preferences and settings within DesignPLUS.
  1. Access User Settings by clicking the More Options menu in the upper right corner of the Sidebar.
  2. Within User Settings, you have the option to enable Advanced Tools, allowing you to edit HTML and CSS for enhanced customization.

   Help/Tutorials

Use these tools to:
  • Access Cidi Labs support.
  • Find support and resources specific to Taft College.

Resources include:

  • Guides
  • Tutorials
  • Additional information to assist you in navigating and utilizing the new Sidebar effectively.