Skip to Content

Your guide to the new templates

Image banner with copy

The first element the visitor will see, so get your message across immediately with impactful copy and a striking image.
Text colour can be dark or light, depending on the image, and the banner can be full width across the page or constrained. 

IMAGE MUST BE 1600 x 767px (575px if full width is recommended) | Template Tutorial Video

Carousel x 3 images

Like the banner template but allows for up to three alternating images. The entire image acts as the link.
New photo banners to select are available in the CMS media library > New website > Images by size

IMAGES MUST BE 1600 x 767px (or 575px if full width option selected)

Two verticals

This content type is used to outline two important items that both need to be explained further in full elsewhere. It should be used as a lead content item on 1st and 2nd level pages. There is mandatory provision for a link through to other content: either to a section within the Queen's website or an external URL.

There are 125 characters for each column, encouraging the user to click through to the target page. 

EACH IMAGE MUST BE 800 x 533px

close up of ale postgraduate student in labratory wearing safety goggles and lab coat
Column 1
Describe the topic in no more than 125 characters
University Square road sign with footpath in the background
Column 2
Describe the topic in no more than 125 characters

Three verticals

This content type is a three column layout and can be used to summarise content or aid navgation to other pages. There are 50 characters to use for the body text for each column.

EACH IMAGE MUST BE 535 x 535px

4269_campus-buildings_3V
Column One
Interesting, succinct subheading. 50 characters
Footpath leading to McClay Library
Column Two
Interesting, succinct subheading. 50 characters
166x_life-nireland-living_3V
Column Three
Interesting, succinct subheading. 50 characters

Four verticals

Ideal for highlighting a series of common subjects in brief (for example, academic profiles or School facilities). Can be linked through to other pages.

IMAGES MUST BE 400 x 400px

2549_campus-buildings_4V
Column One
55 characters

160 characters to expand upon this

anech_why-research_4V
Column Two
The content theme

160 characters to expand upon this

Arts_students-teaching_4V
Column Three
Copy should be engaging

160 characters to expand upon this

QUB_Black-White-hall_5620a
Column Four
Your key message

160 characters to expand upon this

One horizontal

This content block is useful to highlight one key aspect of your School, institution or department, or to break up text. 

You have 550 characters to use in total.

IMAGE MUST BE 800 x 533px

A consise and descriptive title

Use these 200 characters to expand on your headline title

Use these 350 characters to outline your content in more detail. This content type is recommended for arranging copy, where previously this may have been in one long solid block of text. Using the one horizontal to break up copy helps users digest information easily.

QUB_Day2_Music244_2H

Two horizontals

This content type should be used to arrange blocks of related text. Copy is then easier to read rather than in one central block and the headline titles help users scan through the page.

There are 550 characters to use in total for each column.

EACH IMAGE MUST BE 800 x 533px | Template Tutorial Video

QUB_Day2_IandR294_2H
Column 1

180 characters to introduce your topic

350 characters to expand on what you've highlighted above

Optional links
QUB_day4_Research162_2H
Column 2

180 characters to introduce your topic

350 characters to expand on what you've highlighted above

One horizontal with background

Like the 'one horizontal' content block, this can be used to highlight an important part of your web text.

The optional button means it can be linked through to other content, or to an external URL. 

IMAGE MUST BE 800 x 533px | Template Tutorial Video

Close up of male academic in Riddel hall
Headline
80 characters to expand on the lead message

350 characters to induce users to click on the link and read about the topic in more detail.

One horizontal with colspan

This horizontal style has a larger image than the others and has the ability to specify a date, so it is recommneded to be used for time-sensitive content such as news and events.

IMAGE MUST BE 1200 x 600px

Lanyon_dsmyth_colspan1501165

Headline

80 characters encouraging users to click the link for more details

Date: 2/11/2015

Time: 11:21AM

Panel

This is a short, text only panel which can be used to break up content blocks with a highlight fact or important selling point. You can centre, right or left align text and choose from white, grey and red background colours. 

Template Tutorial Video

AN INTERESTING AND DESCRIPTIVE TITLE WITH A KEY MESSAGE OR UNIQUE SELLING POINT FOR USERS TO EASILY DIGEST

You can choose from white, grey and red background colours. 

general content

This is the main building block of text-centric pages. There are 4000 characters and it is recommended to break copy with full width images and headings, to keep information scannable and accessible. Avoid paragraphs longer than 3 lines and consider the mobile view for large chunks of text. 

Template Tutorial Video

This is the main building block of text-heavy pages. You have 4000 characters.

You have some space to use formatting here, such as italics, bold, underlining,

  • bullet points
  1. numbering

H1 Heading.

H2 Heading.

H3 Heading.

H4 Heading.

H5 Heading.
H6 Heading.

You can also change a heading to display as red text to enhance copy, by adding 'class="alt"' within the heading tag in html view of the text editor.
e.g. <h2 class="alt">Browse all courses</h2>

H1 Alternative Heading.

H2 Alternative Heading.

H3 Alternative Heading.

H4 Alternative Heading.

H5 Alternative Heading.
H6 Alternative Heading.

Student, staff or alumni quote

Highlight a member of staff, a student or alumnus with a brief quote

THE IMAGE MUST BE 800 x 533px

PHOTO: Name of alumnus/student
This is the quote - the quotation marks are added automatically Name of alumnus/student
Degree subject

Student story

Image Gallery

This content type allows upload of individual images to a page, which can then be clicked on and scrolled through. A row of 4 looks best within the context of a page and a full page image gallery can be created from multiple rows. Captions pick up from the 'description' field of the file in the media libary. 

Image thumbnails must be square, and uploaded separately. 

Video embed

Embed a video from YouTube or Mediasite here. Videos will size automatically to the standard width. Videos should have a jpeg 'splash' screen uploaded on YouTube that will induce the user to watch.

Button panel

This panel can display either one or two button links and should be used at mid and end points on the page for a call to action e.g. 'Ask a question' or 'Apply today'. The button panel is consistently red across the website.

Template Tutorial Video

Back to main page
User experience and design
More useful information
Digital Style Guide