Search
Back

U

Back to Top

Websites Design: Frontier-U Templates

This page is to help keep the design of the Frontier-U website consistent among all of the pages. Below we will discuss the different saved templates when we use them and important notes to watch for.

Template Names & Descriptions

Template 1: The Section Buttons

The Section Buttons

When to use the Section Buttons Template & Important Notes

Template 2: Back to Top & Title

Back to Top & Title

When to use & Important Notes

Template 3: Page Outline for Topic​

Page Outline for Topic

When to use & Important Notes for “Page outline for Topic”

Template 4: Section With File Type

Part A: Section With File Type – Plain

Part B: Section With File Type with “What will you Learn”

Part C: Section With File Type “Multiple Topics & Subsections”

When to Use & Notes

Template 5 : Topics to Split up

Topics to Split up

When to use and Important Notes

Template 1: The Section Buttons

The Section Buttons

Section 1

Section 2

Section 3

Section 4

Section 5

When to Use "The Section Buttons" Template & Important Notes 

At the beginning of a department section. These make up the main topics that a department will be broken into. 

Important Notes

  • Remember to change the icon image 
  • Make sure the links lead to the correct page
  • Keep the name consistent with the page title it’s leading to

 

Template 2: Back to Top & Title

Back to Top & Title

Back

U

Back to Top

Title of The Page

When to Use The "Back to Top & Title Template" & Important Notes

This Template is used for every page. Make sure you link the “Back Button” the previous page.

Important Notes:

  • Make sure the “Back to Top” button is linked to the top of the page
  • Make sure the “Back” button links back to the previous page
  • Title the page specific to the department and subject matter
  • the spacer at the top is important to leave so there is no overlap with the header

Template 3: Page Outline For Topic

Page Outline for Topic

Write an overview of what this page will cover i.e. This is an Intro paragraph that gives users a brief overview of what they’re going to learn from this page.

The Page Title

Section 1

Section 1 Part A

Section 1 Part B

Section 2

Section 2 Part A

Section 2 Part B

Section 2 Part C

When to Use The "Page Outline For Topic" Template & Important Notes

This is the outline for each page on Frontier-U. It breaks each page up nicely into sections. 

Important Notes:

  • Make sure the Anchor links are correct
  • If the “link” just has a # symbol in the box, it will reload the page in an annoying way – it’s better to just leave blank until you link it to something!

Template 4: Section with a File Type

Template 4 Part A: Section With a File Type - Plain

Section Topic A Title

This will be a description of when we use the above template. 

A File The User Will Download or a Topic’s Lesson Page

For Video Files/ Video Presentations 

Upcoming Video Files/ Video Presentations 

If There is a Quiz For This Topic

If This is Taking You to a Website

Template 4 Part B: Section With a File Type with "What you Will Learn"

Section A Title (should match its linked title)

Brief description of what the section is about

What You Will Learn in this Section:

  • Learning item 1
  • Learning item 2 

Title of written content that can be downloaded (Orange icon = available content)

Title of written content that can be downloaded (grey = unavailable content)

Title of Video content

Title of quiz – Quiz

If This is Taking You to a different webpage/website

Template 4 Part C: Section With File Type "Multiple Topics & Subsections"

Section 1 Title (should match its linked title)​

Topic A in Section 1 (should match its linked title)​

What You Will Learn in this Section:

  •  Learning item 1
  • Learning item 2

File 1

Quiz 1

Topic B in Section 1 (should match its linked title)

What You Will Learn in this Section:

  •  Learning item 1
  • Learning item 2

File 1

Quiz 1

When to Use The "Section With File Type" Templates & Important Notes

This is for when a subtopic is used on a page and the content that goes with that subtopic (downloadable file, video file, quiz, additional webpage or Quiz). 

Important Notes:

  • Icon in our Frontier Orange (Code: EE5521,  one of our “global colours”) – Means that content is available
  • Icon in our Unavailable Content Grey (Code: 7E7E7E,  one of our “global colours”) – Means that content is unavailable
  • Make sure that the arrows have the proper links 
  • If the “link” just has a # symbol in the box, it will reload the page in an annoying way – it’s better to just leave blank until you link it to something! Whether that’s an Anchor link (that takes you to another section on the page, or to an external site/webpage.. or to download content)

Template 5: Topics to Split up

Topics to Split up

This is Area 1

This is a description of the areas this section includes.

This is Area 2

This is a description of the areas this section includes.

This is Area 3

This is a description of the areas this section includes.

When to Use The "Topics to Split-up" Template & Important Notes

We don’t really use this template for any of our pages right now. I like the way this looks and it might be beneficial for some topics. 

Page Material

Shortcuts

Copy & Pasting

Copy & Pasting betweeen Pages:

You can copy & paste between pages within a website. This is perfect for when you already have a page created with a certain style for a section that you want to use on the new page you’re creating. 

Example Below:

 I want to use this entire section’s style on a new page. Right click on the white dots and select “copy” 

Paste it into the boxed section at the bottom of the page

Notes: 

  • Always make sure to change the links
Scroll to Top