A Hero Image is a great way of jazzing up a website design without having to do a lot of design work or create fancy graphics. They’re impactful and look fantastic on desktops.
What is a Hero Image?
A Hero Image is an image which takes up the entire screen on a desktop browser. Like this:
Where would you use a Hero Image?
Usually at the top of the screen, below the Header (logo & menu) or to break up sections on a longer page.
What are the pros and cons of using Hero Images?
Pros
Great visual impact
More efficient than using a slider
Can layer backgrounds/images/text & buttons on them.
Cons
Need to have a different configuration for mobile responsive versions
How easy is it to create a Hero Image?
They are extremely simple to create and don’t take any more skill than adding an image to WordPress.
Here are the step-by-step instructions:
You can then choose to layout the container however you like in terms of columns and rows – you can choose to have column backgrounds, images, insert text or buttons. The options are as limitless as when working in a container without a Hero Image.
What you should bear in mind
As the Hero image is the container background it will only show if you have content in the container. If you’re planning on using little content, insert separators above and below the content to space out the image.
Video tutorial
Here’s a step-by-step tutorial of how to create a Hero image on your WordPress website.
What next?
Once you’ve created the Hero Image you want to make sure it’s going to work on mobile devices. How it displays will depend on the responsive breakpoints of your theme. You can read how to choose the right theme for your website here.
Leave A Comment