The Banner content type is used to give pages a strong visual impression and is primarily designed for use on key landing pages and top level sections of your website. When using the banner, please ensure that it is used only once and located at the top of your webpage.
This content type can also be used on lower level pages of your website, however this is not a requirement. It is recommended that your content is structured using the other available content types, and that a banner is not used if it provides no added value to the content of the page.
Please use the following information to help ensure that you are using this content type correctly:
- You should have full permission for any image you intend to use on your website.
- Please ensure that the text overlay is considered when creating or selecting your images, as this may obscure key features.
- All images should be the correct dimensions, 1600 x 575 pixels (width x height) and optimised for the web. For users that do not have access to Adobe Photoshop or a similar image editing resource, we would recommend the use of PIXLR, a free online image editing platform. This platform can be used to resize and optimise images.
- You must use the correct naming convention for image filenames, as follows:
- Use only lowercase letters (a to z), numerals (0-9) and hyphens (-);
- Do not use spaces. Instead, use hyphens to separate words.
- Do not use special characters (e.g., £, %, &, á) or underscores.
- The following resource explains how to optimise an image for use on the web.
- You are not required to add an Image Alt Text / Description if the image will be decorative only. Further information is available in the Text Alternatives for Images section of our Accessible Content Guidance.
- Do not create images with embedded text. The image will be inaccessible and the text will not scale across mobile and desktop devices. If and image with text is required, please use an alternative content type to display this information, such as DTP - One Horizontal.
- To link to a specific section on your website use a Section Link. The CMS automatically remembers section links, even if you need to move the linked section when restructuring or reorganising content on your website.
- To link to a specific piece of content on your website, use a Content Link. As with section links, the CMS will automatically remember the content link, even if the content is moved to another location on your website.
- When linking to an external website or resource, then use a Web Address. The full URL of the website or resource is required i.e. https://www.qub.ac.uk. Please note that the majority of websites published via the CMS are now accessed over HTTPS only.
Please use the following guidance to help make sure your content adheres to accessibility regulations:
- Do not add HTML elements such as
h1or otherwise to any of the form elements to change the structure of the content type. Either you will be asked to remove it, or it will be removed by the Web Support Team.
- Do not add any CSS styling or selectors to any of the form elements to change the display of the content added to the content type. Either you will be asked to remove it, or it will be removed by the Web Support Team.
- Do not create images with embedded text.
- Do not add image Alt Text / Description to your image if it is decorative. Further information is available in the Text Alternatives for Images section of our Accessible Content Guidance.
- Do make sure that the link text used for the button is as descriptive as possible. Do not use generic link text such as 'Click Here' and 'Read More'. Further information and examples are available in the Using Links Effectively section of our Accessible Content Guidance.
Form Field Guidance
Please use the following information to help you use this Content Type effectively:
|Is it required?
|This is the name of the content block, only visible to editors of the section.
|Banner Full Width Introduction
|Option to make your image full width or bounded inline with the rest of the content on the page. Options are Yes - Full width or No - bound in line with content.
Note: This option is currently under review and may be removed in future versions of the content type. It is recommended that you do not make your banner full width.
|Text Colour - DO NOT USE
|Used to pick the colour of text overlay on an image. Light for white text and Dark for grey text.
Note: This option has been discontinued and no longer works. It will be removed in a future version of the content type.
|Used to create dark text on a white background. The text is slightly larger than that in the Main Heading field and is optional.
|Used to create white text on a dark background. The text is slightly smaller than that in the Heading field and is optional.
|Body Text - DO NOT USE
Option to add text on top of the banner image.
Note: This option will be removed from future versions of this content type. It is recommended that you do not use this option.
|Add your optimised image via the Media Library. Maximum image dimensions are 1600 x 575 pixels.
|Choose Section Link OR Web Address
|Use this option to define whether you want to create a Section / Content Link or an External Link for your button. Choose Section Link and then add a Section Link or Content Link in the form field Section Link for CTA Button. Choose Web Address and complete the form fields Web Link for CTA Button and Text for Web Link on CTA Button to add a button with an external link.
|Section Link for CTA Button
|For use when Section Link is selected in the field Choose Section Link OR Web Address. Click on the appropriate button option and select the correct section or content link.
|Web Link for CTA Button
|For use when Web Address is selected in the field Choose Section Link OR Web Address. Type in the full URL of the external website ensuring the correct protocol prefix is included (http:// and https://). Where possible, it is recommended that you use https for security.
|Text for Web Link on CTA Button
|For use when Web Address is selected in the field Choose Section Link OR Web Address. Add the text you want to display on the button. Please make sure the text is descriptive and is not generic as outlined in the accessibility guidance above.