Full Page Walkthrough Video

Want to watch a walkthrough of creating a full page? Check out this video, in which Eva demonstrates creating the Module Overview Page Template.

Watch the Walkthrough Video

HOW TO COMBINE DESIGN ELEMENTS TOGETHER

You will likely start out by adding individual design elements to your Canvas content. Beautiful Canvas Pages Made Easy really comes to life when you start combining, though. Let’s take a look!

GIF of PPAP by Daimaou Kosaka - Pen, Apple = Apple Pen

Let’s say you want a box that looks something like this: a red emphasis box with an Important icon, some text, a list, and a red button.

Important Assignment Information

To complete this assignment, make sure you do the following.

Create a Word document.
Give it a title.
Write your paper.
Save the file.
Upload it as your submission in Canvas.

Canvas Dashboard

This box includes the following:

Emphasis Box with Important Icon
Ordered List: Timeline
Red Button Without Icon

It also applies the Whole Page Styles, but let’s worry about that later.

The combination process is simple.

Step 1: Copy and Paste Emphasis Box

We’ll start with the Emphasis Box, since this is the container for everything else. We’ll copy and paste it into the Visual Editor, deleting the selection line that carries over.

GIF showing copying and pasting emphasis box - cursor selects entire box, copies it, goes to Canvas editor, and pastes it

Step 2: Copy and Paste List

Then, we’ll add the timeline list after the placeholder paragraph.

GIF showing copying and pasting list - cursor selects entire list, copies it, goes to Canvas editor, and pastes it

Step 3: Copy and Paste Button

Then, we’ll add the button after the list, deleting the selection bars that carry over.

GIF showing copying and pasting button - cursor selects entire button, copies it, goes to Canvas editor, and pastes it

Step 4: Apply Whole Page Styles

This won’t look quite identical, because it doesn’t have the Whole Page Styles applied. So the final finishing touch is to use the instructions on the Whole Page Styles page to apply the recommended styles (restrict page width and increase body font size).

GIF showing whole page styles - cursor copies required code, toggles to HTML editor, and pastes it - repeats for top and bottom code