Templates

HTML templates can be used to create engaging and interactive content layouts within a Brightspace course. Templates include both text layout pages, such as introduction and conclusion layouts, and dynamic pages with interactive elements, such as accordions and tabs.

Applying a template to an existing page will overwrite the content and you will lose your work. CPI recommends selecting and applying the HTML template before adding content (images, videos, etc.) in the content editor.

1 Benefits
2 Accessing Templates
3 Template Options
- 3.1 Interactive Elements.html
- 3.2 Static Elements.html
- 3.3 T00_blank.html
- 3.4 T01_intro.html
- 3.5 T02_module_intro.html
- 3.6 T03_basic page.html
- 3.7 T04_example page.html
- 3.8 T05_example page 2.html
- 3.9 T06_conclusion.html
4 Copying/Pasting Elements to Different Templates
- 4.1 Step-By-Step Copying and Pasting Template Elements

Benefits

Templates improve the look and feel of courses, and can help you organize your content more meaningfully by adding page elements such as differently-aligned images, embedded videos, etc. HTML templates are designed to meet Universal Design for Learning and Accessibility standards (WCAG) and include formatting styles, such as heading levels and paragraphs, that help create content that is accessible for assistive technologies.

Accessing Templates

Templates can be found in the Page editor in the Content area, accessible by creating a new Page or editing an existing one. For the sake of making use of Templates (which overwrite content in the Page editor when added), it is recommended that they be used in a new Page. Learn more about creating pages in the Pages article.

In the Page editor, select the Select Template option just above the Brightspace text editor:

View of Page editor. Select Template link is outlined

The Select Template option will only appear in the Page editor

This will display a drop-down menu of all the template options that are currently available.

Template Options

The following are the different template options found under the Select Template Menu. Each provide different functions to experiment with. They are created with HTML code, which is why they end with “.html”. Instructors are not required to know HTML code to use templates.

Interactive Elements.html

Contains a list of interactive elements that instructors can copy and paste into other templates to change their layout and/or keep students engaged. “Interactive” in this sense refers to elements that require students to click objects to reveal further information, such as tabs and accordions.

CPI recommends for accessibility purposes that instructors limit the amount of interactive elements they combine in their lesson materials. This will make lesson navigation easier to understand.

Static Elements.html

Contains a list of static elements that instructors can copy and paste into other templates to change their layout and/or keep students engaged. “Static” in this sense refers to elements that require no further interaction to see all the information, such as images, tables, callouts, and more.

T00_blank.html

A blank space that only contains a header image, space for content, and the Brock logo at the bottom. This template would be where instructors can paste elements from other templates to create their own custom page with their own collection of elements.

T01_intro.html

This page layout features a full-screen image for visual impact, and a clean area for course description, which is ideal for a Course Introduction page. This page is set up so that the intro text will appear in front of the banner, creating a unique visual.

T02_module_intro.html

Features a prominent banner image across the top and a numbered list below. This page is set up so that part of the module intro text will appear in front of the banner, creating a unique visual. This page can easily accommodate more content than the T01_intro.html page. The numbered list can be used to list a module’s learning objectives which makes it ideal as the first page of a module in a course.

T03_basic page.html

A basic page similar to the T00_blank.html template. Includes a callout element and a different banner image.

T04_example page.html

An example page showing how various elements can be combined to create an interesting lesson. Making use of callouts, floating images, and one interactive element can keep students engaged in the lesson material.

T05_example page 2.html

An alternate example page to T04_example page.html showing how various other elements can be combined to create an interesting lesson. Making use of callouts, floating images, and one interactive element can keep students engaged in the lesson material.

T06_conclusion.html

A versatile page that was created with module conclusions in mind. Using a consistent layout for conclusions will help signal to course participants that they have reached the end of a section of the course content.

Copying/Pasting Elements to Different Templates

Any element that is found in one template page can be copied and pasted into another. Similarly, you can easily remove/delete elements of templates that you don’t like/need and keep those that you do.

Template elements must be pasted into another template to maintain their structure and formatting. This is where the T00_blank.html template comes in handy.

Template elements in the Interactive and Static elements templates are the easiest to copy, as they come with “start copy” and “end copy” lines, so users know where to start and end a highlight for a copy.

GIF showing a mouse highlighting the Shaded Callout Start copy line, moving down across the element, and stopping at the Shaded Callout End Copy line

The start and end copy lines can be deleted upon the element being pasted into its destination.

Pasting elements is a little tricky, as it normally requires a second tab or window be open in the user’s browser. One tab should be open with the page with a template that is being copied from, and the other needs to be open with the destination page/template.

This is because opening new templates in the same Page editor overwrites any information that was in the editor, meaning if a user wants to copy multiple elements, they cannot keep going back and forth to copy new elements in the same window as it will constantly reset their progress.

Step-By-Step Copying and Pasting Template Elements