Web Style Guide

Updated 04/26/2019

Version 1.0

Headings

On the web, headings are created using HTML heading tags

(<h1>Heading 1</h1> | <h2>Heading 2</h2> | <h3>Heading 3</h3>)

Fear not, you don’t have to know how to use HTML tags. WordPress allows you to create headings using the visual editor (see the screenshot below). 

But it is important that all headings be created using either HTML tags or by setting the heading in the visual editor (which basically creates those tags for you). This helps to keep the styles consistent throughout the site and improves SEO (Search Engine Optimization).

Please do not create heading headings by:

• Keying in all caps
• Making text bold,
• Changing the text color manually
• Or some combination of the above

Instead, please use the styles provided. Here is a quick guide as to how the headings are intended to work together:

Heading 1 is Reserved for the Page Title

(It is used improperly here to demonstrate the outline structure of headings.)

There should only be one Heading 1 per page for SEO purposes. For most pages on Gordon-Conwell’s website, the page title is managed by special fields at the top of the WordPress editor. For campus sections and sub-sections, however, the page title has been omitted to provide more flexibility in how the pages are presented. This same page template is used for a campus home page (which does not need a page title, and a page like this (which does). In the case of this page, a Heading 1 was used at the top of the page for “Web Style Guide.”

Heading 2 is your primary section heading

You should be using this heading quite often. Anytime you create a new section, you should typically use the heading 2.

Heading 3 is your second-level sub-heading

Heading 3 is centered like heading 2. It can be used if you need to further subdivide your section (like we are doing here); or, it can function as a subtitle underneath a heading 2 (like you see at the top of this page).

Heading 4 is a third-level sub-heading

In a true outline structure, Heading 4 is the logical next level after Heading 3. Depending on your styling needs, however, it is acceptable to jump straight from Heading 2 to Heading 4:

Heading 5 is a fourth-level sub-heading

I am some standard paragraph text immediately following. You really do not need to keep reading me. I am just here to fill up some space but look at you going the extra mile. You get a gold star.

H6 is a (rarely used) fifth-level sub-heading

You should not write content that requires an outline structure five levels deep, so heading 6 is not normally useful. Instead, we have styled the heading 6 to use on top of heading 2 like the example below:

Charlotte Campus

Spiritual Formation

Text Styles

As mentioned above, consistency is key. It is tempting to choose many different text styles and colors, but simplicity is usually better. Pages will look more professional when they follow a consistent underlying pattern. We’ve put together some tips to bear in mind when adding text to your posts or pages:

• Use bulleted or numbered lists for lists that are relatively short. Resist the temptation to use them for paragraphs — instead, use the Heading styles (outlined above).
• Bold and Italic should be used in moderation. Do not use bold as a substitute for heading styles — bold is not particularly important to a search engine.
• You may want to select the blockquote button when adding a quotation — it helps the quotation stand out from the rest of the text on the page.
• Keep text left aligned. You’ll rarely need to center align text.
• Links are already styled. You don’t need to do anything else for links.

Blockquotes

Blockquotes are a simple way to draw readers into your text and provide visual interest to the page without adding images. We have provided two different styles for blockquotes. The first style is used when a blockquote is included in a standard content section.

Come to me, all you who are weary and burdened, and I will give you rest. Take my yoke upon you and learn from me, for I am gentle and humble in heart, and you will find rest for your souls.

—Jesus Christ

We have added a heading 3 for the quote attribution. The second blockquote style is activated when a blockquote is added to a ‘Full Width Content’ section

With a little extra effort, you can create a quote that stands out from the rest of the page by separating it into a fullwidth content section.

Images

You can add images directly into the content area using the ‘Add Media’ button above the WordPress Editor (like the screenshot below).

Sizing & Optimizing Images

Images should be cropped, resized, and optimized in Photoshop (or equivalent software) before being uploaded to WordPress. Images should not exceed 1 mb in files size. 1800 × 1200 pixels is the ideal size and aspect ratio (3:2). If this is beyond your expertise, please contact the Marketing & Communications team for assistance.

(In the near future, we hope to provide the Gordon-Conwell community with a library of images to use.)

Naming Images

Search engines actually pay attention to the file names of images loaded into a page. Before ever uploading an image, then, please consider a descriptive name. “president-scott-w-sunquist-addressing-students.jpg” is much better than “DES_0034.jpg.”

Color Palette

We are providing our primary brand colors as used on the website. For more information about the proper use of Gordon-Conwell colors, refer to our Brand Style Guide.

Buttons

Here are the standard buttons available via HTML & CSS:

Standard Button (link with class=”button”)
Button

Small Button (link with class=”button small”)
Button

Big Button (link with class=”button big”)
Button

Huge Button (link with class=”button huge”)
Button

Centered Button (link with class=”button centered”)
Button

Gray Button (link with class=”button gray”)
Button