Content Templates

This page includes a variety of content templates that you can add to your Canvas content with the HTML Editor. You are welcome to mix and match these with other elements in Beautiful Canvas Pages Made Easy.

These templates are separated by divider lines. Those lines do not appear in each template; they are only meant to help visually separate them on this page.


  1. Select the entire contents of the Codepen embed.
  2. Copy using Ctrl+C (PC), Cmd+C (Mac), or right-click > Copy.
  3. Go to your Canvas content and open the Rich Content Editor by selecting the Edit button in the top-right corner.
  4. Toggle to the HTML Editor by clicking the </> icon in the bottom-right corner.
  5. Locate where you want the item to appear using the Find bar.
  6. Paste using Ctrl+V (PC), Cmd+V (Mac), or right-click > Paste.
  7. Toggle back to the Visual Editor by clicking the </> icon in the bottom-right corner.
  8. Using Link Options, change the destination of the buttons. Note that student view of Grades is not available at the link ending in /gradebook. Instead, it is available at the link ending in /grades. You can obtain this by right-clicking Grades in your course navigation and selecting “Copy link address.”
  9. Click the “Save” button in the bottom-right corner.


Start Here

Welcome to [INSERT COURSE NAME HERE]!

To start this course, please complete Module 0: Getting Started by [INSERT DATE HERE]. In Module 0, you will:

  • Learn more about the course.
  • Explore our Canvas site and how the course is organized.
  • Introduce yourself and meet your classmates.
  • Get to know your instructor.

Start Module 0

  1. Select the entire contents of the Codepen embed.
  2. Copy using Ctrl+C (PC), Cmd+C (Mac), or right-click > Copy.
  3. Go to your Canvas content and open the Rich Content Editor by selecting the Edit button in the top-right corner.
  4. Toggle to the HTML Editor by clicking the </> icon in the bottom-right corner.
  5. Locate where you want the item to appear using the Find bar.
  6. Paste using Ctrl+V (PC), Cmd+V (Mac), or right-click > Paste.
  7. Toggle back to the Visual Editor by clicking the </> icon in the bottom-right corner.
  8. Using Link Options, change the destination of the Start Module 0 button.
  9. Edit the remaining content.
  10. Click the “Save” button in the bottom-right corner.


Snider_Eva_Grouling_Nov_2021.jpg

Person Profile Block

You can use this block for any kind of profile of a person, such as a bio or contact information.

Eva Grouling Snider

 Instructional Consultant
 765-285-2966
 eva.snider@bsu.edu
 Teachers College (TC) 403

  1. Select the entire contents of the Codepen embed.
  2. Copy using Ctrl+C (PC), Cmd+C (Mac), or right-click > Copy.
  3. Go to your Canvas content and open the Rich Content Editor by selecting the Edit button in the top-right corner.
  4. Toggle to the HTML Editor by clicking the </> icon in the bottom-right corner.
  5. Locate where you want the item to appear using the Find bar.
  6. Paste using Ctrl+V (PC), Cmd+V (Mac), or right-click > Paste.
  7. Toggle back to the Visual Editor by clicking the </> icon in the bottom-right corner.
  8. Add a square image immediately before or after the placeholder image.
  9. Delete the placeholder image.
  10. Edit the remaining content. If you want to retain the icons, only select the text when replacing the contact information text. If you select the entire line, including the empty spaces before the text, it will delete the icons.
  11. Click the “Save” button in the bottom-right corner.


Instructor Contact Information

Dan Jones
Department of Information Systems and Operations Management
TC 407
Muncie, Indiana
Phone: (765) 285-6836
Email: dejones2@bsu.edu
Office Hours: by appointment either in person or virtual on Monday 3 to 5, Tuesday 9 to 11, and Thursday 1 to 3

Send me an email

  1. Select the entire contents of the Codepen embed.
  2. Copy using Ctrl+C (PC), Cmd+C (Mac), or right-click > Copy.
  3. Go to your Canvas content and open the Rich Content Editor by selecting the Edit button in the top-right corner.
  4. Toggle to the HTML Editor by clicking the </> icon in the bottom-right corner.
  5. Locate where you want the item to appear using the Find bar.
  6. Paste using Ctrl+V (PC), Cmd+V (Mac), or right-click > Paste.
  7. Toggle back to the Visual Editor by clicking the </> icon in the bottom-right corner.
  8. Using Link Options, change the email link to your email address.
  9. Edit the remaining content.
  10. Click the “Save” button in the bottom-right corner.