This text is optional
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
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
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
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.
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
Column 1
180 characters to introduce your topic
350 characters to expand on what you've highlighted above
Optional links
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
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
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
- 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
This is the quote - the quotation marks are added automatically Name of alumnus/student
Degree subject
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.