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.

Weblium 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:

Adding a header to your site

Open the list of blocks and select a header:



You'll be asked whether to add the block to all the site pages or to the 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 Global blocks — header and footer article 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 a decorator appears only in headers with two or more rows. Bear in mind that you can't add a decorator to the bottom row of your header.

Changing the header background

Important: If you have transparency enabled for the header, then to change the background displayed when you scroll the page, you need to turn off transparency, adjust the background, and turn it back on.

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., 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.

Each row of your header contains 3 empty containers to fill with content. To add elements to them, hover over an empty container, click on the "plus" icon, then choose an element in the pop-up window:



After you've added an element to the container, you can continue adding other items by clicking on the "plus" icon:



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



Once you're done customizing your header, 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

Updated on: 12/05/2023