Website Style Guide

Selecting a Template

Steps to Selecting a Template

  • Start by creating a new page.
  • Make sure that you are in the backend editor.  If you are in it, it will show classic mode as an option instead. Screen Shot 2016-03-08 at 9.18.28 AM
  • Select the template icon  Screen Shot 2016-03-07 at 3.30.20 PM.
  • Find the correct template for the page you’re creating and select it.
  • It will fill in default information with all the right formatting to get you started.



  • Main page templates are on the first level of the home page navigation.  They have more graphics and will typically be a little more sales related.  There is an option with a sidebar and an option without.
  • Secondary pages are usually departments and a little more utilitarian looking– options with and without  a sidebar are available.
  • Tertiary page are more utilitarian — options with and without  a sidebar are available.
Copying Content Areas
  • Ideally your template will have most of the content areas and formatting you should require to do your page.
  • If you don’t need an area you can click the trashcan on the top right. Screen Shot 2016-03-07 at 3.35.50 PM
  • If you would like similar areas go ahead and duplicate them.  Screen Shot 2016-03-07 at 3.36.47 PM
    This will keep some of the formatting, animation and colors we’ve pre-created for you consistent.

Screen Shot 2016-03-03 at 3.06.04 PMThe edit, copy and trash icons look like this and are ordered respectively.

Adding Content
  • Adding an element: At the top of your page just under the words Visual Composer you’ll see aScreen Shot 2016-03-03 at 2.55.04 PMicon.
  • In here you’ll find the types of content areas that can be added.
  • Most times you’ll start with a new row and add the number of columns you’re looking for. Look for this icon in the top left of your working area.  Screen Shot 2016-03-07 at 3.40.29 PM
  • You can place almost any content type (with a few exceptions like accordions) into any column or content area.
  • To change placement of columns or elements look for this icon in the top left. Screen Shot 2016-03-07 at 3.43.31 PM
  • Once you have a row in place you can add the content area with the sameScreen Shot 2016-03-03 at 2.55.04 PM icon. Simply select the format you need.  The text box will be the one you use the most often.
  • Side bars are not added in the main visual composer area.  There is a section towards the bottom of the page where you select sidebars.  Sidebars are always 1/4 column and left.  It’s likely that a sidebar widget has already been created for you that you can select, it will be in the item below the sidebar size. If you require changes to that menu or require a new one talk to the head of this web project. These sidebars will have menus and can be found under appearance.
Page Styling
  • If you require a large white headline for something like a large call to action use Headline 1
  • If your page requires a headline area beside the page title use Headline 2
  • Body Breakers are typically Headline 3
  • Most text has the paragraph style applied.
Blogs and Blog Feeds
  • Blogs items can be pulled from in a few way. As you’re writing an item consider which categories it would apply to.  Don’t create too many but for instance, one with an alumni bend to it might be at some point featured in a carousel of alumni news stories.
  • The news carousel under the main graphic on the home page has the category “frontpage”.  If you create a blog post with that in it, it will show up there.
  • To get the picture in the home page news carousel correctly make sure you have a featured image selected (it’s on the lower right side of the page).  The size of that image should be: 800 x 435.
Formatting Content

Style: Overall we’d like this site to have a sense of space so make sure there is some padding where needed so that elements don’t feel cramped. We’d also like a lot of color and engaging pictures.  Text should be well edited to be understandable and as brief as possible.  Consider lots of bullet points for skimming.

  • Formatting Text:  This is very important!
    If you are copying and pasting text in switch to the Text view which is html and paste.  Then switch back to Visual for formatting.  When you copy and paste text in it often brings with it bad formatting.  Screen Shot 2016-03-07 at 4.09.00 PM
    Please use the drop down text formatting option once you are inside a text area.  Screen Shot 2016-03-07 at 4.10.48 PM  Do not make up your own fonts and sizes. Select your text and choose one of the following:  Paragraph, Heading 1, Heading 2, Heading 3, Heading 4, Heading 5, and Heading 6. You will need a hard return between styles.  If it’s on the top of a page choose Heading 2.  If it is a main body breaker choose Heading 3.   If it requires less emphasis you can choose between the rest.  The advantage of using preformatted text is that it allows consistency and the head web people can change a font instantly throughout the site.  If you custom format they cannot.
  • Buttons:  Copy buttons where you can as they are preformatted. The button you should use most is the default button. It should be WSU Crimson #981e32. It should look like this but larger: Screen Shot 2016-03-07 at 4.27.45 PM
  • Padding: 32px of empty space is the default added.
  • Line Breaks: Between sections there should be a line break which has some built-in padding.
  • Small Images: Copy these elements where you can to simplify formatting and you shouldn’t have to follow the rest of the steps.  Create their own column. Add a single image content area.  Apply whatever link you require.  Add animation to come in from the side they’re on.  Add the image style:  “Round button shadow” and make sure the size is 150×150.  Images should be created at 300 square for HD screens. Add a 1, 2, 3 delay respectively if you have say 3-6 images in a row. This is a great style for headshots. Click here for the template.
  • Rectangle Quick Link Images: These are the images at the top of some of the main pages.  The sizes are marked in the graphics you should replace if you’re using the theme correctly.  342 x 186.  They are higher res for hi-def screens.  Use the single image content area. You can add a link to these images.  Add an animation delay of 1, 2, 3 respectively for the row of picture.  They should animate by dropping down. For these images I take the image I like and multiple WSU maroon #981e32 over the top. Click here for the image template.
  • Top Header Images:  The sizes of these again should be marked in the themes.  The size is 1800 x 687.  This is added below the main visual composer area in a section called Qode Title (search for it on the page if you’re having a hard time finding it.) Text will be animated right to left.  The color should be one of the WSU colors and be readable. See the style guide for colors in the right hand column. It should be animated right to left and using large text. Under background image upload the image of your choosing.  Try to pick something bright, appealing, very horizontal that is fairly simple and will let the text shine. Here is the image template.
  • Medium Sized Images: Occasionally you’ll have need to show a more medium sized image.  See the parents page for an example. These can be 450 x 337.  Again they should animate by coming in from the side they’re on.
Need more help?

Contact us for more in-depth questions!

Monique Van Sant
WSU Tri-Cities Web & Graphic Designer