A Brief Sidebar Primer

Let's look at a few key elements in the DesignPLUS Sidebar user interface that you'll be using throughout this course.

First things first, hit the Edit button on this page to see the Sidebar and the Canvas editor.  If it's not visible, use your preferred hotkey combination to add it.

Notice anything different with the Canvas editor? Whenever a page has been edited with the sidebar, pink dashed borders outline specific DesignPLUS elements on the page, marking the start and end of each element.

Now, turn your attention to the Sidebar itself.

Fullscreen, Undo, Redo, Close

At the top right, just beside the DesignPLUS logo, you’ll find a handy toolbar with four icons: These tools are always at your disposal when the Sidebar is open, though you might need to scroll up to access them.

Tools at a glance

Exercise: Explore Toggle Fullscreen, Undo, and Redo

1. Click the Toggle Fullscreen (  ) icon to enter fullscreen mode. Note that the Canvas wrapper disappears and the editor expands to use the full width of your browser window.
   
   Scroll down to the bottom of this page. Note that the Cancel and Save buttons are nowhere to be found. You'll need to exit fullscreen mode whenever you want to exit or save the page.
2. The Undo and Redo buttons will become your best friends in the Sidebar. If ever you make a mistake with the Sidebar, click the Undo icon (  ) to reverse it. To Illustrate, select the text for instruction 1 above and delete it. Then click Redo (  ) to restore it.
   
   Undo keeps track of all of changes, so you can undo multiple times to return to a previous state on the page. However, you'll also lose any text that you might have added or edited, so you might want to copy it to safe place if you want to reuse it.
3. Try making a few more additions and deletions to this page. Then use Undo (   ) to return to the current state of the page.

Navigating the main menu

The Sidebar main menu features five tabs, each with a crisp white icon against a blue backdrop.

The tabs explained

Exercise: Add New Elements

Whenever you want to add a DesignPLUS element to the page, select the Add New Element (  ) tab from the main menu. Then look for the tool you want to add. Let's look at your options for viewing and finding tools.

1. If you are not already in edit mode, click Edit to modify this page, then return here.
2. If the Sidebar isn't already visible, turn it on.
3. In the blue main menu, select the Add New Elements (  ) tab. By default, the list of DesignPLUS tools are grouped together by function (Getting Started, Basic, Content, Navigation, etc.). Featured Tools, Recently Used Tools, and Favorited Tools always appear at the top of the list.
   
   
   
   Options a, b, and c in the screenshot above determine how tool list is organized (grouped by function, or sorted A-Z or Z-A). The remaining options control the visual appearance of the tool list (large icons (d), small icons (e), and list (f). Try these options out and observe the changes.
4. If you know exactly what you are looking for, you can type the name of the element in the search box. Start typing the word "icon". With each letter, choices are eliminated until only the "icon" tool remains. 
5. Click the to clear the search box.
6. Finally, let's try adding an element to this page. Place your cursor at the end of these instructions and press enter twice to create a new unnumbered line.
7. Then, in the Add New Elements (   ) tab, search and select the tool named Divider. A horizontal rule will be added to the page and the main menu automatically switched to the Edit Current Element (  ) tab. This is normal. As soon as you add a new element, you are placed on the Edit Current Element (   ) tab so you can customize the element.

Exercise: Edit Current Element

You'll use the Edit Current Element (   ) tab to customize DesignPLUS elements that you just added to the page as well as to make changes to existing elements. In this exercise, we'll modify an existing element -- the numbered list of instructions below.

• If you are not already in edit mode, click Edit to modify this page, then return here.
• If the Sidebar isn't already visible, turn it on.
• So now, let's suppose you want to modify the text in the colorful banner title at the top of this page. Begin by placing your cursor anywhere within banner title element at the top of this page.
• In the Sidebar main menu, select the Edit Current Element (   ) tab.
• This step is critically important. Just beneath the main menu, you will see one or more tool icons. These are the tools available to be customized based on your current cursor location. The selected or highlighted tool, also known as "active tool" must match the element you want modify
  
  In this case, three tools are listed because your cursor is insider a Text heading, which is part of the Banner Title element, which is a part of Theme. Whether you've just added a new element or are editing something already on the page, always remember to confirm that the element you want to modify is selected as the active tool. If it's not already selected, select Banner Title as the active tool.
  
• The Edit Current Element (   ) page always has two expandable panels, Content and Style, and the options in each panel vary depending on the active tool.
  
  Open the Content panel if it's not already open. Note there are separate fields for modifying the text in the banner title as well as other options, Feel free to add or change text in any of the fields. Then scroll up to see the impact your changes have had on the banner title.
• Close the Content panel and open the Style panel. Open the Indiana University  menu to view the list of Heading Styles that can be applied to the banner title. Move your cursor over the style options to see a preview of each banner title design. Select a different style and observe the impact on the banner title at the top of this page.
• When you are finished working with this page, scroll to the bottom and click Cancel. This will return the page and instructions to their original state.

Great work! Now you're ready to explore several DesignPLUS features that you can easily apply to existing course content. Click Next to continue.