Website Style Guide
This page includes general style guidelines for Hunter's WordPress theme:
Note: Style instruction is included everywhere in the CMS, please observe!
All copy should always be left aligned on the website.
- If copy is supplied to you as centered, change to left aligned
- This does not apply to supplied documents (PDF, MS Word, etc)
Rules separate content on the page and are included on most modules.
- Rules are on automatically on
- Use bottom rules between each module, except above sections that include a background color or image (quote, stats)
- For the last module on the page, turn off the rule
Left navigation is displayed as the Left Column Menu.
- Keep consistent - site navigation that changes as from one section of the website to the next is confusing to the user
- Short simple, and consistent, naming is best
- Don't link to outside websites in the left navigation
- When site sections include About and Contact pages:
- About is always first in the left column menu
- Contact is always last in the left column menu
Use bulleted and numbered lists to help identify key points.
- Copy should be short and to the point
- Only use numbered lists for a list of items that go in consecutive order, otherwise use bulleted lists
- CTA links are usually specifically related to the content it is sitting next to
- Big Buttons are more prominent and can be used for:
- a big idea that entire page is talking about
- a separate, but vitally important, area of the website
Use module components consistently.
- Section headers (H2s) - if using on one section of a page, use on all
- Header text size (Medium or Large) - when using the same module multiple times on a page ensure the headers sizes are the same
- If using color blocks on multiple modules on a page they should be the same color
Image/text modules allow image placement on left or right.
- Modules include: 'Hero - Flexible', '1/2 and Text' and '2/3 and Text'
- In general, be thoughtful about image placement
- For multiple modules it's best to alternate the images (left/right) going down the page
- Alternately you could place them all on one side, best for special lists
A background color may be applied on certain modules.
- Modules include: image/text modules '1/2 and Text' and '2/3 and Text' and the grid module 'Grid - Custom Content'
- Use this to separate content from the rest of the page - for example a special promotion or event that is new or temporary
- Be sure to turn bottom rules OFF of the module directly above any module that has the background color turned on, otherwise a rule will display against the background color
- There is only one background color
Color blocks of purple or yellow may be displayed next to the image of some modules (Image 1/2 and Text, Image 2/3 and Test, Slideshow/Video).
- Modules include: image/text modules '1/2 and Text' and '2/3 and Text' and 'Slideshow/Video'
- This is useful to highlight the content, but is best used on special marketing pages or on a landing page to help it stand apart from the other pages in that section
- If not needed select Color Block: None
Color overlays are used on the Promo module to dim the photo so white text may be easily read over it.
- Choice is between gray and purple
- Purple is ideal for more Hunter-branded promotions
- Note purple does looks dull over very warm images and gray may be a better choice
- If adding promotion to Right Column use Custom Content module where you can choose an overlay on the image to match the main promotional module used elsewhere
Copy with sequential instructions example:
Navigate to Records and Enrollment > Enroll Students > Enrollment Requests.
- Use greater than symbols between events clicks
- Copy is in italics
- Don't use arrows (→) as they are used as call to action links