Skill Level: Beginner
Changing the colours on a website to match or compliment your logo will give the appearance of a well thought out, branded design. Have a look at the websites of some of the leading names in retail and ecommerce and you will see how they have used their logo colours within their design to achieve this.
The easiest areas to add your chosen colours are the website background (the area that sites behind the central main content), the header, the navigation bar, the block title bars and the footer, but remember to keep it clean and simple so that you donít overpower the content with your design.
See our blog post The Basics of Ecommerce Web Design - Part 1 for more detailed information about choosing your colours.
Add a colour or image to the background of your website
Add a background colour or image to your header
If you have assigned your logo into the Header Background Image field you will need to remove this and add it to the Header Content field before proceeding with the next steps. Our previous blog post, How to: Insert a logo into your Bluepark website, explains how to do this in more detail.
Always remember, however, that your logo and navigation bar will be positioned on top of this area so you need to make sure they stand out against the background you add in. Equally, you need to ensure they don't clash with the background colour or image. If in doubt, it is best to leave it transparent.
Change the colour of your navigation bar
Styling your blocks
Each block within the layout has a title bar. This is the area at the top of the block which informs the customer what the block is about. It also visually divides the column up to allow easier navigation of the page. The left, right and centre columns have their own block settings and will need to be adjusted for each. For more information about layouts, columns and blocks please see our Anatomy of a Bluepark Website Infographic.
These settings will allow you to create all sorts of design combinations on your blocks as shown below and, of course, your left, right and centre blocks can all have their own unique style too.
By now, with your logo added and your colours set you should get a real sense of a professional and branded look. But always remember, the main objective of your website is to sell your products, so don't overpower these with your design. Look out for our next post in this series, The Basics of Ecommerce Web Design - Part 2, which will delve deeper into the design process with typography, images and layouts.
Try Bluepark for FREE for 14 days
Full access to everything including our support team, no card details required