Lay out your website with a header

Help center > Customize your website design 6 minutes

Most Internet users will visit your website through the home page where the header put on top of the page will welcome them. So, the header is an important element of web design. All the SiteW editor functionalities can be used to add an original header to your website. For the purposes of this tutorial, we take an easy example, hoping it lets your own creativity free!

The background page

The Pages tab shows the list of your website pages. On top of this list, you can find a special page called Background page. Every block added to this special page is visible on all website pages. They are sorts of common blocks to all pages; that’s mean the background page is the favourite place to create your website header.

Here is an illustration of this principle:

The background blocks are recognizable thanks to their pinky selection frame.

In this tutorial, we will use the background page to create an example of the header.

Example of the banner

Many websites have a banner as header with a full width panoramic image and an overlaid text. So, let’s follow this example.

Full width image

Some blocks can be set up to systematically take up the entire available width in the browser. This is the case for the Image block with the Full width option.

This option is available in the Content tab of the Image block. When a block takes up the full width, the width taken up by the block in the editor has no effect. Just the height setting is effective:

As the block height is fixed, and the width is variable, the setting of the image in the block won’t always be the same, as it depends on the available width.

Image filter

It’s usual to put a welcome title over the banner image. However, depending on the overlaid colours, text readability can be marred. The most usual solution is to lighten the image when the text is dark or darken the image when the text is light.

You don’t need to start your favourite photo editing software as you can directly create a filter in the Design tab of the Image block.

The Color or gradient filter enables you to create colour gradients with different transparency levels. You will find more details about gradient definition in this tutorial.

Before the application of a filter

After the application of a filter

Example of a menu

The Menu block has no background as it is transparent, but it is usual to put a menu on a coloured background. Now it is time to discover the Strip block!

Strip block

The Strip block is in the Design heading of the Content tab

The Strip block can take the shape of skews or waves, but a simple strip will be enough in this example.

The Menu block belongs in the background page, so the Strip block that must be shown above the menu must also belong in the background page.

By overlaying the Strip block at the Menu block’s level, the strip colour will give a background to the Menu block. In order that the strip takes up the entire available width in the browser window, it is possible to tick Full width in the Design tab of the Strip block.

Fixed position and sticky position

As its name suggests, by moving the vertical scroll bar, the blocks scroll in the page. So, the Menu block scrolls just like the other blocks as its default.

But it is usual to want to keep the menu visibility while the page is scrolling, to save visitors going back to the top of the page if they want to change headings. To that end, you have two web design possibilities: the fixed position and the sticky position.

These two options can be enabled in the contextual menu of the blocks.

Fixed position

A fixed block is no longer affected by the scrolling and remains in the same position in the browser window. By fixing the Strip and the Menu blocks, you have the following result:

Sticky position

A sticky block is impacted by the scrolling as long as he hasn’t reached the top of the screen. When the top of the screen is reached, the block becomes fixed to stay visible. Here is the result: