Basics of Content Blocks in DesignPLUS

“Content Blocks help us organize pages and provide structure – both with visual aesthetics, and with accessible headings for our screen reader users. They make your process easier, as you can pull in a gorgeous template, duplicate a block, or reorder them in a blink. And since your students aren’t greeted with an unending wall of black and white text, Content Blocks reduce their cognitive load.”

Cidi Labs, DesignPLUS: Content Blocks – Video Hub

Cidi Labs, the folks behind DesignPLUS, provides helpful video tutorials on how to use DesignPLUS. In this tutorial, Cidi Labs describes what Content Blocks are, why you’d want to use them, and how to incorporate them into your own Canvas course(s).

The ET+I team at CCS recommends you first try building Content Blocks in your Canvas “sandbox” course. Once you are comfortable creating Content Blocks in your “sandbox” course, you can move forward to add similar Content Blocks in your semester course content pages.

  • Your Canvas “sandbox” course typically has a course name of [YourFirstName]’s Sandbox. You may need to go to your Courses >> All Courses screen in Canvas to locate this “sandbox”. Your “sandbox” course is available for you to try out things in Canvas before you implement them in your semester course(s). No actual CCS students are added to “sandbox” courses in Canvas. However, a dummy student account, “Alfred Student”, is added to each “sandbox” course.

Watch at least the first five (5) minutes of this video tutorial from Cidi Labs on Content Blocks.

NOTE: Some options in the video may differ slightly than what you have on your screen.

Adding a Banner/Theme to a Content Page

  1. In your “sandbox” course, create a new, blank Canvas page.
  2. Click on the ✏️ Edit button at the top right-hand corner of the screen.
  3. Click on the πŸš€ rocket ship icon at the top right-hand corner of your screen to open the DesignPLUS sidebar.
    • Alternatively, use the keyboard shortcut Alt/Option + Shift + D.
  4. On the top blue toolbar of the DesignPLUS sidebar, click on the βž• Add New Elements tab.
  5. 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 Themes panels available to you. Hover over a theme name 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 theme to your page. If you don’t like the way a theme looks on the page, select another one.
    • CCS Themes contain themes designed by the ET+I team at CCS.
    • Legacy Themes contain themes designed by Cidi Labs when their Design Tools (now DesignPLUS) product was first developed.
    • My Custom Themes contain themes that you have developed in your own course. (This panel may or may not show in your view.)
In this example, the "CCS Themes" panel is open within the DesignPLUS sidebar, and the "Purple Haze" theme is being previewed.

Adding a Content Block to a Page

  1. Place your cursor where you want to insert the content block (such as below your banner).
  2. On the top blue toolbar of the DesignPLUS sidebar, click on the βž• Add New Elements tab.
  3. Under the Getting Started heading, click on the Content Block icon. A new content block will be added to your page with the chosen theme applied.
  4. Click your mouse somewhere within the content block in the RCE. Ensure that the 🎯 Edit Current Element tab is selected within the DesignPLUS sidebar, and that the Content Block button is selected.
  5. Edit the Block Heading text box to change the name of the heading for your content block.
  6. Use the Icon Picker button to select an icon that, in some way, matches the description used in your heading. (Example: If your heading was about forests, you might find an icon of a 🌲 tree.)
Edit the Block Heading text box to change the name of the heading for your content block. Use the Icon Picker button to select an icon that, in some way, matches the description used in your heading.

This is an example of a finished page which includes a banner and a content block applied with a theme designed by the ET+I team at CCS:

This is an example of a finished page which includes a banner and a content block applied with a theme designed by the ET+I team at CCS.

Additional Resources