Do you wish you could add more than just text with colors and images?
Canvas's Rich Content Editor (RCE) hides a powerful functionality that allows us to customize our courses with truly effective designs: the HTML editor (</>). Yes, that tool we usually only use to embed videos.
But the HTML editor allows much more than just inserting videos or Genially presentations. It gives us the ability to design components that enhance the visual experience of our courses. From a simple button to link an activity, to attractive designs that communicate information clearly and effectively.
The HTML editor allows us to add HTML code (HyperText Markup Language) and CSS (Cascading Style Sheets).
- HTML allows us to structure content: headings, paragraphs, links, etc.
- CSS allows us to define how that content will look: color, size, position, margins, and much more.
But —there is always a but— the Canvas editor is quite restrictive with the tags and styles it allows. For example, we cannot use the <button> tag to create a button, nor apply shadows to containers. However, this is not so serious. We can find ways to simulate a button or a shadow using the tags and styles that are allowed.
You can check the complete list of compatible tags and styles at this link:
https://community.canvaslms.com/t5/Canvas-Resource-Documents/Canvas-HTML-Editor-Allowlist/ta-p/387066
This brief hack is not intended to be a complete guide to HTML and CSS, but rather to show you a small example. Suppose we want to create a button like the one shown above. Since we can't use the <button> tag, we will use an <a> (anchor) tag, which is normally used for links.
<button>Go to my activity</button> /* Tag not allowed in Canvas /
<a>Go to my activity</a> / Alternative in Canvas */
Now, we don't want a simple blue underlined link, we want something that looks and feels like a button: with a background, border, and rounded corners. To achieve this, we will use the style attribute, which allows us to apply CSS styles directly to that element.
<a href="#" style="
background-color: #007BFF; /* Background color */
color: white; /* Text color */
padding: 10px 20px; /* Internal spacing (padding) */
border-radius: 8px; /* Rounded corners */
text-decoration: none; /* No underline on link text */
display: inline-block; /* Behaves like a button: inline block */
"> Go to my activity</a>
The final result will be a visually attractive and functional button, to which we can also apply variations in size, color, borders, etc.
So... why settle for a simple link, if we can design our own button and improve the visual experience of our course?
If you want to know more about HTML and CSS
Check the official documentation:
