Home » Web Development » WordPress Elements

WordPress Elements

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

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

mastHead_03

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.[su-testimonial image=”https://www.su.edu/wp-content/uploads/2012/10/omc-staff-tom-finley.jpg” author=”Tom Finley” title=”WordPress Development Specialist”] A testimonial is a type of highlighted and specially formatted content block that allows for the use of quotes from individuals. A  [/su-testimonial][one_half] Columns can be used to create specialized layouts on a WordPress page. Using 1/2 or 1/3 columns is generally all the division your page will need. Any more and you risk losing the user![/one_half] [one_half_last] Using the 1/2L One Half Last or 1/3L One Third Last shortcode will allow you to close off your use of columns. Be sure to insert a Clear shortcode after your columns so WordPress will differentiate content areas.[/one_half_last] 

Toggles are another fantastic way to organize content. Toggles can be either opened or closed initially in order to show or hide content. This toggle is left open to allow the user to read this important information.

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 alway the best way to present really important information–so use toggles judiciously, and for content that might not be critical to your page.

Using three or more toggles is the best course of action. This way the user understands that toggles open and close revealing content.