Versions Compared

Version Old Version 31 New Version Current
Changes made by

Janice Orcutt

Janice Orcutt

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Panel
bgColor#FFF0B3

ID&D KB How-to Guide

Working together to enhance teaching & learning. If you need additional assistance, please reach out to the ID&D team.

newpage.png

Sometimes we have a lot of content to share with our students, but we don’t want them to be overwhelmed! Consider a typical course page that has several sections of content such as the one pictured here. DesignPLUS offers us a variety of ways to physically engage our students with the content we want them to consume.

DesignPLUS offers three specific tools you can use to organize content for pages like this: Accordion, Expander and Tabs. These elements allow us to provide a lot of content without taking up a lot of space. They allow us to split the content up into smaller pieces and place them in panels, where students can open up a panel and read the smaller pieces.  In the Accordion, students can only view one panel at a time, while in the Expander students can keep as many panels open as they want. The Tabs allows a student to swap the content displayed on a page, using either tabs across the top (horizontal) or tabs along the side (vertical).

Sometimes students need clarification for words or concepts they might not be familiar with. In these cases, design PLUS offers three quick interactive features:  Tool Tip, Popover, or Dialog Box. These features allow you to provide some additional information for those students who need it, without diverting their attention from the main content.

This article provides step by step guides on how to reimagine this page using the interactive components below.

Tip

Tip!

You can click on the images in this article to see them larger and with more detail.

Using an Accordion or Expander for Content Display

An Accordion or Expander display allows you to save space on the page. An Accordion only allows the student to view one "chunk" of content at a time and an Expander allows the student to have more than one open.

Expand
titleStep-by-Step...

  1. Create or open a page that has a page banner and introductory content. Open the DesignPLUS Sidebar.

    accordion 1.pngImage Modified

Expand
titleClick to continue the Step-by-Step instructions...

  1. To add an Accordion or Expander element to the page under the introductory content:

    1. Place your cursor at the end of the content block which holds the introductory content (where the interactive component will be added)

    2. Scroll down the Sidebar and locate Interactive category (or search for it)

    3. Click the Accordion tool or the Expander tool based on what type of interactivity you want.

      accordion 2.pngImage Modified

  2. The Sidebar will display the Accordion Tool (or Expander) in the Edit (target) tab. The Accordion/Expander content area will appear on your page. It will have two panels as a default.

    accordion 3.pngImage Modified

  3. To change the number of panels you will use:

    1. Click on the + sign next to the number displayed for Panels under the Content panel, or

    2. Click on the +Panel button next to it.

      accordion 4.pngImage Modified

  4. The additional panels will be added at the bottom of the page and indicated in the Content panel in the Sidebar.

    accordion 5.pngImage Modified

  5. The next step is to create the headings for each of the panels. It is important to create the headers of the panels within the Content Panel, rather than entering them into the page. Enter the title for each panel. They will be displayed on your page.

    accordion 6.pngImage Modified

  6. Open the Style Panel and select the style you want for the panel when it opens:

    1. Accordion or Expander - this displays an up arrow to open the panel next to the panel heading and a down arrow to close it

      accordion 7a.pngImage Modified

    2. Accordion Plus/Minus or Expander Plus/Minus - this displays a + (plus) to open the panel and a- (minus) to close it.


accordion 7b.pngImage Removed

    2. You can demonstrate how the style will look and act in the Preview panel

      accordion 7b.pngImage Added


  2. To draw attention to the panels you can select colors for the status of the headings. The color selected will apply to all panels in a given accordion or expander.

    1. Select the Default Color button to choose a color to display on the page before it is activated

    2. Click on the color you want from the pop-up window

    3. Repeat this for Active status (when the heading is clicked or opened and for Hover status (when heading is moused over)

    4. You can demonstrate how the colors change in the Preview panel

      accordion 8b.pngImage Modified

  3. When the page is saved, the display will change based on the actions taken by the viewer.

    accordion 9a.pngImage Modified

    accordion 9.pngImage Modified

Using Tabs for Content Display

DesignPLUS also has a feature that allows you to use horizontal or vertical tabs to switch between panels of content.

ExpandtitleStep-by-Step

.

..

  1. Create or open a page that has a page banner and introductory content. Open the DesignPLUS Sidebar. Place your cursor at the end of the content block which holds the introductory content.

    1. Scroll down in the Sidebar and locate the Interactive category (ore search for it)

    2. Click on the Tabs tool

      tabs 1.pngImage Modified

Expand
titleClick to continue Step-by-Step instrucitons...

  1. The Sidebar will display the Tabs Tool in the Edit (target) tab. The Tabs content area will appear on your page. It will have two panels as a default.

tabs 2.pngImage Modified

  1. To add additional tabs, either:

    1. Click on the + next to the number displayed for Panels under the Content panel in the Sidebar, or

    2. Click on the +Panel button next to it

      tabs 3.pngImage Modified

  2. The additional panels will be added at the bottom of the page and indicated in the Content panel in the Sidebar.

    tabs 4.pngImage Modified

  3. The next step is to create the headings for each of the panels. It is important to create the headers of the accordion within the Content Panel, rather than entering it into the page. Enter the titles of the sections for each panel. They will be displayed on your page.

    tabs 5.pngImage Modified

  4. Open the Style Panel to select the style and direction you want to have the Tabs displayed. You have several options:

    1. Basic tabs - these tabs appear horizontally across the page and are outlined when selected

    2. Underlined Tabs - these tabs are displayed horizontally, and the headings are underlined when selected

    3. Pill Tabs – these tabs are displayed horizontally and appear as solid-colored blocks when selected

    4. Pill Tabs Vertical - the tabs are displayed horizontally and appear as colored blocks when selected

    5. Pill Tabs Vertical Outlined - the tabs are displayed horizontally and appear as outlined colored blocks when selected

    6. The displays can be viewed int he Preview panel in the Sidebar

      tabs 6.pngImage Modified

  5. To draw attention to the panels you can select colors for the status of the headings. Click on button in the Style panel to select your display color from the options provided. The combinations vary based on the Tab type you have selected.

    1. Select the Default Color button to choose a color to display on the page before it is activated

    2. Select the Active status color (when the heading is clicked or opened)

    3. Select the Hover status color (when heading is moused over)

    4. You can demonstrate how the colors change in the Preview panel

      Image Modified

  6. Cut and paste or enter the content for each panel. Save your page.

Using Tool Tips for Content Clarification

Sometimes students need a quick hint or definition to understand terminology or concepts the content presents. A Tool Tip allows you to provide simple text content when a student hovers over a specific word or set of words in the content.

Expand
titleStep-by-Step...

  1. To add a Tool Tip:

    1. Open the DesignPLUS Sidebar to the Add New element tab

    2. Highlight the word or phrase in the content (Trigger text) where you want to add the tip

    3. Search for tooltip in the Sidebar search field

    4. Click on the ToolTip Icon

      tooltip1.pngImage Modified

Expand
titleClick to continue Step-by-Step instructions...

  1. The Edit (target) tab in the Sidebar will open.

    1. The highlighted text will appear in the Trigger Text field

    2. Enter the tip text you want to appear in the Content Text field

    3. The information will appear in the Editing window on your page (RCE window)

      tooltip2.pngImage Modified

  2. Save your page.

  3. The Trigger Text is outlined with a broken line. When the student hovers over or clicks on the Trigger Text a popup will appear with the Content Text. If the student clicks on the Trigger Text the content will stay until it is clicked again.

    tooltip4.pngImage Modified


Using Popovers for Content Clarification

Similar to the Tool Tip, a Popover can give students a quick hint or definition to help them clarify terminology or concepts presented in the content. A Popover allows you to provide simple text content or links to help students when they hover over a specific word or set of words in the content.

ExpandtitleStep-by-Step

.

..

  1. To add a Popover:

    1. Open the DesignPLUS Sidebar to the Add New element tab

    2. Highlight the word or phrase in the content (Trigger text) where you want to add the clarification

    3. Search for popover in the Sidebar search field

    4. Click on the Popover Icon

      popover1.pngImage Modified

Expand
titleClick to continue Step-by-Step instructions...

  1. The Edit (target) tab in the Sidebar will open.

    1. The highlighted text will appear in the Trigger Text field

    2. Enter the information you want to appear in the Content Text field

    3. An information box will appear in the Editing window on your page (RCE window)

      popover2.pngImage Modified

  2. Enter your content into the Content Text field. This can contain links and text.

    popover3.pngImage Modified

  3. Save your page.

  4. The Trigger Text is outlined with a broken line. When the student hovers over or clicks on the Trigger Text a popup will appear with the Content Text. If the student clicks on the Trigger Text the content will stay until it is clicked again. If a link is included in the Popover, the linked content will open in a new tab.

    popover4.pngImage Modified


 Using A Dialog Box for Content Clarification

Similar to the Tool Tip and Popover, the Dialog Box also helps provide additional information to the student to clarify content concepts. However, this type of element requires the student to interact with the dialog box in order to move on.

expand

titleStep-by-Step

  1. To add a Dialog Box:

    1. Open the DesignPLUS Sidebar to the Add New element tab

    2. Highlight the word or phrase in the content (Trigger text) where you want to add the clarification

    3. Search for dialog in the Sidebar search field

    4. Click on the Dialog Box Icon

      dialog1.pngImage Modified

Expand
titleClick to continue Step-by-Step instructions...

  1. The Edit (target) tab in the Sidebar will open for the Dialog Box tool.

    1. The highlighted text will appear in the Trigger Text field

    2. The Dialog Box will appear in the Editing window on your page (RCE window)

      dialog2.pngImage Modified

  2. Change the Title of the Dialog Box. You can enter this either in the Content panel in the Sidebar, or in the Dialog Box in the RCE on your page.

    dialog3.pngImage Modified

  3. Enter your content into the Content Text field. This can contain images, links and text.

    dialog4.pngImage Modified

  4. Set the size of your Dialog Box in the Content panel in the Sidebar. You can use pixel or %, however, using pixels is recommended. 

    dialog5.pngImage Modified

  5. Save your page

  6. The Trigger Text is presented as a link (underlined). When the student clicks on the Trigger Text, the Dialog Box appears as a pop-up. The student must either visit the link or close the Dialog Box to return to the page. If the student visits the link, it will open a new browser window.

    dialog6.pngImage Modified

Child pages (Children Display)depth2page

Page Tree
rootDesignPLUS Tools for MyClasses
startDepth1

Visit the DesignPLUS Training Series Tutorials for more videos. For more step-by-step guides, visit the DesignPLUS User Guide. (These links will overwrite this page.)