How to create page layouts

Applies to: T4 Site Manager
Last updated: 24/02/2015
Summary: How to create layouts using rows and columns

Before you start

Please see how to structure a basic page.

Examples of standard page layouts are provided below. If you need a custom layout, please contact us. Don’t create your own custom layouts.

Homepage layouts should be created in consultation with the Web Editor team.

Basic page layout

When you add content to the ‘body text’ field in a normal content block, the content will automatically fill the space between the left navigation menu and the right edge of the double-line border beneath the page title.

Pages with right-hand columns

The right-hand column should be used for related material or images. When using a right-hand column, content should be within styled containers known as modules.

To create a page with a right-hand column, you need to use the layout grid.

The layout grid is made up of rows and columns and sits within a layout-container. Most pages will only have one row containing two columns, but more advanced pages such as homepages may use multiple rows containing two or three columns.

The standard layout for a page using one wide central column and one narrow right-hand column within a single row looks like this:

This is the Undergraduate courses page on the Faculty of Health Sciences website.

It uses the following code:

When using column <div>s, they must always be wrapped within a row <div>, which must always be wrapped within the layout-container <div>. Always use the full layout code, never leave out the row or layout-container <div>s.

The wide column <div> has a class of column grid_8 and the narrow right column <div> has a class of column grid_4. Some pages (eg homepages) will use three columns of column grid_4.

Once you have set up the grid, you can use modules to add content to the right-hand column.