Adding a banner

What are you looking for?

University of Nottingham > External Relations > Digital and Marketing > Web Team > Contensis CMS > Full width layouts > Adding a banner

There are a few different options for your header banner for full width pages. You can find your banner options under /SharedResources/Razor/2022

These banner components will need to be dragged and dropped onto the page. Once dropped, a pop-up will appear which allows you to input the relevant content and configuration options.

Your banner needs to go at the top of your page, outside of your bootstrap container, so it spans the full width of the page. Upload and approve your images first.

Banner heights

For banners where you can vary the height, we recommend that you use the larger banner height (500px) for a landing or home page. It's also good to make use of the optional subtext and CTA button on the banner for landing pages. The slimmer banner height (300px) can be used for sub pages that don't require a prominent banner.

We would also advise considering the aim of the page to help determine what banner you use, for example, a page with a search or filter at the top would mean a smaller banner makes sense so the user is able to take action quicker.

Standard banner

Found at /SharedResources/Razor/2022/Standard-Banner

The standard banner adds an image with a heading - usually the title of your page. For example, on this page, the main banner has a heading of 'Adding a banner'. This is the Heading 1 for your page.

The standard banner also has the option to add an additional line of text underneath the heading and a call to action (CTA) button link.

Image sizes

You will need to create two banner images at the following sizes:

1920px wide by 300 to 500px high for desktop
600px wide by 300px high for mobile

Notes

Your image will have a black gradient over the left side of the image to make the text legible
The positioning of the image will depend on your screen size
On standard desktop sizes, the centre of your image will appear towards the left of the banner
You should ensure your image works well for the banner, for example, make sure people's faces don't get covered by the text etc
At smaller screen sizes, your image will change to the mobile sized image

Standard banner centred image option

Found at /SharedResources/Razor/2022/Standard-Banner-Centred-Image

The standard banner centred image option is the same as the standard banner, but your image will be centred on the page on desktop.

Standard 50-50 banner

Found at /SharedResources/Razor/2022/Standard-5050-Banner

The standard 50-50 banner adds an image on the right and a heading on the left. This is the Heading 1 for your page.

It also has the option to add an additional line of text underneath the heading and a CTA button link.

Image size

960px wide by 300 to 500px high

Notes

At smaller screen sizes, your banner will change to the standard banner style with the text appearing over the image

Standard banner with two CTAs

Found at /SharedResources/Razor/2022/Standard-Banner-Two-CTAs

The standard banner with two CTAs is the same as the standard banner, but allows for two CTA button links.

Image sizes

You will need to create two banner images at the following sizes:

1920px wide by 300 to 500px high for desktop
600px wide by 300px high for mobile

Notes

Your image will have a black gradient over the left side of the image to make the text legible
The positioning of the image will depend on your screen size
On standard desktop sizes, the centre of your image will appear towards the left of the banner
You should ensure your image works well for the banner, for example, make sure people's faces don't get covered by the text etc
At smaller screen sizes, your image will change to the mobile sized image

Standard banner with no content

Found at /SharedResources/Razor/2022/Standard-Banner-No-Content

The standard banner with no content adds an image without a heading. You will need to add your Heading 1 to your page at the top of your content instead.

Image sizes

You will need to create two banner images at the following sizes:

1920px wide by 300 to 500px high for desktop
600px wide by 300px high for mobile

Notes

The positioning of the image will depend on your screen size
On standard desktop sizes, the centre of your image will appear towards the left of the banner
At smaller screen sizes, your banner image will disappear entirely

Standard banner with no fade image

Found at /SharedResources/Razor/2022/Standard-Banner-No-Fade-Image

The standard banner with no fade image is the same as the standard banner except it does not add the black gradient. It should only be used with images where the text will be legible.

You can also add an image that shows on the right, overlayed on the banner image. In the example below, the banner image is a gradient colour background with the right image on top.

Image sizes

You will need to create images at the following sizes:

1920px wide by 500px high for desktop
600px wide by 300px high for mobile
400px wide by 400px high for the right-hand-side image if required

Notes

Your image will not have a black gradient over the left side of the image to make the text legible, so you need to ensure you choose an image that allows the text to be clearly legible
The positioning of the image will depend on your screen size
On standard desktop sizes, the centre of your image will appear towards the left of the banner
You should ensure your image works well for the banner, for example, make sure people's faces don't get covered by the text etc
At smaller screen sizes, your image will change to the mobile sized image and the right image (if used) will not show

We can now add the site's navigation component to the page.

Adding a navigation bar