Header is a top block on a site that is typically displayed on all site pages. It's used to present the branding of the company and help create smooth navigation on the website.

Our team designed a fully customizable and user-friendly header with a wide range of settings. It allows you to add rows and elements of your choice as well as setting up the animation and proper background.

In this article you can find the detailed instructions on how to:

add a header to your site;
change the header layout;
change the header background;
add elements to your header.

Also, you can watch our short video tutorial about header settings:

Adding a header to your site

To get started, select the wireframe-series-1-header block in the gallery:

You can choose whether to add the block to all site pages or to a current one:

Note: we recommend adding the header to all pages. This way, it will become a global block, and the changes made on one page will automatically apply to other pages. Check the article Global blocks to see more information on how to make your header global.

Changing the header layout

If you're planning to add several elements to the header — for example, menus, buttons, social icons, then it will be more convenient for you to place them on separate rows. This way, they won't be stacked in one place, and the site will generally look neater.

Adding rows to your header

You can add a new row to your header in the top left corner of the block:

Important: the maximum number of rows you can have in the header is 4.

By clicking on the "gear" in the top left corner of the row, you can move it within the header, duplicate or delete it and access its settings:

In the Layout tab of the row settings you can change its paddings or add the decorator between the rows:

Note: the option of adding the decorator appears only in headers with two or more rows. Bear in mind that you can't add the decorator to the last row of your header.

Changing the header background

In the Background tab in the row settings you can add color or image background to the header:

When you set a photo as a background of the row, you will see more customization options — e.g., applying filter or color correction:

Important: these settings are applicable for each row in the header separately.

Adding elements to your header

To provide your customers with the additional information about your brand, you may want to add social icons or other elements to the top of your site. This way, it can be easily found by your visitors.

Each row of your header contains 3 empty boxes to fill with content. To add the needed element to it, hover over the empty section and click on the "plus", then choose the element in the pop-up window:

After you've added an element to the box, you can supplement it with other items by clicking on the "plus" sign near the particular section:

You can also adjust the width of the boxes using the dividers that are placed next to them. To do this, hover over the empty space between the boxes, click on the divider and drag it to the needed direction.

Once you've done customizing your header, don't forget to publish your site for the changes to appear live.

For more header customization options, check out the articles:

Making the header transparent
Making the header sticky

Important: if you don't have an option of adding rows to your header, you're using the previous version of the header. You can still proceed with using it on your site. However, we highly recommend to change it to the new one to avoid unexpected issues with display or functionality.

If you experience any issues with the header, copy its name and send us in chat or to support@weblium.com.
Was this article helpful?
Thank you!