How to create page layouts (T4 legacy templates only)

These guides are specific to content in T4's legacy templates. If your content uses T4's responsive templates, please see our user guides for web publishers in SharePoint.

Last updated: 24/02/2015

Before you start

Please see how to plan and structure your content.

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 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.