Where to use photos on your Flat White Website

Yellow and red stripy tulip

What’s the saying – a picture is worth a thousand words?

Well, photos certainly help to create a mood for your brand, even if you don’t need to rely on them to tell your whole story. This blog explains the different places you can add photos to your Flat White Design website.

We have added photos throughout your website to illustrate how they can be used. You can keep these until you have your own.

Hero Image

The starting point for your website is your Hero Image. The term “Hero Image” can sound intimidating. But it is basically a large image that is designed to fill the screen when your visitor first lands on your website – when someone clicks on “Home”, this is what they will see:

Demonstration of the hero image

This image will probably be the first time the visitor sees your website, so it needs to pack a punch. If you are commissioning photos for your website, make this the most important one. If your business is not naturally photogenic, then it’s fine to use photos from the many fabulous photo resources that are around. Choose one that creates the right mood for your business.  If you are selling food, then that’s easy – choose something that makes your mouth water! And make sure that it’s something that you actually serve – no point showing a fashionable foodie fad if you specialise in burger and chips.

The Hero Image needs to be a good quality image so that it works on even the highest resolution screens – I recommend a minimum width of 2500px.

Whatever sort of image you choose, you also need to think about where text can go on our Hero Image. Make sure that there is a relatively plain area in the middle. Then, when you add your Site Title or Logo, it will show up clearly. You can choose the Site Title colour so that you get the best contrast – as you can see in the image below, the site title in white shows up much more clearly than the site title in grey.

Two examples of a hero image, one with clear text, one with unclear text

Remember that it is really easy to update your Hero Image too. If you have a new product or service to launch, why not add a new photo here?

Background Images

Each page on your Flat White Website is designed to have a background image.  This Background Image shows up behind the Page Title, which is at the top of the page, and appears again above the Footer at the bottom of the page. When the visitor scrolls down the page, the image stays in place as the content scrolls – hence the name because the photo appears to stay in the background.

Background Images set the mood for the website, rather than selling individual services or products. Choose an image that is appropriate for each page. For example, for the About Page, a photo of you at work will create extra context for a headshot that you might choose to have on the page.

Background Images are also a feature of the Home Page Panels, which you can add on your Home page. These will appear above the relevant panel.

Example of a background image

Again, this is an opportunity to provide more context for the services or goods you offer in your business, and help to make a strong impression of what you offer.

Images on pages

You can add photos within the content of any of your website pages, within the WordPress Text Editor. But use carefully. Choose one really strong image, rather than use too many. Apart from making the website load more slowly, one well chosen image will stay in the mind of your visitor far more effectively than a selection of mediocre snaps.

If you have lots of high-quality images that promote your business, you could add a Gallery within a page – or why not add a Gallery Page, which visitors can view via your Menu?

Whatever images you choose, make sure that they represent the qualities of your brand. And remember – updating your website is really important, and adding new images, regularly, is a really easy and really effective way to do this.  Time to get your camera out!

You can find more information about how to upload and edit photos for your website here. And if you want to find great resources for royalty free photos, these are links to three really good sites from which you can download some fantastic royalty-free images. Many resources on the web are given freely. – please make sure that if you use any of them, you credit the owners.




Pin for later:

Where to add photos to your website