This page will serve as an example of how to format your content to be in line with the style of su.edu. Notice the use of the red drop cap at the beginning of this first paragraph. You can create this too, by visiting the Formats dropdown in your WordPress editor. Drop caps should only be used on the first letter of the first paragraph.
Start with Heading 2
Each page automatically has a Heading 1 when you name your WordPress page. In order for search engines to read the page correctly, you should use Heading 2 through Heading 6 in a logical hierarchy down the page. Headings act as ways to organize content, and often have text that follow in a paragraph format.
Then Use Heading 3
Then Use Heading 4
Then Use Heading 5
Then Use Heading 6
While you should not overuse headings, they are a easy and practical way to divide content. They’re automatically formatted to fit with the fonts and styles across Shenandoah University’s branding.
When you want body content to stand out, use bold text, but use bolding sparingly. Remember, when everything is bold, nothing is bold. As just demonstrated, italics are another way to add emphasis to content, but again, use italics sparingly.
All Headings, H2-H6 Should Use Capitalized Case
This will further define them as section headings, and fits in with the consistency of the rest of the site. When the site’s content is consistent, it looks far more professional.
Use Pictures Like This
Photographs are of course a great way to add visual emphasis to your content. Typically you’ll want to align these left or right, though center is sometimes a valid option.
You’ll want to re-size your photos to be reasonable within your page. 500 pixels wide max is a good rule of thumb for landscape photos, 350 pixels wide for portrait. This will make them substantial for desktops, but also scale well on smaller devices.
Run your photo through https://tinypng.com/ to make it a smaller file.
Be sure to include an ALT Tag to make your photo ADA accessible. This should be a few words that describes the photo.
Here’s the code for a button! Just copy this button and paste it on to your page, then change the text and link like it’s a hyperlink.
Here’s how to add a quote to your page:
The OLED program has given me the opportunity to learn about not only myself, but also the world around me. I can now appropriately enjoy and contribute to nature while helping others do the same. This program has given me purpose and the tools to fulfill it and I would encourage anyone to find that purpose as well.”
Katie Spain ’18 | Interdisciplinary Studies in Outdoor Management
Be sure to format the quote attribution as: Name ‘graduation year | Program or title for faculty
Photos in quotes should be thumbnail size or 150×150 px
A closed toggle hides content from users. It takes an action on their part to open the toggle to read the content. This is not always the best way to present really important information–so use toggles judiciously, and for content that might not be critical to your page.