Banners are full screen images. They are usually located near the top of a page.
Use a screen wide image as the background for advertising your latest news, product, specials, promotions, collections or events. It looks professional and catches the visitor's attention.
As discussed in my last blog post we try to make your website it easy for the brain to process and therefore comfortable for the visitor. So choose an image of very good quality, with colours that go with your website or that particular landing page and make sure the overlay text is easily legible and visible.
Here an example from Apple advertising events that are happening near your location.
Before we start
- Use images that are at least 1500 px wide so that the image doesn't get blurry when displayed on big screens.
- Make sure your image is not wider than 2600 px on its longest side. This can cause problems on mobile devices.
- Avoid text in the image. It is not good practice, does not work well when the image gets cropped for smaller screens and search engine can't pick it up. For smart SEO work with text overlay.
- Limit the number of words. Keep it short and to the point.
- Add a Call To Action (CTA) button that takes the user to a page with more information, the online shop or a booking page.
I am working with the website of my favourite shoe store Milo & Macy Shoes in this tutorial. Let's get started.
Change the banner image and text
1. Login to your Squarespace account and go to the page where you would like to make the changes.
2. Hover over page or the existing banner and find the options EDIT - BANNER - SETTINGS appearing in the top left corner. Click BANNER.
Alternatively you can open the page settings from the list of pages and open the MEDIA tab.
3. Click REMOVE to remove the current image if there is one.
4. To then add an image, click on the white field. This will open up your file browser. Find your new photo and click Open.
5. Save the settings with your new image. Step one done.
6. Now we need to edit the overlay text. Hover over the banner and click EDIT to start.
With some templates you will edit the overlay text in the page Settings. Check here for more specific template instructions.
7. Make the changes by selecting, deleting and typing your new words and use any of the text formatting options to finish.
Then make sure the button still links to the desired page. If you need to change the link, hover over the button, click EDIT and set the new Clickthrough URL either to Content, File or to an external page. Save the changes.
8. Finished. :)
You can do this as many times as you like.
Alternatives to banner images
- Images: Squarespace just recently added a variety of different image layouts to all templates. You can play around with them, trying to add them to the top of the page and see if that works better for you.
- Galleries are image sections that allow you to have more than one image So if you would like to advertise your new boots, your upcoming winter lookbook and the sale on summer sandals at the same time, they might work better for you. There are different layouts for the different templates.