Where can I put these items?

You can add design library elements anywhere the full Rich Content Editor is available in Canvas. This includes:

Pages
Assignments
Discussion Boards
Classic Quizzes (currently unavailable in New Quizzes)
Announcements (does not apply to email notifications of Announcements)
Syllabus

Do I need to know code to use these items?

Nope! In fact, 90% of the design library is usable without even opening the HTML Editor in Canvas.

What do I need to know going into this?

A basic familiarity with Canvas and the Rich Content Editor is all you need to add these items to your Canvas course. While knowing the ins and outs of Canvas will help, it is not required.

I’ve been using one of these items and I want to edit the content. How do I do that?

Good news! Almost always, you can easily edit the content in the Canvas Visual Editor, so there is often no need to come back here if you’re just editing existing items.

How do I apply these designs to existing Canvas content?

The instructions in this course are for making new content. If you have existing content you want to apply these designs to, follow all of the steps as if you were creating new content. Then, select your existing content, copy it, and paste it in place of the new design elements you added.

Can I copy and paste a design element from one of my Canvas items to another?

Yes! The Rich Content Editor’s “Rich Text view” or Visual Editor will carry over the item styles. If you run into an issue with copying and pasting from one of your Canvas items, though, you can always return to this self-paced course and grab the item you want to copy.

Which variation should I use?

When working with an item with multiple variations, such as Emphasis Boxes, it can be difficult to choose which variation(s) to use. Here are a few tips:

For the easiest method, choose variations without icons. Variations with icons will require using the HTML Editor if you want to change the icons, so if you want the quickest and easiest method, choose the other variations.
Choose a variation that matches your content. For example, if you have a long block quote you’d like to include, use the small block quote style so that it doesn’t take up too much room on the page.
Build a consistent “theme” for certaint types of information. One of the reasons the variations are present is so that you can create predictable ways of styling certain kinds of content. For example, you might use the small red emphasis boxes for due dates or other important information, then use the small gray emphasis boxes for tips or other more “supplemental” information. This helps create a consistent visual hierarchy and organization that benefits learners navigating your content.
Let your gut be your guide. At the end of the day, we wanted to include variations to account for personal style and offer a more flexible design library. There is no right or wrong variation, so choose whatever you think looks best!

How do these items work on mobile?

All items in the design library have been designed to work well on mobile devices, including using Canvas in a mobile web browser and using the Canvas mobile app. Some items will look slightly different on mobile. Most mobile changes are to sizing to better accommodate the smaller screen. The only items that look significantly different on mobile are Columns and Tables. The pages for those items have more details about what to expect on mobile.

Are these items accessible?

The short answer: Yes.

The long answer: These items have been coded for accessibility using semantic HTML. Semantic HTML is code that communicates information about the meaning of the content, separate from its visual presentation. While Canvas does not allow all semantic HTML, it does allow most semantic HTML, and this design library makes use of what Canvas allows. For example, the image with caption styles use semantic HTML that identifies the caption not just as a generic paragraph but specifically as a caption for the accompanying image. You can learn more about semantic code and how it works in Canvas in our self-paced course, Make Your Canvas Course Accessible.

Learn More About Accessible Code in Canvas

I ran into a problem with one of the elements, what should I do?

If your problem is that the element is not styled: Your best bet is to remove the item and start back at Step 1 for that item. Make sure to read all the notes, too, as that may help illuminate what caused the problem!

If your problem is that the element is styled but doesn’t display particularly well (e.g., poor spacing, bumping into other items, etc.): It’s likely you’ve run into an edge case we didn’t account for! While we have designed these items for as many different uses as possible, there will always be some situations where they don’t behave as expected. Please report this situation here, and we’ll work on a fix as soon as possible. We will notify you when it has been fixed.

How can I get support for working with Beautiful Canvas Pages Made Easy?

All support for Beautiful Canvas Pages Made Easy is run through the Division of Online and Strategic Learning. If you would like support, please email us at strategiclrn@bsu.edu or call us at 765-285-1763. Do not reach out to the Technology Help Desk for support, as they will not be able to assist.

I would really like X, but I don’t see it here. Can you add it?

We are happy to consider adding any design element to Canvas. We can’t guarantee that we will be able to add it, as each element involves extensive development and testing. You can submit requests for new elements here.

How can I bring this to my program, department, or area?

We offer customized support for programs, departments, or areas who want to use Beautiful Canvas Pages Made Easy in their Canvas courses. The shape of this support is really up to you. We can run a workshop at a department meeting, build a customized department template, or provide office hours for your faculty.

To get the conversation started, email Eva Grouling Snider, eva.snider@bsu.edu.