Creating Page Buttons in PowerPoint

Custom Home Pages are a great way for your students to navigate to specific places in your course that are important. This allows you to have more navigation control over your course than the Course Menu Sidebar and also gives you freedom and flexibility to name things whatever you'd like. PowerPoint can be used to create custom image that you can then save, edit, and upload to Canvas to use as buttons on a home page (or any page). Any image editing software can be used to create these custom images and buttons, but since PowerPoint is software that the University provides and works regardless of what kind of computer you have, it is going to be used as the example software.

Open PowerPoint

Create a blank presentation and use a blank slide. Using the Drawing tools and Text Box, create your button.

For instructions on how to draw or edit a shape in PowerPoint, please visit this site.

screenshot of powerpoint slide with a dark blue rectangle in the middle and the word "Readings" in white text in the rectangle

Once you're satisfied with how your button looks, click on File. Click on Export (1), Change File Type (2), and choose either PNG or JPEG (3) as your file type - either works in Canvas. Click Save As (4) and choose where to save your image.

screenshot of file export options in powerpoint with sections 1-4 highlighted in red rectangles

A popup will appear asking which slide you want to export. Choose "Just This One" so you export the button as a single image. If you have created multiple buttons on multiple slides, you can click "All Slides."

popup of powerpoint option to export all slides or just one slide with "just this slide" highlighted in a red rectangle

Find your image in your files and double click on it to open it. The default program it opens in will likely have an edit option to crop the image. If you're on a Windows computer, it will open Photos. Click on Edit & Create (1) and choose Edit (2) to crop the photo down to just the edges of the button and get rid of any extra white space. Once you're done, Save.

screenshot of button in image editing software with edit image highlighted in red rectangle

Go to your Canvas Course

Navigate to your course in canvas.pitt.edu. Click on Pages (1) in the course navigation menu and then click the "+Page" button (2) if you are creating a new page.

screenshot of pages with Page navigation and "+Page" highlighted in red rectangles

In your page, click on the embed image button (1) to quickly choose and upload an image saved on your computer. Click on the drop down arrow to the right of the embed image button to access images in your Course and User Files (2).

screenshot of the RCE with the image button and dropdown menu highlighted and labeled 1-2

A popup will appear to choose your image. Drag and drop the image you want to use from your files or click anywhere in the upload image box to browse files on your computer.

screenshot of upload image popup with the drag and drop box highlighted in red

After choosing the image you want, it will appear as a preview in the popup window. If the image has important information on it, you will want to include Alternative Text (1) for blind or low-vision users with screen readers. Choose Embed Image (2) so the image will be displayed. Click Submit (3) when finished.

screenshot of upload image popup with an image of a blue rectangle with white text that says "Readings" loaded in. sample alt text is shown and sections 1-3 are highlighted in red rectangles.

Link Your Image

Click on the image on your page that you want to link (1). You will know that you have clicked on the image and selected it because it will have blue re-size squares on the corners of the image. Once it is selected, clicking on the Link button (2) directly will open a popup window to insert an External Link (any URL outside of your course). Click on the down arrow to the right of the Link button to choose Course Links (3) if you wish to link your image to course content such as a module, quiz, or page.

screenshot of "readings" image embedded in page. "readings" image and course link button are highlighted in sections 1-3

If you click on Course Links, a sidebar menu (1) will appear to the right. You can use the Search bar (2) to look for the specific content that you wish to link to or simply use the drop down arrows (2) to find the content that you're looking for (4). You can see if the content you're linking to is published or not by the green check marks to the right of it.

screenshot of image link sidebar options. sections 1-4 are highlighted in red rectangles.

Once you've linked your image, it will flash yellow quickly to indicated that the link has been created successfully. You can check that it is linked by hovering over the image. A Link Options button will appear next to your Image Options button now.

screenshot of image and link options shown on "readings" image

If you click on the Link Options button, a sidebar menu will appear to the right. You can now edit or replace the current URL (1). Click on the Done button (2) when finished. If you made a mistake and need to re-link the image to a different Course Link, you will have to remove the current link by clicking on the down arrow (3) next to the link button and choosing "Remove Link" and then following the above steps again for the correct Course Link.

screenshot of link options sidebar with sections 1-3 highlighted

When you are finished, click Save or Save & Publish.

screenshot of save and save & publish buttons