How do I get Canva Buttons into my Canvas Course?
This tutorial will walk you through how to add your Canva buttons into your Canvas course, and how to tile them for an aesthetic homepage.
You will need to know how to
- Use the Canvas Rich Content Editor
- Make Tables in Canvas
- Make buttons using Canva
Canvas' Rich Content Editor (RCE) allows you to edit the information in your page, assignment, quizzes etc...
You will need to have a general knowledge on how to use this. You can check out Canvas' tutorials here on the Rich Content Editor to learn more.
This turial will require you to have knowlege on how tables work and how to set it up to create cells. This will enable you to embed your Canva Buttons into your page.
To learn more about creating Tables in Canvas, check out these Canvas tutorials here
If you need help creating Canva buttons, check out this Screensteps tutorial here.
If you would like to see an example of a course that utilizes Canva buttons, take a look at this course here.
After you have created your buttons in Canva and saved them to your desktop, you will need to upload these buttons into Canvas.
You can check out this Canvas tutorial on how to upload items into your Course Files.
We recomend that you create Folders in your course and organize them according to your needs, i.e, "documents", "Images", "buttons." This enables you to maintain organization in your files folder and prevents broken links if you decide to reogranize your content later.
Once you're in your course's Files page, create your Buttons Folder.
- In the upper right hand corner, select the "+ Folder" button.
- Name your folder by typing in the text box,
- then select the checkmark.
Select your folder by clicking on it to enter it.
and then locate the Upload button in the upper right hand corner.
A new dialogue box will pop up on your screen, locate where you saved your Canva buttons on your computer,
- select the folder
- select your button(s)
- select Open
If you want/need to select multiple items within your folder at once, hold down Shift on your keyboard, and select each item with your mouse.
Your Canva Buttons will now be in your course files.
Once your Canva Buttons are within your course's files, you can begin editing the page you desire to place your buttons. You will need to know how to edit a Page in Canvas for this step.
Next you will need to create and format a table to embed your Canva Buttons in. You will need to know how to add and edit a table in Canvas for this step.
Within your Rich Content Editor, select the table button and hover over "Table" to set the dimension of your table. For a full page, we recomend a width of 3 or width of 4.
You will now see a table created in your editor. Select the first tab on the table editor titled Table Properties.
You will now be prompted to add properties to your table.
If you'd like your table to go fully across the page, add 100% to the Width box. You can see what this looks like here.
If you would like it to form around your buttons, leave this blank.
You can decide how much of a boarder and cell padding your would like.
Next, select your alignment for your table in the Alignment tab, a drop down menu will show on your screen.
Now, you will select the cell where you would like to put your Canva Button.
Go to Embed Image
Then you will select the Canva Button, provide alt text, for example, "week one". Then set your dimensions finally select "Update."
You will now see that your Canva Button is in your first cell. Repeat this proccess for the remaining cells.
For a perfect grid look, make sure your dimensions for each image is the same.
Place all your images into each individual cell.
Press save, and you will now have a grid on your course with your customized Canva buttons.
You can find templates for different grid templates here. You will simply create your Canva buttons, download and then save them in your Canvas course, and embed your button inplace of the template buttons.
<table style="margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td><img src="https://canvas.humboldt.edu/courses/13290/files/264766/preview" alt="Put.png" width="200" height="200" data-api-endpoint="https://canvas.humboldt.edu/api/v1/courses/13290/files/264766" data-api-returntype="File" /></td>
<td><img src="https://canvas.humboldt.edu/courses/13290/files/264766/preview" alt="Put.png" width="200" height="200" data-api-endpoint="https://canvas.humboldt.edu/api/v1/courses/13290/files/264766" data-api-returntype="File" /></td>
<td><img src="https://canvas.humboldt.edu/courses/13290/files/264766/preview" alt="Put.png" width="200" height="200" data-api-endpoint="https://canvas.humboldt.edu/api/v1/courses/13290/files/264766" data-api-returntype="File" /></td>
</tr>
<tr>
<td><img src="https://canvas.humboldt.edu/courses/13290/files/264766/preview" alt="Put.png" width="200" height="200" data-api-endpoint="https://canvas.humboldt.edu/api/v1/courses/13290/files/264766" data-api-returntype="File" /></td>
<td><img src="https://canvas.humboldt.edu/courses/13290/files/264766/preview" alt="Put.png" width="200" height="200" data-api-endpoint="https://canvas.humboldt.edu/api/v1/courses/13290/files/264766" data-api-returntype="File" /></td>
<td><img src="https://canvas.humboldt.edu/courses/13290/files/264766/preview" alt="Put.png" width="200" height="200" data-api-endpoint="https://canvas.humboldt.edu/api/v1/courses/13290/files/264766" data-api-returntype="File" /></td>
</tr>
<tr>
<td><img src="https://canvas.humboldt.edu/courses/13290/files/264766/preview" alt="Put.png" width="200" height="200" data-api-endpoint="https://canvas.humboldt.edu/api/v1/courses/13290/files/264766" data-api-returntype="File" /></td>
<td><img src="https://canvas.humboldt.edu/courses/13290/files/264766/preview" alt="Put.png" width="200" height="200" data-api-endpoint="https://canvas.humboldt.edu/api/v1/courses/13290/files/264766" data-api-returntype="File" /></td>
<td><img src="https://canvas.humboldt.edu/courses/13290/files/264766/preview" alt="Put.png" width="200" height="200" data-api-endpoint="https://canvas.humboldt.edu/api/v1/courses/13290/files/264766" data-api-returntype="File" /></td>
</tr>
</tbody>
</table>
<p> </p>
Link to Canva Button Template 4x4
Canvas Page code bellow.
<table style="margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td><img src="https://canvas.humboldt.edu/courses/13290/files/264766/preview" alt="Put.png" width="200" height="200" data-api-endpoint="https://canvas.humboldt.edu/api/v1/courses/13290/files/264766" data-api-returntype="File" /></td>
<td><img src="https://canvas.humboldt.edu/courses/13290/files/264766/preview" alt="Put.png" width="200" height="200" data-api-endpoint="https://canvas.humboldt.edu/api/v1/courses/13290/files/264766" data-api-returntype="File" /></td>
<td><img src="https://canvas.humboldt.edu/courses/13290/files/264766/preview" alt="Put.png" width="200" height="200" data-api-endpoint="https://canvas.humboldt.edu/api/v1/courses/13290/files/264766" data-api-returntype="File" /></td>
</tr>
<tr>
<td><img src="https://canvas.humboldt.edu/courses/13290/files/264766/preview" alt="Put.png" width="200" height="200" data-api-endpoint="https://canvas.humboldt.edu/api/v1/courses/13290/files/264766" data-api-returntype="File" /></td>
<td><img src="https://canvas.humboldt.edu/courses/13290/files/264766/preview" alt="Put.png" width="200" height="200" data-api-endpoint="https://canvas.humboldt.edu/api/v1/courses/13290/files/264766" data-api-returntype="File" /></td>
<td><img src="https://canvas.humboldt.edu/courses/13290/files/264766/preview" alt="Put.png" width="200" height="200" data-api-endpoint="https://canvas.humboldt.edu/api/v1/courses/13290/files/264766" data-api-returntype="File" /></td>
</tr>
<tr>
<td><img src="https://canvas.humboldt.edu/courses/13290/files/264766/preview" alt="Put.png" width="200" height="200" data-api-endpoint="https://canvas.humboldt.edu/api/v1/courses/13290/files/264766" data-api-returntype="File" /></td>
<td><img src="https://canvas.humboldt.edu/courses/13290/files/264766/preview" alt="Put.png" width="200" height="200" data-api-endpoint="https://canvas.humboldt.edu/api/v1/courses/13290/files/264766" data-api-returntype="File" /></td>
<td><img src="https://canvas.humboldt.edu/courses/13290/files/264766/preview" alt="Put.png" width="200" height="200" data-api-endpoint="https://canvas.humboldt.edu/api/v1/courses/13290/files/264766" data-api-returntype="File" /></td>
</tr>
<tr>
<td><img src="https://canvas.humboldt.edu/courses/13290/files/264766/preview" alt="Put.png" width="200" height="200" data-api-endpoint="https://canvas.humboldt.edu/api/v1/courses/13290/files/264766" data-api-returntype="File" /></td>
<td><img src="https://canvas.humboldt.edu/courses/13290/files/264766/preview" alt="Put.png" width="200" height="200" data-api-endpoint="https://canvas.humboldt.edu/api/v1/courses/13290/files/264766" data-api-returntype="File" /></td>
<td><img src="https://canvas.humboldt.edu/courses/13290/files/264766/preview" alt="Put.png" width="200" height="200" data-api-endpoint="https://canvas.humboldt.edu/api/v1/courses/13290/files/264766" data-api-returntype="File" /></td>
</tr>
</tbody>
</table>
<p> </p>
Link to Button Page Template Header + 4x4 Table
Canvas Page HTML code bellow
<table style="margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="https://canvas.humboldt.edu/courses/13290/files/265092/preview" alt="put your header image here.png" width="654" height="247" data-api-endpoint="https://canvas.humboldt.edu/api/v1/courses/13290/files/265092" data-api-returntype="File" /></td>
</tr>
<tr>
<td>You can put additional information in this cell, you can put class name, crn, instructor info etc..</td>
</tr>
</tbody>
</table>
<p> </p>
<table style="margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td><img src="https://canvas.humboldt.edu/courses/13290/files/264766/preview" alt="Put.png" width="200" height="200" data-api-endpoint="https://canvas.humboldt.edu/api/v1/courses/13290/files/264766" data-api-returntype="File" /></td>
<td><img src="https://canvas.humboldt.edu/courses/13290/files/264766/preview" alt="Put.png" width="200" height="200" data-api-endpoint="https://canvas.humboldt.edu/api/v1/courses/13290/files/264766" data-api-returntype="File" /></td>
<td><img src="https://canvas.humboldt.edu/courses/13290/files/264766/preview" alt="Put.png" width="200" height="200" data-api-endpoint="https://canvas.humboldt.edu/api/v1/courses/13290/files/264766" data-api-returntype="File" /></td>
</tr>
<tr>
<td><img src="https://canvas.humboldt.edu/courses/13290/files/264766/preview" alt="Put.png" width="200" height="200" data-api-endpoint="https://canvas.humboldt.edu/api/v1/courses/13290/files/264766" data-api-returntype="File" /></td>
<td><img src="https://canvas.humboldt.edu/courses/13290/files/264766/preview" alt="Put.png" width="200" height="200" data-api-endpoint="https://canvas.humboldt.edu/api/v1/courses/13290/files/264766" data-api-returntype="File" /></td>
<td><img src="https://canvas.humboldt.edu/courses/13290/files/264766/preview" alt="Put.png" width="200" height="200" data-api-endpoint="https://canvas.humboldt.edu/api/v1/courses/13290/files/264766" data-api-returntype="File" /></td>
</tr>
<tr>
<td><img src="https://canvas.humboldt.edu/courses/13290/files/264766/preview" alt="Put.png" width="200" height="200" data-api-endpoint="https://canvas.humboldt.edu/api/v1/courses/13290/files/264766" data-api-returntype="File" /></td>
<td><img src="https://canvas.humboldt.edu/courses/13290/files/264766/preview" alt="Put.png" width="200" height="200" data-api-endpoint="https://canvas.humboldt.edu/api/v1/courses/13290/files/264766" data-api-returntype="File" /></td>
<td><img src="https://canvas.humboldt.edu/courses/13290/files/264766/preview" alt="Put.png" width="200" height="200" data-api-endpoint="https://canvas.humboldt.edu/api/v1/courses/13290/files/264766" data-api-returntype="File" /></td>
</tr>
<tr>
<td><img src="https://canvas.humboldt.edu/courses/13290/files/264766/preview" alt="Put.png" width="200" height="200" data-api-endpoint="https://canvas.humboldt.edu/api/v1/courses/13290/files/264766" data-api-returntype="File" /></td>
<td><img src="https://canvas.humboldt.edu/courses/13290/files/264766/preview" alt="Put.png" width="200" height="200" data-api-endpoint="https://canvas.humboldt.edu/api/v1/courses/13290/files/264766" data-api-returntype="File" /></td>
<td><img src="https://canvas.humboldt.edu/courses/13290/files/264766/preview" alt="Put.png" width="200" height="200" data-api-endpoint="https://canvas.humboldt.edu/api/v1/courses/13290/files/264766" data-api-returntype="File" /></td>
</tr>
</tbody>
</table>
<p> </p>