Versions Compared

Old Version 31

changes.mady.by.user Janice Orcutt

Saved on

compared with

New Version Current

changes.mady.by.user 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.png

  2. 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.png

  3. 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.png

  4. 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.png

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

    accordion 5.png

  6. 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.png

  7. 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.png

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

      accordion 7b.png

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

  8. 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.png

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

    accordion 9a.png

    accordion 9.png

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.

Expand
titleStep-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.png


  2. 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.png

  3. 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.png

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

    tabs 4.png

  5. 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.png

  6. 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.png

  7. 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

  8. 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.png

  2. 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.png

  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.

    tooltip4.png


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.

Expand
titleStep-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.png

  2. 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.png

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

    popover3.png

  4. Save your page.

  5. 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.png


 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.png

  2. 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.png

  3. 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.png

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

    dialog4.png

  5. 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.png

  6. Save your page

  7. 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.png

Child pages (Children Display)
depth2
pageDesignPLUS Tools for MyClasses

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.)