University Marketing and Communications

Page Design and Layout

Banner Image: 360 | Banner Image: Text Popup | Banner Image: Text Over Image | Boxed SectionsFooter OptionsImage Sizes | Page Layouts | Layout: Hero With Intro | Layout: Hero Witout Intro | Layout: Feature | Layout: Feature Video | Layout: Banner No Sidebars | Layout: Banner Left Nav | Layout: Banner Right Sidebar | Layout: Banner Both Sidebars | Layout: Banner Video | Layout: Sub-banner No Sidebars | Layout: Sub-banner Left Nav | Layout: Sub-banner Right Sidebar | Layout: Sub-banner Both Sidebars | Layout: Sub-banner Video | Publication: Old News Story No Picture, No Sidebar | Publication: Old News Story Picture in Body, No Sidebar | Publication: News Story | Publication: Magazine Story No Picture | Publication: Magazine Story | Right Sidebar

Style Guide | Style and Format | Content Widgets | Image and Multimedia Widgets | Additional Functionality

Boxed Sections

1/3 2/3

This layout creates two columns. The left column is 1/3 of the content area and the right column is 2/3 of the content area.

Vestibulum eget suscipit nisl. Sed malesuada eu nisi euismod cursus. Suspendisse pulvinar dictum laoreet. Suspendisse congue tempor lorem id venenatis. Aliquam aliquam in odio in pulvinar. Mauris nisl leo, placerat in felis id, porttitor fringilla quam. Phasellus nec augue ipsum.

Nunc porta odio nisi, a pharetra sem interdum nec. Nam vitae tempus mauris, eu suscipit elit. Mauris nec felis est. Cras et magna vel ex finibus malesuada in ut ante. Mauris vehicula, turpis in tempus mollis, tellus nulla aliquet orci, eu rhoncus neque est eu orci. In fringilla urna a justo fermentum, sit amet scelerisque risus interdum. Donec aliquet bibendum quam. Pellentesque dictum sem eros, a auctor nibh blandit non. Integer tristique, erat quis hendrerit dapibus, diam mauris rutrum orci, vitae sagittis eros nibh quis libero. Praesent efficitur interdum ex, eget scelerisque tellus mollis vitae.

Aliquam viverra erat tortor, eget pretium lorem tincidunt et. In hac habitasse platea dictumst. Maecenas nisl mi, fermentum et velit id, ullamcorper laoreet risus. Sed vulputate nulla at felis tincidunt suscipit. Maecenas sapien justo, consequat sed aliquam ac, pulvinar eu justo. Duis nunc tellus, volutpat eu nibh eget, lobortis laoreet sapien. Sed nec congue risus. Vivamus gravida ipsum eu massa hendrerit accumsan. Vestibulum sodales rutrum velit ut efficitur. Sed in nisi et elit ultricies blandit. Suspendisse id consectetur lorem, blandit tincidunt velit. Aenean cursus magna nulla, et placerat urna faucibus ut.

2/3 1/3

This layout creates two columns. The left column is 2/3 of the content area and the right column is 1/3 of the content area.

Vestibulum eget suscipit nisl. Sed malesuada eu nisi euismod cursus. Suspendisse pulvinar dictum laoreet. Suspendisse congue tempor lorem id venenatis. Aliquam aliquam in odio in pulvinar. Mauris nisl leo, placerat in felis id, porttitor fringilla quam. Phasellus nec augue ipsum.

Nulla facilisi. Vestibulum diam sapien, condimentum consectetur magna pellentesque, commodo egestas nibh. Sed finibus sollicitudin dolor, in suscipit diam maximus ac. Vestibulum tristique tortor eget tellus rutrum, sed eleifend mauris vulputate. Praesent mollis metus vitae massa sagittis, sit amet fringilla arcu feugiat. Nunc aliquam nec dolor at finibus. Phasellus feugiat a justo ut dignissim. Vivamus in sapien sed sem tempus scelerisque. Nam dignissim sapien non mattis mollis. Morbi ultrices molestie erat, ac viverra turpis tristique vitae. Sed fermentum purus quis mi blandit, quis posuere justo facilisis. Donec cursus blandit pellentesque. Fusce consectetur, libero a tristique lobortis, metus quam elementum ex, sed ullamcorper odio justo quis turpis. Mauris egestas ante eget magna finibus, vel condimentum erat laoreet.

Nunc porta odio nisi, a pharetra sem interdum nec. Nam vitae tempus mauris, eu suscipit elit. Mauris nec felis est. Cras et magna vel ex finibus malesuada in ut ante. Mauris vehicula, turpis in tempus mollis, tellus nulla aliquet orci, eu rhoncus neque est eu orci. In fringilla urna a justo fermentum, sit amet scelerisque risus interdum. Donec aliquet bibendum quam. Pellentesque dictum sem eros, a auctor nibh blandit non. Integer tristique, erat quis hendrerit dapibus, diam mauris rutrum orci, vitae sagittis eros nibh quis libero. Praesent efficitur interdum ex, eget scelerisque tellus mollis vitae.

Even Columns

This snippet can be used to create a certain number of evenly spaced columns. This example shows what a two-column layout looks like.

Nunc porta odio nisi, a pharetra sem interdum nec. Nam vitae tempus mauris, eu suscipit elit. Mauris nec felis est. Cras et magna vel ex finibus malesuada in ut ante. Mauris vehicula, turpis in tempus mollis, tellus nulla aliquet orci, eu rhoncus neque est eu orci. In fringilla urna a justo fermentum, sit amet scelerisque risus interdum. Donec aliquet bibendum quam. Pellentesque dictum sem eros, a auctor nibh blandit non. Integer tristique, erat quis hendrerit dapibus, diam mauris rutrum orci, vitae sagittis eros nibh quis libero. Praesent efficitur interdum ex, eget scelerisque tellus mollis vitae.

Nulla facilisi. Vestibulum diam sapien, condimentum consectetur magna pellentesque, commodo egestas nibh. Sed finibus sollicitudin dolor, in suscipit diam maximus ac. Vestibulum tristique tortor eget tellus rutrum, sed eleifend mauris vulputate. Praesent mollis metus vitae massa sagittis, sit amet fringilla arcu feugiat. Nunc aliquam nec dolor at finibus. Phasellus feugiat a justo ut dignissim. Vivamus in sapien sed sem tempus scelerisque. Nam dignissim sapien non mattis mollis. Morbi ultrices molestie erat, ac viverra turpis tristique vitae. Sed fermentum purus quis mi blandit, quis posuere justo facilisis. Donec cursus blandit pellentesque. Fusce consectetur, libero a tristique lobortis, metus quam elementum ex, sed ullamcorper odio justo quis turpis. Mauris egestas ante eget magna finibus, vel condimentum erat laoreet.

This is a three-column layout.

Vestibulum dolor sit amet, consectetur adipiscing elit. Morbi in nibh volutpat, feugiat erat sed, viverra leo. Donec sit amet bibendum arcu. Maecenas sodales enim tincidunt, dapibus nulla non, efficitur nisi. In hac habitasse platea dictumst. Curabitur ullamcorper interdum sodales. Sed sodales metus eget nisl tempus, et ullamcorper neque accumsan. Sed sit amet nisl arcu.

Nunc porta odio nisi, a pharetra sem interdum nec. Nam vitae tempus mauris, eu suscipit elit. Mauris nec felis est. Cras et magna vel ex finibus malesuada in ut ante. Mauris vehicula, turpis in tempus mollis, tellus nulla aliquet orci, eu rhoncus neque est eu orci. In fringilla urna a justo fermentum, sit amet scelerisque risus interdum. Donec aliquet bibendum quam. Pellentesque dictum sem eros, a auctor nibh blandit non. Integer tristique, erat quis hendrerit dapibus, diam mauris rutrum orci, vitae sagittis eros nibh quis libero. Praesent efficitur interdum ex, eget scelerisque tellus mollis vitae.

Aliquam viverra erat tortor, eget pretium lorem tincidunt et. In hac habitasse platea dictumst. Maecenas nisl mi, fermentum et velit id, ullamcorper laoreet risus. Sed vulputate nulla at felis tincidunt suscipit. Maecenas sapien justo, consequat sed aliquam ac, pulvinar eu justo. Duis nunc tellus, volutpat eu nibh eget, lobortis laoreet sapien. Sed nec congue risus. Vivamus gravida ipsum eu massa hendrerit accumsan. Vestibulum sodales rutrum velit ut efficitur. Sed in nisi et elit ultricies blandit. Suspendisse id consectetur lorem, blandit tincidunt velit. Aenean cursus magna nulla, et placerat urna faucibus ut.

This is a four-column layout.

Vestibulum dolor sit amet, consectetur adipiscing elit. Morbi in nibh volutpat, feugiat erat sed, viverra leo. Donec sit amet bibendum arcu. Maecenas sodales enim tincidunt, dapibus nulla non, efficitur nisi. In hac habitasse platea dictumst. Curabitur ullamcorper interdum sodales. Sed sodales metus eget nisl tempus, et ullamcorper neque accumsan. Sed sit amet nisl arcu.

Nunc porta odio nisi, a pharetra sem interdum nec. Nam vitae tempus mauris, eu suscipit elit. Mauris nec felis est. Cras et magna vel ex finibus malesuada in ut ante. Mauris vehicula, turpis in tempus mollis, tellus nulla aliquet orci, eu rhoncus neque est eu orci. In fringilla urna a justo fermentum, sit amet scelerisque risus interdum. Donec aliquet bibendum quam. Pellentesque dictum sem eros, a auctor nibh blandit non. Integer tristique, erat quis hendrerit dapibus, diam mauris rutrum orci, vitae sagittis eros nibh quis libero. Praesent efficitur interdum ex, eget scelerisque tellus mollis vitae.

Aliquam viverra erat tortor, eget pretium lorem tincidunt et. In hac habitasse platea dictumst. Maecenas nisl mi, fermentum et velit id, ullamcorper laoreet risus. Sed vulputate nulla at felis tincidunt suscipit. Maecenas sapien justo, consequat sed aliquam ac, pulvinar eu justo. Duis nunc tellus, volutpat eu nibh eget, lobortis laoreet sapien. Sed nec congue risus. Vivamus gravida ipsum eu massa hendrerit accumsan. Vestibulum sodales rutrum velit ut efficitur. Sed in nisi et elit ultricies blandit. Suspendisse id consectetur lorem, blandit tincidunt velit. Aenean cursus magna nulla, et placerat urna faucibus ut.

Nunc aliquam nec dolor at finibus. Phasellus feugiat a justo ut dignissim. Vivamus in sapien sed sem tempus scelerisque. Nam dignissim sapien non mattis mollis. Morbi ultrices molestie erat, ac viverra turpis tristique vitae. Sed fermentum purus quis mi blandit, quis posuere justo facilisis. Donec cursus blandit pellentesque. Fusce consectetur, libero a tristique lobortis, metus quam elementum ex, sed ullamcorper odio justo quis turpis. Mauris egestas ante eget magna finibus, vel condimentum erat laoreet.

This is a five-column layout.

Nunc porta odio nisi, a pharetra sem interdum nec. Nam vitae tempus mauris, eu suscipit elit. Mauris nec felis est.

Aliquam viverra erat tortor, eget pretium lorem tincidunt et.

Nunc aliquam nec dolor at finibus. Phasellus feugiat a justo ut dignissim.

Vestibulum dolor sit amet, consectetur adipiscing elit. Morbi in nibh volutpat, feugiat erat sed, viverra leo.

Instructions

Use one of the Boxed Sections snippets to make columns on the page.

View the footer.

Call to Action Buttons

Buttons can be added just above the footer. Choose from Recruitment buttons (Request Information, Schedule a Visit, and Apply) with predetermined link destinations, the Give button with a customizable link, or all buttons.

Contact Information

Customize the contact information with department name, link, address, phone number, fax number, toll-free number, email, and customizable Contact Us link.

Social Icons

Add links to social media platforms.

Instructions

Footer options are set in the Section Properties file found in the root folder.

Back to widget index

Image Sizes

170 Square

Night photo of the husky statue on campus.

250 Square

Night photo of the husky statue on campus.

Personnel

Night photo of the husky statue on campus.

350 Sidebar

Night photo of the husky statue on campus.

515 Sub-banner

Night photo of the husky statue on campus.

800 Banner

Night photo of the husky statue on campus.

1024 Feature

Night photo of the husky statue on campus.

1600 Feature

Night photo of the husky statue on campus.

Instructions

Images are created with the Image Editor Gadget and inserted on the page using the Insert/Edit Image icon in the TinyMCE Editor.

Back to widget index

Page Layouts

View a page with: Hero With Intro | Hero Without Intro | Feature | Feature Video | Banner With No Sidebars | Banner With Left Nav | Banner With Right Sidebar | Banner With Left Nav and Right Sidebar | Banner Video | Sub-banner With No Sidebars | Sub-banner With Left Nav | Sub-banner With Right Sidebar | Sub-banner With Left Nav and Right Sidebar | Sub-banner Video | Text Popup | Text Over Image | Old News Story No Picture, No Sidebar | Old News Story Picture in Body, no Sidebar | News Publication Story | Magazine Story No Picture | Magazine Publication Story

1/3 2/3 Content Area

This is the 1/3 column space. It is smaller than the 2/3 space. It takes up 1/3 of the content area.

This is the 2/3 column space. It is larger than the 1/3 space. It takes up 2/3 of the content area. This layout uses the Boxed Sections 1/3rd 2/3rd Snippet.

2/3 1/3 Content Area

This is the 2/3 column space. It is larger than the 1/3 space. It takes up 2/3 of the content area. This layout uses the Boxed Sections 2/3rd 1/3rd Snippet.

This is the 1/3 column space. It is smaller than the 2/3 space. It takes up 1/3 of the content area.

Even Columns

This is an example of two even columns. Both sections are the same size.

This is the second column. This is made by putting content in two cells of the Boxed Sections Even Columns Snippet.

Instructions

Back to widget index

Instructions

Use the Sidebar Right: Box Snippet or the Sidebar Right: No Box Snippet.

Back to widget index

Sidebar: Graduate Program Contact

Instructions

Add the appropriate assets to the Sidebar Right: Graduate Program Contact Snippet.

Back to widget index