Page Design with AI

Want to jazz up your Canvas pages but don’t know where to start? Join us in Zoom for this demo and make it workshop!

You will have new page design in 15 minutes!

Page design can chunk content and assist in managing cognitive-load for all students.

Claude.ai is recommended generator for producing code. We used the free version to create our examples.

Tips for Creating Page Code with AI Generator

Be specific about the purpose of the page.
State that the page is for Instructure Canvas.
Include the theme, topic, or color scheme in your prompt.
Include the phrase "html for inline design". If page doesn't render correctly in Canvas, reiterate that you don't have access to the CSS.
Include "Page must meet WCAG 2.2 AA standards for accessibility."
Ask that the code be "responsive so that it renders correctly on mobile devices"
Don't close Claude, you may decide to come back for page adjustments.

Sample Prompt

Help me create a unit home page for my hybrid class on human learning theory to use in Instructure Canvas. The html has to be inline code with no style tags or external CSS. I would like a subtle color scheme that appeals to my diverse group of students. I do not want to use buttons. The page must also meet WCAG 2.2 AA standards for accessibility. The page code must be responsive so that it renders correctly on mobile devices.

Secondary Prompts

If the code doesn't look the same when you bring it into Canvas, return to Claude and reiterate that the "code/color/boxes/layout did not render correctly in Canvas. Can you change the code for inline styles? I have no access to CSS."

Suppose that you created a home page and now you want a similar page for weekly agenda, return to Claude and ask it to create a page with the same theme and layout...

Copy Code to Canvas

Use the "Copy" button in the upper right corner of Claude to capture the html code. The button will change from "Copy" to a Checkmark icon.
Open a new Canvas page in "Edit" mode.
Switch to html window by selecting the html icon under the Rich Content Editor.
Paste the code into the html window.
Switch back to RCE page view.
Save the page.

TipsLinks and Buttons on the Canvas Page

Links will need to be set once the page is in Canvas. Follow these steps to preserve the button formatting.

In a second browser tab, open the page that you want the button to navigate to. Copy the page url.
Return to the new page and open the "Link Options" feature. Paste the copied url into the "Link" box.
Select "Done".

Let's head to modules and get started!