Design How-to: Create a header bar


Header bars are a popular website trend especially in modular, grid based design. In this how-to we show you how to create a wallpaper with a header block.

Let’s get started…


Creating a header bar - Customise


To begin, you need to decide on the colour for your header bar. We have a great guide on picking colour schemes, if you could do with little inspiration. Next, choose the header block height – bearing in mind the size of your header content eg. menu, logo and social icons.


Creating a header bar - Sizing


You can create a wallpaper image in an editing software of your choice (nothing fancy – the only requirement is a shape and fill tool). You need to design a rectangular wallpaper ’tile’ using similar dimensions as above. This example shows a 300 pixel bar (the purple block) and a 1700 pixel base/background colour, making up a total height of 2000 px. If any of your pages are longer than 2000 px, adjust the height as necessary. Don’t worry about width (50 pixels is wide enough) – you’re going to tile this image.


Creating a header bar - Uploading header


Navigate to your site editor. Click ‘Design’ in the main toolbar, then select ‘Wallpaper and Icon’ on the left. Upload your image and set the tiling option to ‘Tile’ from the dropdown menu, then click ‘Ok’. Your finished wallpaper image will now tile across the page. This gives the effect of a header bar running across the top of your website, and a block colour background. The wallpaper will display on all your website pages.


Creating a header bar - Preview


The finished look should be similar to the above example (we have used the ‘Tranquil’ template). You may need to rearrange your menu bar, logo and other content via the Pagemaster (under the ‘Design’ tab) once the wallpaper is in place!



More posts by this author

2 Responses to “Design How-to: Create a header bar”

Add a comment

  • (will not be published)

More posts by this author