Donate Now

Page Layout & Shortcodes [for reference only – do not publish]

Use the H1, H2, H3 tags, images and short codes (such as bullets, boxes etc.) to make the page content easier for the visitor to “consume” and more interesting to look at.

Refer to the front and back end of the Harvest Rescue page for an example of these elements in use.

A complete list of short codes can be seen here, however below is a list of some that are suggested for use in this site.

General Page structure:

Please use the following elements when setting up the content on the page.

  1. Image – where possible, use relevant photos to make the page nice to look at. For a banner-style image, crop chosen image to 550px by 125px and set it so the image is not a “clickable” link. Horizontal images should be no wider than 550px, vertical pics should be no wider than 250px
  2. Intro text – using the “teaser” short code (see example above), set the first line or two of the page as the “intro” text, leading visitors easily into the rest of the content. If suitable text doesn’t exist, try to write something.
  3. Internal links – where possible, provide links within the text to direct visitors to other pertinent or related information within the website. Example: in the phrase “contact the Food Cupboard” make the word “contact” a link to the contact page.
  4. Closing links – provide relevant links at the end of the page content to lead visitors along to the next obvious step. Example, on the volunteer page, provide a link to the contact page with a call to action for getting in touch.

Headings

Headings are really useful for breaking down the page content into digestible chunks. They also help visitors find the info they are looking for quickly, by scanning the page/headings.

  • H3 tag as the main (large or H1) heading size
  • H4 tag as the secondary (medium or H2) heading size
  • Bold as the tertiary (small or H3) heading size

Lists

  • Bullet list – use the fancy list, style=bullet list, variation=green short code
  • Closing links list – use the fancy list, style=circle arrow, variation=green bullet style short code
  • Call to action / Important info box  – use the titled_box, variation=green short code

Colours

Where the option exists, use the short code colour option: “green”