Template Details

How do the new templates work?

The new templates are section-, or row-based. Each page is made up of a header section, with five additional sections, or rows. (By default, only three sections are visible.)

Example of template section layout, showing a web page divided into five rows with a header row

Example of section with one column

Example of a one-column section.

(Click to enlarge)

Example of section with two columns, with an additional column below

Example of a two-column section. The third region displays as a single column below the two columns.

(Click to enlarge)

Example of section with three columns

Example of a three-column section.

(Click to enlarge)

Creating pages in the template system follows the same process as the previous template versions. Pages are still created by choosing the "New" option in OU Campus and selecting an option from the choices available. You will notice new page layout options that take advantage of the section-based templates. Choose the predefined option that best suits the content you will be adding to the page, keeping in mind that you can leave unnecessary regions empty, and show and hide sections as necessary.

Editing Page Properties

Check out the page so that the light bulb icon is yellow, and click on the "Properties" button near the top of the screen:

Check out the file and click on the page properties button.

Scroll to find the "Page Header Style" and "Section Layouts" areas within the page parameters. Use the drop-down fields to choose the layout for the section you are modifying:

Options for editing page parameters.

Using Page Parameters Gadget

Click on the Gadget icon in the upper right corner of OU Campus:

Icon to open gadget sidebar in OU Campus

Expand the "Page Parameters" gadget. Scroll to find the "Page Header Layout" and "Section Layouts" areas. Use the drop-down to choose a layout for the section you are modifying:

Expanded page parameters gadget showing drop-down options.

 

Following the instructions above ("Adjusting Section Layouts,") you may also choose from a variety of header styles for your pages, by changing the value in the "Page Header Styles" drop-down:

  • Hide Header: Does not display a page header
  • Text-only: Displays the page title as text
  • Full-width: Displays a full-bleed image behind the text page title
  • Parallax: Displays a header image with a scroll effect behind the text page title