Page Layouts

Laying out your content on the page is the most difficult step in creating your page. We've done the heaving lifting for you in providing a template with colors, fonts and elements, but it's still up to you to put it together in an easy to use format for your readers. On this page we've compiled some common page types as well as some layouts for each type to get you started. We recommend you start with one of our layouts first, and then modify it to suit your needs rather than starting from scratch.

Hero Banners on Layouts
These page layouts have been taken from real pages. Some of these pages may use different types of hero banners. The hero banner area can be thought of as separate from page content, so feel free to choose a different hero banner style than in the examples. If the layout uses an overlapping right column card, you can easily put that below the banner or if not using a banner, it can sit below the level 1 heading.

Basic Layouts

Single Column

An example of a page with a single column layout.

Left Navigation

An example of a page with a left side navigation.

People or Organizational Contact Pages

Multiple Units

An example of a contact page with multiple units.

Single Unit

An example of a contact page with a single unit.

Priority Methods

An example of a page with the priority methods layout.

USU

An example of a page with sections of contact information for several USU departments.

Navigational Pages

Registrar

An example of a navigational page with several different cards to direct users to different pages.

Scheduling

An example of a navigational page with several different options to schedule rooms or appointments.

AIS Home Page

An example of the Academic and Instructional Services home page with different cards to direct users to various resources.

Engineering Programs

An example of a navigational page from Engineering with information for each program listed in a card with links.

Information Heavy Pages

Commencement

An example of a Commencement website page with several sections of information.

Tuition Payment

An example of a Tuition Payment website page with several sections of information.

Policy

An example of a Policy website page.

News Article Pages

USU Today

An example of a USU Today news article.

Large Image

An example of a website page with a large image at the top.

Carnegie

An example of a Carnegie web page.

Events

Generic

An example of a generic events page on a website.

Admissions

An example of an Admissions event page on a website.

Program Outline Pages

Engineering

An example of an Engineering program outline page.

USU Online

An example of a USU Online program outline page.

Statewide Campuses

An example of a Statewide Campuses program outline page.

HEP Program

An example of a HEP Program outline page.

Home Pages

AIS

An example of a home page from AIS.

UMAC

An example of a home page from UMAC.

Sample

A sample home page layout.