The header block provides a place for branding and other important site-wide functionality such as navigation.
There are many elements you can change in the header, including:
- Header color
- Site name
- Social media links
- Business phone number
- Call to action button
Let's take a look at how you can modify each of these elements.
Modifying the header color
You can choose from the pre-selected color options for your header that match the look and feel of your template.
To access these options, click on the header to activate the Control Pane. Click on the "cog" Block settings icon.
You will appear in the Block settings menu. Click the Appearance tab and pick the new color for your header:
When you add extra elements to the Header, an additional line will appear at the top:
Note: you cannot change the Layout of the Header block but you can add or remove its elements.
Once you are happy with the new color of your header, click Save to confirm the change.
To make the header transparent, check the box next to Overlay next block option. The header will adapt to the background color of the next block during scrolling.
To make the header stick to the top of the screen while the visitor scrolls down, check the box next to Make header sticky.
Changing the site name
To change the website name in the header:
1. Click on the existing website name and enter the new site name:
2. Click Submit and Publish when done.
Adding a logo
You can enable a logo to show in your header by activating the Business logo option in Block settings menu.
To change the logo image, click on the existing logo and then click Replace image:
Choose the new logo on your computer and it will be added to the header.
You can easily resize the logo. Click on the logo to activate the Customize mode and pull the round black handle with an arrow:
You can learn more about adding a logo from this tutorial.
Removing a website name from the header
You can opt to remove the site name from the header and show only the logo by modifying the Header block settings. To do that, follow these steps:
1. Click on the header to activate the control pane.
2. Click on the "gear" icon to access the Block settings panel.
3. Uncheck the option Site name and the website name will be no longer displayed in the header block.
Alternatively, you can also opt to keep only the site name in the header. In this case, uncheck the Business logo option.
To change the font, follow the steps in Changing website fonts.
Click Save and proceed with editing your header.
Adding buttons to the header
You can add one or two buttons in the Header block. Check or uncheck the Primary button (filled with color, so it appears more prominent) or a Secondary button (outlined only).
To edit buttons, follow these steps: Editing buttons
To edit links, follow the steps outlined in this tutorial.
If you want to change button colors, follow the steps in this tutorial.
4. Click Save to confirm your changes.
Changing the phone number
To show your business phone number, first enable this option in the Block settings menu:
Click Save to confirm changes. Your header will now show the information you have added to your Business settings.
To edit the phone number, hover your cursor over the number to activate the control pane.
Start typing your new phone number and click Publish to make the changes live.
Note: When you enable all of the elements of the header, it will split into two sections. The additional space required for the social media icons and the phone number will appear.
Editing social media icons in the header
To edit your social media links in the header, follow these steps:
1. Click on any social media icon in the header. The link editing menu will be activated.
2. Click on the Settings icon next to the social media you want to link:
2. Enter the URL of the corresponding social media page. For example:
If desired, change the link icon: Click on the Choose icon button and search for another social media icon from the Icon Library:
Click on the icon you like and it will automatically replace the existing one in the header.
Note that the color of the icons is set by the website palette.
Visit here to learn more about linking your social media.
Once you are done editing, click Publish to see your header live!
Note: Your header will display on all the new pages you will be adding.
I cannot add a header, why?
If you wish to add a header and you don't see it in a Block Library, it's possible your template already contains a header. It is not possible to add another Header block if a header is already present.
Sometimes it's difficult to see a header when it contains no navigation items or a logo.
To check if you already have added a page header:
1. Hover over the top of the web page. Do you see the blue outline of the very top block on the page? Then the header has been already inserted.
2. Delete the existing header by clicking on the "trash" Delete icon.
Now you can add a new Header block from the Block Library.