External Relations
   
   
  

Image sizes

This page illustrates best use of the heading over image mini template and image sizes for the various column layouts. When this mini template is used, it requires an image (images sizes are shown for each column layout combination) and a heading. Stick to these rules for best results:

use the recommended image sizes 

  • nest headings appropriately, not based on how they look
  • ensure images are saved at a 72dpi resolution
  • break long headings on more than one line if necessary (line break

There are now just four mini templates that can be used to create a heading over an image:

  • heading-over-image
  • heading-over-image-and-textoverlay
  • heading2lines-over-image
  • heading2lines-over-image-and-textoverlay

We no longer provide different ones for various sized images and headings.

This page is used for illustrative purposes only and so we have broken all the rules when it comes to nesting headings correctly.

How to use:

  1. place cursor in editable area
  2. from SharedResources>
    ContentLayouts
    , click, hold (the icon) and drag mini template onto your page
  3. insert image at correct size
  4. type in your heading (use line breaks if necessary)
  5. select relevant heading (1, 2, 3 etc.)
  6. if using the Image with Heading and Textoverlay, type the required text in the space provided

Full width pages

Image sizes are different when using a full width page (without navigation on the left). Details of these can be found here.

 

Full width

Only use a Heading 1 with a full width image. A full width image should only be used at the top of your page using a Heading 1 for the page title.

Image sizes:

  • width: 714px
  • height: 335px

Heading 1

 

Heading 1

Sometimes it is necessary to add text here. If so, use the Image with Heading and Textoverlay mini template. Why not add a button too?
 

Heading 1 line 1

Heading 2 line 2

 

Heading 1 line 1

Heading 2 line 2

Sometimes it is necessary to add text here. If so, use the Image with Heading and Textoverlay mini template. Why not add a button too?
 

30/70 and 70/30

The following layouts use 2 columns (30/70 and 70/30). Do not use a Heading 1 in a 30% column, all others are ok. In the 70% column, a Heading 1 and Heading 2 may be used, but as the image will be larger, do not use any others. 

Where a 2 column (50/50) layout is placed within a 70% column, do not use a Heading 1 in either column.

Image sizes 30% column and 50% within 70%:

  • width: 208px
  • height: 90px

Image sizes 70% column:

  • width: 466px
  • height: 335px
 

Heading 2

 

Heading 1

 
 

Heading 2

 

Heading 3

 
 

50/50

Heading 1 and Heading 2 should be used within the 2 column (50/50) mini template. Any other headings may look too small due to the image size. Where a 5050 is places in a 70% column, do not use Heading 1.

Image sizes:

  • width: 340px
  • height: 170px

Heading 1

 

Heading 2

 
 

30/30/30/

Do not use a Heading 1 in the 30/30/30 layout as the heading will appear far too large for the image size. Use any others.

Image sizes:

  • width: 208px
  • height: 90px

Heading 2

 

Heading 3

 

Heading 4

 
 

4 Columns at 25%

Do not use a Heading 1 in the 4 column layout as the heading will appear far too large for the image size used. Use any others.

Image sizes:

  • width: 165px
  • height: 165px

Heading 1

 

Heading 2

 

Heading 3

 

Heading 4

 
 

5 Columns at 20%

Do not use a Heading 1 in the 5 column layout as the heading will appear far too large for the image size used. Use any others.

Image sizes:

  • width: 130px
  • height: 130px

Heading 1

 

Heading 2

 

Heading 3

 

Heading 4

 
Heading 5
 
 

 

University of Nottingham

University Park
Nottingham, NG7 2RD

telephone: +44 (0) 115 951 5151
fax: +44 (0) 115 951 3666
email: enquiries@nottingham.ac.uk