Cidi Labs DesignPLUS
Style Text with Ordered & Unordered Lists

About the List Tools

Lists help provide structure and order to a group of connected or sequential content items and increase the readability of text by simplifying long sentences or paragraphs. Assistive technologies such as screen readers identify items as lists only if the built-in formatting is used; otherwise, they are read as plain text and may be confusing.

Ordered Lists (numbered) are:
- Marked with some type of number or letter sequence, such as 1, 2, 3... or A, B, C...
- Used for sequential information.
- Used to provide step-by-step instructions that follow a sequence.
Unordered Lists (bulleted) are:
- Typically marked with a bullet point.
- Used when the order of the items is not relevant.

Exercise: Add an Ordered List

Ordered Lists are used for sequential information and are automatically numbered by the tool. Use the empty text box at the bottom of this exercise to try out these steps and see how the list tools work.

To Add a New Ordered List:

In the Canvas RCE, place your cursor where you want the new list to go, or use your cursor to select multiple existing paragraphs.
In the DesignPLUS Sidebar, select the Add New Elements tab.
Select List: Ordered.

Delete an Item from an Ordered List:

In the Canvas RCE, place your cursor anywhere within the list you want to modify.
In the DesignPLUS Sidebar, select the Edit Current Element tab.
Select List: Ordered as the active tool.
In the Content panel, select Delete Item to remove a specific item.

Set the Starting Number for the First Item in an Ordered List:

In the Canvas RCE, place your cursor anywhere within the list you want to modify.
In the DesignPLUS Sidebar, select the Edit Current Element tab.
Select List: Ordered as the active tool.
In the Advanced panel, insert the desired starting number in the Manually Set Start # textbox.

Change the Number for an Item Anywhere in a List:

Note: When you manually change the number of a list item, the rest of the list will continue counting from that number automatically.

In the Canvas RCE, place your cursor anywhere within the list you want to modify.
In the DesignPLUS Sidebar, select the Edit Current Element tab.
Select List: Ordered as the active tool.
In the Advanced panel, insert the desired item number in the Manually Set Item # textbox.

A Note About Manually Setting Numbers

You will enter a number regardless of the list style. The number you enter will be displayed in the corresponding style for the Alpha (A, B, C) or Roman (I, II, III) list styles. For example, if you enter 5, it will display as e/E for Alpha styles and v /V for Roman styles.

If needed, select Edit to modify this Page, then return to these directions. Use the empty text box below to practice with any of the steps above.

Continue to the next exercise, or if you are finished working with this page for now, scroll to the bottom and select Cancel. This will return the Page and instructions to their original state for future reference.

Exercise: Add an Unordered List

Unordered Lists are used when the order of the items is not relevant. List items in Unordered Lists are typically marked with a bullet point. Use the empty text box at the bottom of this exercise to try out these steps and see how the list tools work.

Add a New Unordered List:

In the Canvas RCE, place your cursor where you want the new list to go, or use your cursor to select multiple existing paragraphs.
In the DesignPLUS Sidebar, select the Add New Elements tab.
Select List: Unordered.

Add List Items:

The DesignPLUS Sidebar doesn't provide an option to add an item to a list due to the ease of adding items in the Canvas RCE.

Instead, add items to an existing list using the Canvas RCE:

Place your cursor at the beginning or end of a list item.
Press the Enter or Return key.

Note: The new list item will retain the same style and content as the original before you pressed Enter or Return. For example, if your cursor is in bolded or italicized text in an Ordered List, the new list item will also be bolded or italicized and numbered.

Delete an Item from an Unordered List:

In the Canvas RCE, place your cursor anywhere within the list you want to modify.
In the DesignPLUS Sidebar, select the Edit Current Element tab.
Select List: Unordered List as the active tool.
In the Content panel, select Delete Item to remove a specific item.

If needed, select Edit to modify this Page, then return to these directions. Use the empty text box below to practice with any of the steps above.

Continue to the next section, or if you are finished working with this page for now, scroll to the bottom and select Cancel. This will return the Page and instructions to their original state for future reference.

Modify Lists

The DesignPLUS Sidebar offers various options for modifying and styling Ordered and Unordered Lists. You'll practice these tasks in the next exercise.

Change the List Type/Style:

In the Canvas RCE, place your cursor anywhere within the list you want to modify.
In the DesignPLUS Sidebar, select the Edit Current Element tab.
Choose the appropriate list option ( List: Ordered or List: Unordered) as the active tool.
In the Style panel, choose a different style to see the changes in the Canvas RCE.

Do Not Change List Types Using the Canvas RCE

Using the Canvas RCE to change the list type will often impact other elements, such as Content Blocks, Callouts, Accordions, etc. This will break the style and structure of your content.

Edit List Levels:

There are a couple of ways to change the indent level of a list item:

Use the DesignPLUS Sidebar

In the Canvas RCE, place your cursor anywhere within the list you want to modify.
In the DesignPLUS Sidebar, select the Edit Current Element tab.
Choose the appropriate list option ( List: Ordered or List: Unordered) as the active tool.
In the Content panel, select Decrease Indent or Increase Indent.

Use the Canvas RCE Keyboard Shortcut

There are default shortcut keys built into the Canvas RCE:

Place your cursor within the list item you want to change.
Press Tab to increase indent or Shift + Tab to decrease indent.

Change the Order of the List Items:

In the Canvas RCE, place your cursor anywhere within the list you want to modify.
In the DesignPLUS Sidebar, select the Edit Current Element tab.
Choose the appropriate list option ( List: Ordered or List: Unordered) as the active tool.
In the Content panel, locate the list item you wish to move and do one of the following:
- Select the Drag Handles at the start of the row and drag the item to the desired location.
- Press Tab on your keyboard until the Drag Handles are replaced with Move with arrow keys with keyboard focus, then use your up or down keys to move the item to the desired location.

Remove the List Format and Convert Items to Paragraphs:

In the Canvas RCE, place your cursor anywhere within the list you want to modify.
In the DesignPLUS Sidebar, select the Edit Current Element tab.
Choose the appropriate list option ( List: Ordered or List: Unordered) as the active tool.
In the Style panel, select Remove List Format.

Use Hanging Indents:

A hanging indent, also known as a second line indent, uses the default margin for the first line and then indents each subsequent line of the item.

In the Canvas RCE, place your cursor anywhere within the list you want to modify.
In the DesignPLUS Sidebar, select the Edit Current Element tab.
Choose the appropriate list option ( List: Ordered or List: Unordered) as the active tool.
In the Style panel, check the Hanging Indent box.

Add Extra Space Between List Items:

In the Canvas RCE, place your cursor anywhere within the list you want to modify.
In the DesignPLUS Sidebar, select the Edit Current Element tab.
Choose the appropriate list option ( List: Ordered or List: Unordered) as the active tool.
In the Style panel, check the Space Between Items box.

Exercise: Edit a List

You can create Ordered and Unordered Lists with the Canvas RCE, but working with those lists can sometimes be a little tricky.

The List: Ordered and List: Unordered elements let you turn text into a list, add or remove items, and change the style intuitively. For this exercise, the directions are placed in Ordered and Unordered Lists so you can modify them as you read them.

If needed, select Edit to modify this Page, then return to these directions. When you are finished working with this page, scroll to the bottom and select Cancel. This will return the Page and instructions to their original state for future reference.

Change the Indent Level

The following items can be indented in several ways.
Press Tab on your keyboard to indent this list item.
In the Canvas RCE toolbar, locate the icon to Increase or Decrease Indent. Use it to indent this list item.
In the DesignPLUS Sidebar's Edit Current Element tab with List: Ordered as the active tool, use the Content panel to Increase Indent for this list item.

Change the List Style

In the Canvas RCE, place your cursor anywhere in the Ordered List below. In the DesignPLUS Sidebar, select the Edit Current Element tab and select List: Ordered as the active tool. Open the Style panel and try each of these options:

1 Decimal
01 Decimal with Leading Zero
a Lower Alpha
A Upper Alpha
i Lower Roman
I Upper Roman
No Style
Default

Next, in the Canvas RCE, place your cursor anywhere in the Unordered List below. In the DesignPLUS Sidebar, select the Edit Current Element tab and select List: Unordered as the active tool. Open the Style panel and try the different bullet point options:

Disk
Circle
Square
Pill List
List Group
No Style
Default

You can also mix and match styles when you have lists nested within other lists. Place your cursor anywhere within each list indent level below. In the DesignPLUS Sidebar, select the Edit Current Element tab and select List: Ordered as the active tool. Open the Style panel and experiment with combining different options:

Main list level
1. Second level
  1. Third level
  2. Third level
  3. Third level
2. Second level
3. Second level
Main level
Main level

Awesome job with lists! Once you've completed the exercises, select Next to learn more about DesignPLUS Tools.