The Header block at the top of your site in Loopia Sitebuilder usually holds the site title, a business logo and navigation links to your other pages. Every template includes a Header block by default, so you don’t need to add one unless you’ve deleted it.
Adding the Header block
If you’ve deleted it, click the (+) at the top of the page, choose Header in the Block library and click the header layout you want. You can also use the Undo button in the top bar to undo the deletion.
Note: you can only have one Header block per page.
Changing the Header block’s layout
Changing the header layout works slightly differently from other blocks – the default header has no Switch block layout button in Block settings.
- Choose where to insert the Header block and click the (+) button.
- In the Block library, go to the Header section and click the layout you like.
- Since you can only have one header per page, a Block replacement message appears. Click Replace.
The old header is replaced by the new layout. Alternatively, delete your default header and add a new one to avoid the Block replacement message. The new header has a Switch block layout button under Block settings → Layout, so next time you can switch layout directly.
Note: the header layout can be page-specific, but its content is global.
Elements in the Header block
You can add these elements to the Header block: Business social profiles, Business phone, Business logo, Site name, Navigation, Primary button and Secondary button.
Customising the Header block settings
Hover over the block and click the Block settings icon. The menu has two tabs: Layout and Appearance.
In the Layout tab, choose which elements appear in the header (in some templates most are unticked by default). Tick or untick the boxes and the design updates automatically. If you tick every element and they don’t fit on one row, an extra row is added at the top of the header.
In the Appearance tab you can:
- Choose a colour scheme – click the scheme you like and the colour changes immediately.
- Adjust block spacing – drag the top or bottom slider left to increase spacing and right to reduce it.
- Make the header sticky – tick Make header sticky to keep it at the top of the screen as visitors scroll.
- Overlay the next block – tick Overlay next block to make the header transparent; it adapts to the next block’s background colour.
- Move the logo – place it to the left of the navigation or centre it.
- Add a divider – turn on the toggle and adjust the thickness of the line between the Header and Headline blocks.
Note: changes to the Header block’s elements on one page apply to the Header blocks on every other page too.
Adding a logo to the header
Tick Business logo in the Layout section of Block settings to show a logo in your header.
Adding and editing social media links
Tick Business social profiles in the Layout section of Block settings. The icons’ colour is controlled by your site’s colour palette.
Changing the phone number
First enable the phone number in Block settings. To edit it, click the number and you’ll be taken to the Business info tab, where you can change it and other business details. The number is updated automatically wherever it’s needed on your site.
Adding the navigation menu
Like every other element, the navigation menu can be added or removed in the Layout section of Block settings. You can also convert it to a local element for a single page.
Editing the buttons
Your Header block can have up to two buttons. Tick or untick Primary button (filled, so it stands out more) or Secondary button (outline only) in the Layout tab of Block settings. To link a button, click it and then the Link icon.