DesignPlus
Formatting Text & Media

After you set the style and structure of your pages, you can start adding content. The DesignPlus Sidebar provides many more options for formatting content than Canvas's rich content editor. Familiarizing yourself with the formatting tools will help you create attractive and accessible pages.

Accordions & Tabs

What

Accordions, Expanders, and Tabs are three separate tools that function similarly in the Sidebar but look different on the page.

When

Use these three tools to:

Create expanding panel groups in which one or more panels can open at a time
Organize lengthy content
Chunking information
Displaying step-by-step directions or information
Comparing options or features
Create quick references like FAQs or resources
Build interactive content

Tips

Use Expanders when you want to guide learners through a step-by-step process, such as instructions for a complex task or a tutorial. Each expander can reveal the details of a specific step, allowing learners to follow the sequence quickly.

Use Tabs to compare different options, features, or case studies; tabs can present each option side by side. Learners can switch between tabs to compare the details, aiding their decision-making process.
Focusing on Progressive Disclosure:

Use Accordions if you want to provide learners with a high-level overview first and allow them to delve deeper into specific topics if they're interested. Users can expand sections based on their interests and curiosity.

Example

This information is presented in an accordion, and the tabs on this page are an example of tabs.

How

Learn how to add these elements in the Cidi Labs DesignPlus User Guide: Accordions, Expanders, & Tabs.

Callouts

What: A callout is a short passage of text placed in a colored box to give it emphasis or importance. Example; The content of this tab is in a callout!
When: Callouts often present cautions or warnings, key points, tips, or other important information.
Tips: Use clear and concise language that emphasizes the notice or instructions contained within the Callout to reduce the height of the element on the page. Choose colors that accent your page's theme while drawing moderate attention to your message.
How: Cidi Labs DesignPlus User Guide: Callouts

Cards

What

Cards are like blocks of text that usually live in columns.

When

Use cards to set apart information on the page.

Tips

Cards can be tricky for beginners because it's easy to misalign them. Use "fill available height" to make all the cards be the same height.

How

Cidi Labs DesignPlus User Guide: Cards

Columns

What: Normally, content added to a Canvas page or content item expands to use the full width of the content region of the page.
When: Adding flexible columns to the page allows you to lay out similar or different types of content side by side.
Tip: You can also convert tables into columns with the click of a button.
How: Cidi Labs DesignPlus User Guide: Snippets

Example

In this tab, for example, the left column is used for the main text, and the one on the right is used for the example.

Description Lists

What: A description list, also called a definition list, is a list of terms, with each term followed by its description or definition.
When: This format is well suited to glossaries, but it can also be used to display lists of items followed by one or more pieces of metadata about each item; for example, a list of events with the date, time, and venue as the metadata.
Tip: Avoid overwhelming students with very long lists of terms.
Example: The content in this tab is organized using a description list.
How: Cidi Labs DesignPlus User Guide: Description List

Flip Cards

What

Flipcards promote engagement by acting like flashcards!

When

Good for when you have a few keywords you want students to review.

Tips

Only use when you have a few of these--too many on one page will easily become overwhelming.

How

Cidi Labs DesignPlus User Guide: Flip Cards

Icons

What: The Icons tool in the Sidebar allows you to insert an icon anywhere on the page as well as to style the inserted icon with borders and colors.
When: Several Sidebar tools (Text > Headings, Link Grids, Links, etc.) include an option to add an appropriate icon to accompany the text.
Tips: When re-using icons, consistency is important as they help establish the predictability of content for the user. Easily find commonly used icons under the icon category titled "CDE Favorites".
Accessibility: Do not use icons as a replacement for meaningful text. Icons are purely decorative and are not read by screen readers. If you would like an icon to be viewable by a screen reader, you will need to take additional steps. To learn more about icon accessibility visit: Font Awesome: Accessibility.
Example: This list uses icons as well as tab headers!
How: Cidi Labs DesignPlus User Guide: Icons

What: The Sidebar Images tool helps you embed and format images already uploaded to Canvas or an institutional file store.; Unlike the Canvas editor, the image alignment and text wrap options in the Sidebar add whitespace between the image and surrounding text, which looks much more professional. Other features include a variety of image border styles, a caption editor, and the ability to pull external images into the current site.
Tip: Select images that amplify the meaning of the content. Avoid using images for decorative purposes only.
Accessibility: Make sure all images in your course have appropriate alt text (i.e., a brief description of the image for students who may be using a screen reader).; You are responsible for ensuring that the image is in the public domain, or that your use of the image is in compliance with the terms of use for any license or copyright attached to the image.

Example

How

Cidi Labs DesignPlus User Guide: Images

Cidi Labs DesignPlus User Guide: Alt Text

Upload/Embed Images

Links and Buttons

What: In Design Plus, you can choose styling hyperlinks as underlined text or as buttons. You can also add icons to links and buttons.
When: You can turn any link into a button!
Tip: Links should make sense out of context. Avoid using text like "click here," "more," "click for details," "this link" or any other text that does not make sense when read without the text before or after the link.
Accessibility: Remember to keep color contrast in mind when choosing button and text colors.
Example: Links and Buttons
How: Cidi Labs DesignPlus User Guide: Links and Buttons

Link Grids

What: The link grid tool creates a group of links with a variety of horizontal and vertical formatting options.
When: It can be used to present a list of resources or to provide navigation within the page or course. Link lists are similar to link grids, but they are not part of the Sidebar theme or subject to theme formatting.
Tips: Be selective. Try not to overwhelm students with giant lists of links.
Examples:

How: Cidi Labs DesignPlus User Guide: Link Grids

Module Progress

What: Module progress indicators allow students to easily and quickly navigate to different pages in the module, including assignments and discussions.
When: You might use module progress bars to let students more easily navigate from page to page, which would be especially useful if you have multiple content pages in a module or if you expect students to have to refer back to other pages in the module.
Tips: There are several styles to choose from based on the amount of information about the page you want shown. If you add a new page to the module, the progress indicator will automatically update.
Examples:

Basic Progress Bar

Partial Progress - Tabs

Partial Progress - Circles

Cidi Labs DesignPlus User Guide: Module Progress Indicator

Lists

What: The DesignPlus Sidebar affords much greater control and flexibility than the Canvas editor when it comes to working with lists. With ordered lists, you can choose the number or letter format (1, I, i, A, a) for enumeration as well as the starting number or letter. For bulleted lists, you can select the style of the bullet. Rearranging list items is as easy as dragging and dropping items to their new location.
When: Use ordered lists for sequential information and are automatically enumerated by the browser. Use unordered lists when the order of the items is not relevant.
Tips: Do not change list types using the Canvas editor, as this can break the formatting of parent elements. Use the Sidebar instead.
Example: This is an unordered list with icons at the beginning of the list, which can be done by choosing "no style" under the style tab!
How: Cidi Labs DesignPlus User Guide: Ordered and Unordered Lists

Popovers

What: Popup Content allows you to enrich your Canvas content by revealing longer message when you hover over text. These can include HTML-formatted content and images.
When: Popup content can enrich your Canvas content by making it more dynamic and allowing students to engage with the content in deeper ways. For example, you can use these to highlight and define key terms.
Tips: Popovers work great for image descriptions!
Example: Popovers are great for when you want to offer more information about something.

such as directions for how to do things, a more detailed explanation, or even just more examples!
How: Cidi Labs DesignPlus User Guide: Popovers

Read Time

What

Including the read time for a page might benefit students by helping them manage their time.

When

It may be helpful to include this information if you have a page you expect will take students longer to go through.

Tips

Note that the calculated read time only counts the text on the page itself; it does not account for the time it takes to watch videos or read resources linked on the page.

Example

12 min read

How

Cidi Labs DesignPlus User Guide: Read Time

Table

Tables	About the Tool
What	The Tables tool in the Sidebar is much better at formatting tables than creating them. Use the Canvas rich content editor to create new tables and modify their structure (add/remove rows and columns, merge cells, etc.). Then, fine-tune your tables with the DesignPlus Sidebar.
When	The DesignPlus Table tool includes options to adjust table, row, and column size and add column headers and footers, row headers, row hover effects, column sorting, and other features that will make your tables attractive and accessible. There's also a utility to convert tables to columns in cases where tables were used to format non-tabular data.
Tips	Tables should only be used to present data organized into rows and columns. Do not use tables to lay out text and images on a page. Instead, use the Column Layouts options currently available in the Snippets tool.
Accessibility	To ensure accessibility, all tables should have a head row, a head column, or both.
Example	The content of this tab is displayed in a table!
How	Cidi Labs DesignPlus User Guide: Tables

Text Highlights

What: Text highlights let you easily change the background color of the text to emphasize it. When; If you overuse text highlights, they lose their significance. Try to use text highlights and emphasis sparingly. Refrain from mixing a lot of colors and styles. Be consistent in your approach to using text highlights.
Tips: Using the Add Space After Highlight button makes it easy to quickly "escape" the highlight and return to normal text.
Accessibility: Be sure to check the color contrast when choosing background colors.
Example: Highlighting text with a different background color gives it emphasis and can effectively get students' attention. While it is possible to use the Canvas editor to highlight text, the Sidebar adds options to format the highlighted text as a badge or pill.
How: Cidi Labs DesignPlus User Guide: Text Highlights

Quick Check Questions

What: Quick check questions are a fun way for students to ensure they understand the material before proceeding with the course.
When: You may want to add quick self-check quizzes to your course content for many reasons. Students may feel more engaged with the material if asked to "do" something on the page. Self-check questions may help students retain information. Self-check questions let students know when they might need to review the material. Self-check questions give the instructor important information on what students might need more exposure.
Tips: All quick checks are ungraded, but you may require students to select an answer to the question before they are allowed to proceed to the next page. They provide instant feedback on why an answer is correct or incorrect, assuming you input that information. However, these questions must be text-based, have multiple choice (or have at least two choices), and can only have one correct answer.
Example:

Quick Check

What are the benefits of Quick Check questions?

Helps students retain information

yes, but what else?

Helps students get an idea of what they may need to review

yes, but what else?

Helps instructors get an idea of what students might need more exposure to

yes, but what else?

All of these are correct

Correct: Yes!

Submit
How: Cidi Labs DesignPlus User Guide: Quick Checks

Learn More

Cidi Labs DesignPlus User Guide: User Settings
Cidi Labs DesignPlus User Guide: Advanced Tools

DesignPlus Resources. (2024). Instructional Design, Center for Distance Education. UTA. CC BY-NC-SA 4.0.