​​​

Overview

Hook users in with an image 

Starting a page with an image helps to capture interest and boost engagement.

How to use it

The large heading – identical to your page title – reassures users that they’re in the right place. Meanwhile, the built-in H1 tag tells search engine bots what the content is about.

Hero-Small Image is suitable for many different content types. Here’s how to get the most out of it.

Step 1: Write your heading

Your heading – the H1 in this case – must be the same as your page title. This might be a product, sector, or headline.

The title is how you want the content to appear across the site, such as in the related content carousel. For example, a suitable title and H1 for a product page might be:

• Business Interruption insurance

Don’t confuse the title with the SEO title. They’re written to be understood by search engines and look like this:

• Business Interruption insurance | Howden UK

Headings must not occupy two full lines in this component, as it reduces readability. Use a maximum of 22 characters. 

Optional step: Add a subheading

Add an optional subheading to support your heading with an aspirational or complementary message. Make sure that your subheading doesn’t go onto a second line (fewer than six words or 33 characters). 

Step 2: Choose an image

The image helps to reassure users that they're in the right place. So your image must be relevant to the content. 

You can select an existing image or import a new one.

To upload a new image, select ‘import image', then ‘select file’.

Add a title and alternative text, then select ‘select image’.

For more information about uploading images to the CMS, see the ‘Image Guidelines’ advice.

Step 3: Add a call to action (CTA)

When setting up a call to action button, you first need to have an appropriate form to direct users to. Copy and paste the URL into the ‘CTA link’ text field. Alternatively, search for your form in the CTA link text field and select it from the dropdown menu.

It’s important to use button text that describes the action you want users to take. Click the ‘CTA text’ dropdown to choose from the pre-set options, including:

Recommended image specifications

For all themes apart from Private Clients a landscape image must be used. A square image should be used for the Private Clients theme.

This is a responsive component that has a fixed image container height of 480px. As such the image will be cropped left and right as the screen decreases towards mobile size but the container height will not change from 480px on all screens. The height of the image container is set to 480px so we recommend a height of 500px otherwise some cropping top and bottom will occur. The maximum width the image will ever be is around 1100px when viewed on a large desktop, so we recommend using an image with a width of 1200px. Due to the cropping we recommend the main content of the image should be within the center of the image.

For the Private Clients theme, on a large screen the image is nearly square reducing down in width as the size of the screen decreases. As such some cropping left and right will occur on smaller devices. So again bear this in mind and try to have the main content in the center of the image.

The file size of the image should not exceed a maximum of 150kb, the smaller the file size the better but the image should still be crisp and non-blurry.

For more information on how to use images in the CMS go to the Image Basics page.