Page Layouts

Editors can change the layout of their department or school's website pages as well as section banners. Page layouts change the way page title, banners, and content appear on the page. 

Zones

Our page layouts include different zones where you can add content on your page. This is where you will find Zones A, B, and C on a standard subpage template:

Web page diagram highlighting zones A, B, and C

Page Layout Options

We have five different page layout options:

Page LayoutTop ZoneZone AZone BZone CBreadcrumbsPage TitleSection Banner
Homepage x x x        
Landing Page x x x x x    
Landing Page without Breadcrumbs x x x x      
Standard Subpage   x x x x x x
Standard Subpage without Page Title   x x x x   x

To change a section's page layout, select the section you'd like to update in the Site Structure. 

Changing Page Layouts

Select the Page Layout tab

 In that tab, change the page layout for "SU Website" to the page layout of your choice.

Select Save Changes. 

Banners

If you are using a "Homepage" or "Landing Page" page layout, then you can add a large banner to the top of your page.

Currently we have two different large banner types: Megabanners, and Title Banners.

Megabanner

Screenshot of an example v9 Megabanner content type

Megabanners include:

  • Title (red, all caps) in a white text box in the shape of a paralellogram, centered on top of the background image
  • Background image
  • Color overlay (optional)
  • Two colored triangles on the top left and bottom right corners
  • Small yellow arrow running behind title, on top of background image pointing down toward subtitle/paragraph
  • Optional Subtitle (red, all caps) and paragraph of text beneath banner image

Title Banner

Screenshot of an example v9 Title Banner content type

Title banners include:

  • Heading (red, all caps) in a white text box in the shape of a paralellogram
    • Positioning of textbox on top of the background image can be customized
  • Optional smaller subheading for the "parent" section on top of the heading (black, all caps)
  • Background image
  • Color overlay (optional)
  • Two colored triangles on the top left and bottom right corners

Megabanners and Title banners should be created by, or in consultation with Marketing Communications so that correct branding and code can be implemented. 

If you would like assistance to add a Megabanner or Title Banner to your page, please contact web@seattleu.edu first for guidance and permissions.

If you would like MarCom to create a Megabanner or Title Banner on your behalf, please fill out a Project Request Form.

Section Banners

Screen shot of an example v9 Section banner content type 

If you are using the Standard subpage layout, then any content editor can update and change their section banners through the Section Customizations folder.

Content editors can change these elements of the section banners:

  • Banner Photo
  • Section Banner Title (in the example above: Theatre; red, all caps)
  • Parent section text (in the example above: College of Arts and Sciences; black, all caps)
  • Color of the border line to the left of the banner photo

You can find more detailed instructions on how to customize your section banner in the How To section of this website.