Use the Sidebar
Getting Started Use the Sidebar
Fullscreen, Undo, Redo, Close
At the very top of the sidebar to the right of the DesignPLUS logo is a header toolbar with four icons. These tools are available whenever the sidebar is open.
The purpose of each of the four tools is given below:
| Icon | Name and Purpose |
|---|---|
| Toggle Fullscreen Hides the course navigation menu, allowing the rich content editor and sidebar to expand to the full width of the browser window. |
|
| Undo Undoes the previous action(s). The number next to the icon indicates how many actions can be undone. |
|
| Redo Redoes the previous undo action. The number next to the icon indicates how many actions can be redone. |
|
| Close Sidebar Minimizes the sidebar so that only the launch button is visible. |
Main Menu
The main navigation menu for the sidebar consists of five tabs, each with a distinctive white icon on a blue background.
The name and purpose of each tab are provided in the table below. Instructions on how to use each tab are below the table.
| Icon | Name and Purpose |
|---|---|
| Edit Current Element Allows editing of the style and/or content of the currently selected element (i.e., the active tool) |
|
| Add New Elements Adds a new DesignPLUS element to the page. |
|
| Accessibility / Usability Performs a variety of accessibility and usability checks. |
|
| Help / Tutorials Provides access to help and support information. |
|
| More Options Provides access to User Settings and a few special features. |
|
| Advanced Tools This tab is hidden by default, and the features available on the tab are not covered in this guide. For documentation, see the Advanced Tools module in the Cidi Labs DesignPLUS User Guide. |
Instructions
Click a tab below to learn about the corresponding tab in the sidebar.
Understanding the interface
Use this tab after you have added or selected an element in the editor that you wish to edit. There are five parts or regions in the Edit Current Element ( ) tab.
- Relevant tools: contains the list of tools available for editing based on your current cursor location. The highlighted tool is called the active tool.
- Active tool heading: gives the name of the active tool and options for launching a walkthrough ( ), adding the tool to your favorites list ( ), and accessing information and help for the tool ( ).
- Action toolbar: contains buttons for common actions (e.g. duplicate, delete, move), for the active tool, allowing you to cleanly edit the content without remnants. Hover over each icon in the toolbar to see its description.
- Editor panels: expandable panels for editing the Content, Style, and Advanced features (if enabled) for the active tool.
- Notifications panel: Displays timely notifications about the current page or content item in a collapsible panel at the bottom of the sidebar.
Edit existing content on the page
To edit a page element, select the Edit Current Element ( ) tab. Then:
- Place your cursor in the Canvas editor where you want to make the change. The list of relevant tools at the top of the sidebar will update based on your cursor location.
- If your cursor is located within a group of nested elements, multiple tools will appear in the list of relevant tools. Select the tool you want to work with as the active tool.
- Make the desired changes using the Action Toolbar and the options available in the Content and Style editor panels.
Add new content to the page
Select the Add New Elements ( ) tab when you want to add something new to the page. Then:
- Place your cursor in the Canvas Rich Content Editor (RCE) where you want to insert new content.
- Select the desired tool from the list, and the selected element (or a placeholder) will be inserted at the current cursor location.
- After the element is inserted, the inserted item is set as the current element, and the Edit Current Element ( ) tab is activated. Use the options in this tab to customize the element.
Change the default view
By default, the list of tools in the Add New Elements ( ) tab is organized into categories like Getting Started, Basic Content, Navigation, etc.
To customize how the tools are displayed, use the menu at the top of the page.
-
- To search for a specific tool, start typing its name in the search box. The list of available tools will narrow as you type.
- To sort the element list alphabetically, click or .
- To change the size of the icon, use the grid and list options in the menu:
The Accessibility / Usability ( ) tab performs a variety of checks on your content to ensure it meets current standards.
When accessibility or usability issues are detected in your content, you'll see a red indicator in the Accessibility / Usability button as well as any tools with identified issues:
For information about the individual tools on this tab, see the Cidi Labs User Guide Accessibility and Usability module.
The Help ( ) tab has guides, tutorials, and other information to help you use the DesignPLUS sidebar.
The More Options ( ) tab provides access to the User Settings screen for personalizing your sidebar experience, as well as several tools that do not fit under the descriptions for the other tabs.
Learn More
- Cidi Labs User Guide: Sidebar Introduction
- Transition Aide: Before You Begin Links to an external site.