Student painting on the farm

Text and Formatting Tips

Text Editor Buttons

  1. Insert a link to a website or file.

  2. Block quote: you can ignore unless the communications office tells you to use it.

  3. Insert horizontal line

  4. Paste as plain text. Use this whenever pasting in text from elsewhere!

  5. Remove formatting (highlight text, then click this)

  6. Special characters: useful if you need an accent mark, etc.

  7. Headings menu

  8. Styles menu (for colored buttons, below)

General Text Formatting Tips

  • Try not to copy/paste from Word, other web pages, google docs, or any other application. Do all your formatting within the Drupal WYSIWYG text editor.

  • If you must copy/paste, use the paste as plain text button (#4 in image above) to remove the majority of weird formatting from other applications.

  • For a single-spaced line break, hold down the shift key and hit return.

  • Use the Headings menu (#7 in image above) (H2 = large heading, H3 = medium heading, H4 = small heading) when possible to give your content some hierarchy for the user and make it easier to flow/read. This will also improve the accessibility and search results for your page.

​Things to Avoid

  • Don’t use tables (they are not responsive, so they tend to break on phones/small screens).

  • Don’t embed videos or issuu code without following the advanced tips below to make them responsive.

  • Don’t bold text that already has a header style on it.

  • Don’t create a link and use the text “Click here.” Try to use an action to describe what you want the user to do, for example, link text might instead say something like: “Read application instructions” instead of “Click here for application instructions.”

Search Engine Optimization (SEO)

  • Pages will rank higher in search results if the content contains key words that people might use to search for them. A good example of this is the employment opportunities page. This page did not used to have the word “jobs” anywhere on the page. We knew by looking at analytics that a lot of people searched our website for the word “jobs,” but this page was not appearing in those search results for that word. We added the word jobs to the content on the page, and now it does. 

  • Text inside of heading styles will be ranked higher in search results.

Colored Buttons

  • To create them: Highlight the text you want to be a button and create a link as normal. Once the link is created and the text is still highlighted, button options will appear in the styles dropdown.

  • Try not to use long phrases; keep the button text short.

Here’s a button that links to a page that is a good example of using headers, lists, and colored buttons.

View Example Page

Embedding Videos or Issuu Code

When using video or issuu embed code it must contain special html tags around it in order to make it responsive (so it works on phones and other devices with small screens). For example, if the embed code looks like this:

<iframe width="420" height="315" src="https://www.youtube.com/embed/PcC8hZPwj6w" frameborder="0" allowfullscreen></iframe>

Put the embed code inside of a div tag with a class of "video-wrapper" before being pasting into source mode in Drupal. Also add a title and remove the size specification, as such:

<div class="video-wrapper">

<iframe title="Brief description of your video" src="https://www.youtube.com/embed/PcC8hZPwj6w" frameborder="0" allowfullscreen></iframe>

</div>

IT Training Request
Need to do a mail merge? Just want to get better at Excel?
We offer training for a variety of software and tools. Let us know what you'd like to learn.
Request Training
Stay In Touch
With The Drupal Support Team
Snail Mail
Web Services
Hampshire College
893 West Street
Amherst, MA 01002