Working with Headings and Icons

About headings in DesignPLUS

Page headings play a crucial role in structuring content and providing verbal cues about the content that follows. While both the Canvas editor and the DesignPLUS Sidebar allow you to add headings, the Sidebar offers greater flexibility with its support for heading 5 and 6.  In addition, it lets you easily insert icons at the beginning or end of headings.

​

Important heading facts and tips

  • The Theme tool controls the look of headings on the page. However, when it comes to setting or adjusting the heading level, turn to the Text tool.
  • Canvas page titles use Heading 1, while text within the Banner Title element uses Heading 2. To maintain an accessible and hierarchical page structure, set top-level headings in the content area to Heading 3.  Use levels 4-6 as needed for deeper nesting.
  • Consistency matters; always apply headings consistently and avoid skipping levels.
  • Decide on a capitalization scheme for each heading level and maintain it throughout your course. For instance, in this course, title case is used for the title and prefix in the banner title element, while sentence case is employed for all headings within the body of each page.

 

Using icons in DesignPLUS

Icons can be placed almost anywhere in DesignPLUS, but are most commonly added to section headings. When thoughtfully integrated, icons not only add visual interest but also serve as meaningful cues for students. In this course, different icons distinguish between three types of content: information about DesignPLUS features, hands-on exercises, and feature instructions.

 

Practice what you've learned

Time to practice your skills.  If you need help, open the DesignPLUS Task Instructions page in a new browser tab.  

  1. Apply the theme you selected previously to the current page.
  2. Replace the default Prefix text in the banner title element with "From Drab to Fab".

 

Exercise: Working with headings

  1. If the page isn't 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. Beneath these numbered instructions is a line with the text "Main section heading" followed by a paragraph of dummy or placeholder text
  4. Place your cursor in the "Main section heading" line.
  5. In the Sidebar main menu, select the Edit Current Element (  ) tab.
  6. Confirm that Text is selected as the active tool. If not, select it.
    The Edit Current Element tab with Text selected as the active tool.

  7. In the the Edit Current Element (  ) page, open the Content panel if it's not already open. You will see a list of the available heading options with Body Text selected:
    Content panel for the Text tool. Body Text is selected and Heading 3 is highlighted in red.
  8. Click the Apply Heading icon ( ) for Heading 3 to change the line from body text to a level 3 heading
  9. Place your cursor at the end of the paragraph to create a new blank line (headings must be on a line by themselves).
  10. Type the text "Sub-section heading" and place your cursor somewhere within that line.
  11. Repeat steps 6 through 8, now time setting the heading to Heading 4. 
  12. Add two more lines of text and set them to Heading 5 and Heading 6 respectively. The text size for each heading level gets progressively smaller.
  13. For additional practice, experiment with some of the other headings on this page, converting them to body text or another level and back to Heading 3 again.

Main section heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus consequat enim ac justo pretium vulputate. Sed malesuada quam in vestibulum aliquet. Suspendisse potenti.

 

Exercise: Working with heading icons

  1. If the page isn't 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 text above this section, place your cursor in the line with the text "Main section heading". 
  4. Confirm that Text is selected as the active tool. If not, select it.
  5. In the the Edit Current Element (  ) page, open the Content panel if it's not already open. Confirm that Heading 3 is selected.
  6. Click the Icon Picker button.
    Content panel for the Text tool. Body Text is selected and the Icon Picker Button is highlighted in red.
  7. The Icon Picker window will open. In the Icon Picker window, you can either use the Choose a Category menu or enter a search term in the Search box to find an appropriate icon for your heading.

    Screenshot of the Icon Picker search options.
  8. The icons matching the selected category or search expression will display. (Note: Icons with a red outline will not be visible in the Canvas mobile app.)
    Screenshot of the Icon Picker with the icons matching the search term "warning:

  9. In the Icon Picker window, click the desired icon to add it to the heading. 
  10. Once you’ve made your selection, click Close button (  ) at the top right of the Icon Picker window to close it.
  11. Repeat steps 4 through 10 for the Heading 4 heading you added in the previous exercise. (Note: This is just for practice. Under normal circumstances it's best to restrict adding icons to main section headings (Heading 3) only.
  12. Next, we'll change an existing heading icon. Place your cursor in a heading that already has an icon.
  13. Repeat steps 4 through 9 to select a different icon for the heading.
  14. Finally, let's try deleting an icon from heading. Once again, place your cursor in your Heading 4 heading above.
  15. Repeat steps 4 through 6 above.
  16. When the Icon Picker opens, click the Remove Icon button ().

    Screenshot of the Icon Picker with the Remove Icon button highlighted with the thick red border.
  17. Click the  Close button (  ) at the top right of the Icon Picker window to close it for the last time.
  18. Save your updated page.

More terrific work! You just added headings and icons to your DesignPLUS toolbelt. Click Next to learn how to add a custom banner image to your course home page and module overview pages.