Step 3: How to Create a great Hero Image

Hero Image Step by Step

 

A Hero Image is content that fills the screen when a visitor first lands on your Home Page. It is added in the Customizer, within Above the Fold:

How to add a Hero Image in the WordPress Customizer

1 Use the right resolution

A Hero Image, which will fill the entire screen, needs to be a high-quality image.

If your image is too small (less than 2000px wide), it will become pixilated on larger screens.

Pixilated Hero Image example

You can reduce the image’s pixel size to reduce loading time – if you need to, reduce the size before you upload the image to your website.

Tip: Aim for 2500px width, with a maximum file size of 1MB.

2 Keep it simple

Avoid busy images with lots of colours and contrast because any text will get lost.

Make sure that your image has one idea in it – don’t try and make a single image describe every aspect of your business.

Simple Hero Image example

A simple image, with large areas of clear space, will ensure that text is clear to read, and will ensure that your Hero Image makes a strong impact.

3 Edit your Image

If you have already found a great image that will work for your brand, but doesn’t work with text, you can still make it work as your Hero Image. Canva offers all the tools you need to edit your image.

  • Crop your image to create a clear area in the centre.

Cropped Hero Image example

  • Add a Blur

Blurring an image can bring the text into focus, whilst still adding some texture and interest to the page.

Blurred Hero Image example

  • Add a Tint

Tinting a busy image will reduce the contrast, which can make the text stand our more clearly. Tinting is also a great way to emphasise your brand colours.

Tinted Hero Image example

Tip: You can add a Tint that matches your Main Colour in the Customizer.

This video explains how to upload your Hero Image:

We have written a blog with lots of tips about finding images.

Here is a PDF that summaries these tips – keep it handy when you are looking for a Hero Image!

How to Create a great Hero Image.

If you have any problems choosing a Hero Image, or any other aspects of your new website, please get in touch by phone or email – we are happy to help.

And if you are ready to edit any other aspects of your website, there are plenty of videos here which explain what to do.