Formatting Content in Articles

Most content on Amherst webpages is displayed in articles. Within an article, you can paste text, create headings, insert images, format bulleted lists, and more. 

  • A note on accessibility: By following the suggestions in this guide, you’ll go a long way toward making your content accessible to the visually impaired. Now take the extra step, by learning more about making your pages accessible.

Headings

Use headings to categorize information and allow people to scan your page easily. To make a heading, select the text and choose a heading from the “Paragraph” drop-down menu.

Heading 1 is automatically created when you create a page on our site. It’s the large title at the top of the page, above the left column.

Heading 2 comes from the Title field at the top of your article. 

In the body of your article, use: 

Heading 3

Heading 4

Heading 5

Bulleted Lists

  • A bulleted item stands out.
  • A bulleted list is easy to read.

Captions

For captions under photos, you can use the Caption style, shown here, which is a bit smaller and lighter than regular text. Select your text, and choose Caption from the Formats menu.


Drop Caps

To apply a drop cap, select the first letter of a paragraph and choose the “Drop cap” style from the Format menu. Use drop caps sparingly—preferably only for the opening paragraph on a page. Drop caps draw the eye into text, and are a nice way to begin a page. 


Images

Most of the time, you don’t need to do anything special to a photo; simply place a photo under a heading or between paragraphs. When inserting a photo, choose “Standard” for a medium size photo, or “Original” if the photo you uploaded is large and you’d like to fill the width of the page. Images will shrink automatically for smaller screens, including mobile screens.

The Quad in August
This is the “Caption” style, for use under your photo.

Sometimes you might want to use smaller photos:

Walking Toward the Range

The photo at left has the “Image align left” style applied to it, which makes the image align to the left while text wraps on the right.

A similar style called “Image align right” makes the image align to the right side of the page.

“Alt” Text

All images should have alternative text added to them, in order to be accessible to people with visual impairments. When uploading or inserting any image to the college website, you’ll see fields for providing alt text. Keep it brief and informative. 

Images with Lots of Text

If you need to post a graphic with a lot of text in it, please follow these guidelines:

  • In order to make the content accessible to people with visual impairments, as well as search engine-friendly, repeat the image’s text as regular text on the page, such as in a caption below the image. Add alt text to the image saying that full information is provided on the page.
  • Graphics with text will be blurry on many computer screens. The easiest way to prevent blurriness is to use the Image with Caption component and upload a larger image to it. 
  • A better option when dealing with posters is to use only the graphical element in the poster (such as a photo of the speaker), instead of the whole poster.

Links: Don’t Say “Click Here”

Use active and descriptive link names to make your links clearer, more prominent, and more accessible.

Red X  To reserve a space in our workshop, click here to register.

Green check mark  Register now to reserve a space in our workshop.


Special Characters

Smart quotes and proper em dashes make your content look more polished. Find these characters in the toolbar of your editing window when working in an article.

screenshot showing the icon for inserting special characters


Do’s and Don’ts

  • Don’t center your content. Our site is mostly designed for left-aligned content. Centered titles, buttons, and images can look floaty and awkward on our pages. Longer content, when centered, can take on a “wine glass” shape, which is distracting.
  • Don’t overdo boldface. Use it sparingly to get the most out of it. Make good use of headings, bullets, and briefer text to prioritize your information and make your page easier to read. 
  • Do use images. Photographs add life and personality to pages. Browse the Amherst Flickr sets, or contact Photography Services in Communications for specific photos.
  • Don’t post your event poster as a graphic or PDF. Instead, upload the photo from the poster, and post the information as regular text. (And remember to post your event on the college Event Calendar!)
  • Do contact Communications for help! Use our web services request form for a fast response.

Aerial view of campus with Holyoke Range in the distance

A Variety of Display Options

Take advantage of our components for announcements, call-to-action buttons, social media, image galleries, and more.  See the components available and instructions for using them.