Designing a Basic Content Page Using the DesignPLUS Sidebar

You can create a content page in Canvas from scratch using the DesignPLUS sidebar. In this Guide, we will design a basic themed content page that includes a banner and a content block to keep your page organized. An example of a basic page created with DesignPLUS might look something like this:

This is an example of what a simple Canvas page might look like designed with the DesignPLUS sidebar.

Add a Theme with a Banner Title

  1. Create a brand new page in your Canvas course.
  2. While editing the page, click on the 🚀 rocket ship icon at the top right-hand corner of the screen to open the DesignPLUS sidebar.
    • Alternatively, use the keyboard shortcut Alt/Option + Shift + D.
  3. On the top blue toolbar of the DesignPLUS sidebar, click on the âž• Add New Elements tab.
  4. Under the heading Getting Started, click on the Theme button. This will add a banner in the Rich Content Editor (RCE) that you can apply a theme to.
Under the heading Getting Started, click on the Theme button. This will add a banner in the Rich Content Editor (RCE) that you can apply a theme to.
  1. Below the Content panel, click on the Style panel to open it.
  2. Expand any of the categories available to you. Hover over any style to get a preview of what it would look like on your page. When you find one that you like, click on it to apply the style to your banner. If you don’t like the way that style looks on the page, select another one.
    • This Course contains any styles you’ve created in your course. Most likely, this will be empty.
    • ET+I @ CCS contains a variety of styles designed by the Educational Technology + Innovation team at CCS … within the CCS Styles section. It also contains Legacy DesignPLUS Styles designed by the team at Cidi Labs.
The "Style" panel allows you to select from a variety of styles to change the look of your content. The ET+I team at CCS has included some pre-designed styles for you to select from.
NOTE: The styles you see in this screenshot may not be the same as what are available to you in your Canvas course(s).
  1. Rather than editing the text for the banner that populates within the RCE, it is recommended that you edit the text directly in the DesignPLUS sidebar. In the Content panel that appears in the DesignPLUS sidebar, fill in the information about your page. Any information you add to these text fields will automatically populate on your page within the RCE. For example:
    • Prefix 1: Your course name
    • Prefix 2: Your course number
    • Title: The title of your page
    • Subtitle and Description: Both of these are optional
    • The Show Canvas Title checkbox would display the native page title at the top of your page when you save it. If you include the title of your page in the Title field shown below, it is not necessary to check this box.
Rather than editing the text that populates within the Rich Content Editor (RCE), you can edit the text directly in the DesignPLUS sidebar. In the "Content" panel that appears in the DesignPLUS sidebar, fill in the information about your page. Any information you add to these text fields will automatically populate on your page within the RCE.

Add a Content Block

  1. In the Rich Content Editor (RCE), place your cursor underneath the banner you’ve created.
  2. On the top blue toolbar of the DesignPLUS sidebar, click on the âž• Add New Elements icon.
  3. Under the heading Getting Started, click on the Content Block button. This will add a content block element to your new page.
On the top blue toolbar of the DesignPLUS sidebar, click on the "Add New Elements" tab. Under the heading Getting Started, click on the "Content Block" button. This will add a content block element to your new page.
  1. Rather than editing the block heading text that populates within the RCE, it is recommended that you edit the text directly in the DesignPLUS sidebar. In the Content panel that appears in the DesignPLUS sidebar, fill in the Block Heading textbox. Any information you add to this text field will automatically populate on your page within the RCE. For example, your heading might be the word “Overview” where you will provide an overview of the page you are designing. Or, your heading might be the words “Helpful Websites” where you will list several websites about a topic for your students to access. The possibilities are endless.
  2. Click on the Icon Picker button to select an icon you’d like to use with your content block.
Rather than editing the text that populates within the Rich Content Editor (RCE), you can edit the text directly in the DesignPLUS sidebar. In the "Content" panel that appears in the DesignPLUS sidebar, fill in the information about your page. Any information you add to this text field will automatically populate on your page within the RCE.

At this point, your content block still looks pretty plain, so let’s add some style to it.

  1. In the RCE, place your cursor within the content block.
  2. On the top blue toolbar of the DesignPLUS sidebar, click on the 🎯 Edit Current Element tab.
  3. Click on the Text button below the 🎯 Edit Current Element tab.
  4. Click on the Style panel to open it.
  5. Expand any of the categories available to you. Hover over any style to get a preview of what it would look like on your page. When you find one that you like, click on it to apply the style to your banner. If you don’t like the way that style looks on the page, select another one.
    • This Course contains any styles you’ve created in your course. Most likely, this will be empty.
    • ET+I @ CCS contains a variety of styles designed by the Educational Technology + Innovation team at CCS … within the CCS Styles section. It also contains Legacy DesignPLUS Styles designed by the team at Cidi Labs.
The "Style" panel allows you to select from a variety of styles to change the look of your content. The ET+I team at CCS has included some pre-designed styles for you to select from.
NOTE: The styles you see in this screenshot may not be the same as what are available to you in your Canvas course(s).
  1. In the RCE, fill in the contents of your page with information that your students will need (text, website links, videos, documents, etc.)
  2. Be sure to Save your content page.

Additional Resources