This page will provide you with important foundational knowledge about how to add design library elements to your Canvas content. The instructions for each item often refer to these concepts, so if you don’t understand a step in the instructions, it’s worth returning to this page.

Canvas Rich Content Editor

Beautiful Canvas Pages Made Easy items can be added anywhere you have access to the full Rich Content Editor in Canvas. The Canvas Rich Content Editor is the content editing window present in most Canvas content, including Pages, Assignments, Quizzes, Discussion Boards, Announcements, and Syllabus. It includes a dropdown menu (1), toolbar (2), and content area (3).

The Rich Content Editor has two different views. The default view is the “Rich Text view,” which we refer to in this self-paced course as the “Visual Editor.” Almost everything in this self-paced course is copied and pasted into the Visual Editor. There is also an HTML Editor view, which we’ll discuss later.

Copying and Pasting in the Visual Editor

This is the easiest method, and it’s what you’ll be doing for the vast majority of styles in Beautiful Canvas Pages Made Easy. This method only requires a few simple steps, and you’ll magically have beautiful content in a matter of seconds!

Some items will have selection bars or selection lines, while other items will not. Selection bars are labeled “Start of Selection” and “End of Selection.” In between them will be the item you’re copying. For example, here is a red button for copying:

Start of Selection

Ball State Canvas

End of Selection

Selection lines are very similar, but they will be black and red lines instead of text. The only reason for these is that the underlying code of some items requires a different method. For example, here is a blockquote that uses selection lines:

Gray Small: There's not a man, woman, or child on the face of the earth who doesn't enjoy a tasty beverage.

- David Letterman

The selection lines include dots at the end to aid you in selecting the right area.

When present, the selection bars or selection lines are necessary to ensure that the underlying code is copied. If selection bars or selection lines are present and you do not use them, the item may not retain all its styles. If selection bars or selection lines are not present, then you can just select the item directly.

To add an item to your Canvas content using the Visual Editor, you’ll do the following:

Select the item, including the start and end selection bars/lines if they are present.
Copy using Ctrl+C (PC), Cmd+C (Mac), or right-click > Copy.
Open the Rich Content Editor for the Canvas item where you want to add this design by clicking the “Edit” button in the top-right corner.
Scroll to where you want to insert the item.
Paste using Ctrl+V (PC), Cmd+V (Mac), or right-click > Paste.
Edit the content.
Select and delete the selection bars/lines if they are present. These are obvious so that you won’t miss deleting them.
Click the “Save” button in the bottom-right corner.

GIF showing selection bars reading Start of Selection and End of Selection - cursor selects everything, including bars, copies and pastes it

You’re welcome to try these steps using the button and/or block quote above!

Copying and Pasting in the HTML Editor

Want to keep things super easy?

This section covers how to use items that require the HTML Editor. This is purely optional: the HTML Editor is only needed for about 10% of the design library. You are welcome to read this section, skip on to the next page, or bookmark this and come back to it later.

Skip to the Next Page

While most items in the design library can be copied and pasted in the Visual Editor, a few will need to be copied and pasted in the HTML Editor instead. This is particularly true if you want to use a style with an icon and want to change the icon, as changing the icon will require editing the code. A few other items and variations, such as Progress Bars and Tables, will require using the HTML Editor. The information below will help you learn how to work with the HTML Editor.

The HTML Editor can be toggled by clicking the </> icon in the bottom-right corner of the Rich Content Editor. Clicking this toggle will bring up the HTML code that makes up your Canvas content. When in the HTML Editor, clicking the same </> icon will toggle back to the Visual Editor.

GIF showing toggle to HTML Editor in Canvas - cursor selects </> icon for HTML Editor and enables the toggle

When the HTML Editor is required, the instructions will tell you how to use it. Here is a common path when using the HTML Editor:

Make any revisions to the code in the Codepen embed, as directed by the instructions (more on that shortly).
Select the code from the Codepen embed.
Copy using Ctrl+C (PC), Cmd+C (Mac), or right-click > Copy.
Go to your Canvas content and open the Rich Content Editor by selecting the Edit button in the top-right corner.
Toggle to the HTML Editor by clicking the </> icon in the bottom-right corner.
Locate where you want the item to appear using the Find bar (more on that shortly).
Paste using Ctrl+V (PC), Cmd+V (Mac), or right-click > Paste.
Toggle back to the Visual Editor by clicking the </> icon in the bottom-right corner.
Edit the content.
Click the “Save” button in the bottom-right corner.

GIF showing copying and pasting from Codepen embed - cursor selects entire code block, copies it, toggles to HTML editor, and pastes it

Find Bar

Finding where in the code you want the item to appear can be difficult if you aren’t familiar with HTML code. This is where the Find Bar comes in handy!

Find Bar in Google Chrome

To open the Find bar, press Ctrl+F on a PC or Cmd+F on a Mac. Type in whatever you want to look for, and the Find bar will highlight that content and allow you to move between multiple places it is present on the page.

The Find bar does not always perform well with the Canvas HTML Editor. If you search for something and it doesn’t return any results, select “Raw HTML Editor” in the bottom-left corner and try again.

Codepen Embeds

All the code that you will be copying and pasting is set up through Codepen embeds. A Codepen embed looks like this:

The content in this Codepen is editable, meaning you can highlight parts and change them. Your changes are only visible for you, so you won’t mess with the code for anyone else. Try it out on the Codepen embed here!

The instructions for several design library elements require you to make slight tweaks to the code, such as choosing a different icon or changing a link. You can do this right in the embedded Codepen window.

Don’t worry about the colors used in the Codepen code. These colors are purely visual conventions that coders use to make code more human-readable.

Prefer working with HTML?

If you have experience with HTML, you may find it easier to copy and paste the HTML code for Beautiful Canvas Pages Made Easy items. We’ve compiled all HTML code onto a single page for your convenience.

View all HTML code