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

Hero-Small Image displays images as an elongated rectangle. This means that the top and bottom of the image is often cropped out of frame. So the image must still make sense when elements are missing. Alternatively, choose an image where the focal point is central in the frame.

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’.

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 more information about uploading images to the CMS, see the ‘Image basics’ advice.