NOTE: there is work currently happening on banners. For example, a proposed solution to the issue of title and banner description text not showing well against photos with mixed light/dark backgrounds is to put blocks of colour behind title and banner. This may not be the end solution (the colour blocks are unattractive, cover substantially more of the photo than previously so increase risk covering subjects’ faces, and make the CTA less salient) so this  page will need rewriting when we have an agreed solution.

Click banner settings if the page needs a banner image or description.

Note the page title appears whether any other banner information is selected or not, so only go to banner settings if you need a banner description or banner image.

Banner description

Add text to banner description ONLY if you want a subheading (a second line of text appearing below the page title in the banner image). This is optional so you can leave it blank. If you do add text, keep it short and make sure

  • it doesn’t repeat the page title

  • it doesn’t run over someone’s face if there’s a banner image

Banner settings

The 3 tickboxes below the banner description in the screenshot above may no longer be there by the time you read this. Please revise accordingly.

Tick the alternate heading colours box to switch the title and description text to black if the background image is light. This may no longer apply if the text is colour blocked – see note at top of page.

Tick the full-height banner box ONLY if you want the image to fill the whole screen --- this will only be possible for donate pages from August 2018.

Tick the overlap banner box ONLY if you want the topmost component to overlap the bottom of the banner image (e.g. the Donate block on donation pages). NB this only applies if you’ve selected the full-height banner.

Here’s an example of a full-height banner with overlap:

Here’s an example of a page with a subheading (banner description) but no banner image (our agreed convention is to only put banner images on landing pages).

Note that there’s no need to write anything in the banner title field as it takes the page title automatically.

Here’s how that page looks like when live:

Banner image

Only add banner image to landing pages (Who we are, Foster a child, etc.) and campaign/donate pages.

To select a picture for the banner, click select in the banner image block


then click the image in the ‘select image’ library so a tick appears on it, then scroll to the bottom of the image library page and click select files.

The selected image will now appear as the page-top banner.

If the picture you need isn’t in the ‘select image’ library, see Add image to library.

Below the banner image you can use the Image focal point dropdown to select the banner image focal point – either centre or right, depending on where the main subject of the photo is (so focus will remain on subject when banner resizes for different screens).

Once you’ve added banner image, page title and (if required) banner description, scroll down to the bottom and click save or preview to make sure it looks OK (words don’t run over someone’s face, etc.).

If you can’t see the banner image, go to the site switcher dropdown in the black admin bar at the top of the page. Select the site you wish to view the content in and click switch, then you should see the content correctly (see note at bottom of Edit a page).

Call to action

If you need a CTA (call to action) in the banner, add the url or internal path and the link text to the appropriate fields in the Banner call to action box.

The CTA will appear below the page title and any banner description text, like the Enquire about fostering CTA below:

NB the look of the CTA on the published page will change from the example above (see note at top of page). Please replace screenshot once we have a final agreed CTA.