The header of your site usually is where you find your site title, a business logo, and navigation links to other pages of your site. The header is usually placed at the very top of your website.
Every Sitebuilder template has a Header block by default, so you don’t need to add it manually unless you’ve deleted it.
In this case, click the Plus (+) button on the top of your page, choose Header in the Block library, and click the header layout to add it to your page.
Or you can use the Undo button on the Topbar to reverse the action.
Note: You can only have one Header block per page.
Changing Header block layout
Changing the layout of the Header block is a bit different from changing it in other blocks. The default header doesn’t have a Switch block layout button in the Block settings.
Note: The Header layout can be page specific, but the content is global.
To change the header layout, follow these steps:
- Choose the place where you want to insert the Header block and click the (+) Plus button.
- In the Blocks library, navigate to the Header section and click the block layout that appeals to you.
- Since it’s only possible to have one header per page, you will see the Block replacement message. Click Replace.
The old header will be replaced with the new layout.
Note: Alternatively, you can just delete your default header and add a new one. Then you won’t have to deal with the Block replacement message.
The new header will also have the Switch block layout button in the Block settings > Layout, so you don’t have to delete it and add a new one again if you decide to change its layout one more time.
Note: The Header layout can be page specific, but the content is global.
Header block elements
The elements you can add to the Header block are:
- Business social profiles
- Business phone
- Business logo
- Site name
- Navigation
- Primary button
- Secondary button
Let's take a look at how you can modify each of these elements.
Customizing the Header block settings
You can customize the Footer block with the help of its control pane. To activate it, hover over the block and then click the Block settings icon.
The block settings menu consists of two tabs: the Layout tab and the Appearance tab.
In the Layout tab, you can choose which elements should be displayed in the header. (In some templates, most of them are unticked by default.) Tick the desired checkboxes to add or untick to delete the options from the footer. The design will update automatically.
If you tick all the elements in the Layout tab and they don't fit in one line, an additional line will appear at the top of the header.
In the Appearance tab, you can pick the new color for your Header block.
To make the header stick to the top of the screen while the visitor scrolls down, check the Make header sticky box.
To make the header transparent, check the Overlay next block option. The header will adapt to the background color of the next block.
Once you are happy with the appearance of your header, click Save to confirm the change.
Note: When you edit the elements in your Header block on one page, these amendments are also applied to Header blocks on all other pages. The Header block will have the same layout on all pages it is added to.
Adding a logo to your Header
You can enable a logo to show in your header by ticking the Business logo option in the Layout section of the Block settings menu.
You can learn more about adding a logo from this tutorial.
Adding and editing social media links
You can add links to your social media profiles in your header. Tick the Business social profiles option in the Layout section of the Block settings menu. To customize your social media links in the Header block, follow the steps from our Adding social media accounts tutorial.
Note that the color of the icons is set by the website palette.
Changing the phone number
To show your business phone number, first, enable this option in the Block settings menu.
To edit the phone number, click it, and you will be redirected to the Business info tab where you can change the phone number and other business-related information. The phone number will automatically be distributed to all the sections of your website where it's needed.
Adding the Navigation menu
The Navigation menu, much like all other elements of your site, can be added or removed in the Layout section of the Block settings menu.
Learn more about setting up and customizing your website navigation from this tutorial.
You can also convert your navigation menu to the local element.
Editing the buttons
Your Header block can contain up to two buttons. Tick or untick the Primary button (filled with color, so it appears more prominent) or a Secondary button (outlined only) in the Layout tab of the Block settings.
If you want to change button colors, follow the steps from this tutorial.
To hyperlink a button, click it and then click the Link icon. You will be prompted to manage the link. Review this tutorial to learn how to create links.