Styles & helpful tips
To help with your site edits, content additions, etc., check out the notes, style tips & more below:
Page templates – when/where to use:
Default template
Main section/landing page, like: Academic Programs, Admissions & Financial Aid, Alumni & Parents, and Student life. Features a larger image, with a banner caption.
Default subpage
Page template to use for most sub pages featuring basic content. Optional image banner.
Two column w/ side nav
Sub page template featuring a two column breakout within the editor. Optional image banner.
Note: On pages featuring forms, we suggest using this template and placing contact form short codes within the right column. This provides a nice consistency and proper form field width.
Full Width
Full width template, with a two column breakout within the editor. No side navigation. Great for stand alone pages and/or lead-gen, marketing pages. Optional image banner. Note: Again, on pages featuring forms, we suggest using this template and placing contact form short codes within the right column. This provides a nice consistency and proper form field width.
Programs
This template is used for pages that list out academic programs & degrees in a two column format, like: Majors (A-Z listing), Minors, etc.
No image banner.
Staff Page
This template is used for pages that showcase profile information for staff & faculty.
No image banner.
Headline styles
Heading 1 – typically the page name
heading 2 – a lighter blue color to mix it up a bit
Heading 3 – always includes a rule
Heading 4 to help break up copy below any h3’s
h5 – another callout treatment
h6 – yet another callout treatment. Yay for hierarchy on the page!
Paragraph style, with bold, italic, link style, etc.
Frequently Asked Questions
What is the recommended photo banner size for homepage images?
1600 px x 600 px is ideal image size/ratio
How to style with this button treatment?
1. Find the link reference within the “text”/html tab (top right of the WYIWIG editor)
2. Add class=”btn btn-dark” after the “<a…” reference.
Ex: <a class=”btn btn-dark” href=”#”>
How to get images (with right or left aligned text) to stack out & space properly on pages like International Student testimonials?
Use div class=”clearfix” before and after the blocks of image/text.
Ex:
<div class=”clearfix”>
Your headline/image/copy
</div>