A header block is a visual element placed at the top of the page. It provides a place for branding and other important site-wide functionality such as navigation.
There are four types of Header blocks that you can choose from:
- A header that contains your logo, navigation links, and a phone number so visitors can easily get in touch with you
- A header that contains a call-to-action (CTA) button
- A header that contains only your logo and a site name
- A header that contains links to your social media profiles
Let's take a look at how can we modify each of these headers.
Replacing a logo
1) To add your own image to the header, click on the existing logo to trigger the appearance of the image editing pane.
2) Click on the "picture" icon and you will be prompted to choose the image from your computer.
3) You can change the shape of the logo to keep in rectangular by navigating to the Keep Aspect Ratio button in the top right corner of the screen.
Press the icon and navigate back to the logo. You will now be able to select the area of the image to appear as your rectangular logo.
Once you have adjusted the shape, click Submit and your logo will be uploaded to your website.
Choosing a text-only website name
You can opt to remove the logo from the header by modifying the Header block settings. To do that, hover over the logo and website name to trigger the Settings pane appearance.
Click on the "gear" icon to trigger the block settings panel.
Uncheck the option Business logo and the logo image will be no longer displayed in the header block.
Note: You can also opt to keep only the logo image in the header. This is useful if you want your website name to be displayed in a different font or color. In this case, uncheck the Site name option.
Click Save and proceed to edit your header.
Changing the Call-to-Action button
You can choose the Header block with two Call-to-Action buttons. To edit them, please follow these steps:
1) Choose the Header block with buttons in the Gallery and click on it to add to your website.
2) Hover over the buttons to trigger the button editing pane.
3) To edit the links that the visitor will navigate to using these buttons, click on the "chain link" icon. You will be prompted to set one of the following types of links:
- To link the button to the website page, choose the page from the drop-down menu
- To link the button to another website, enter the destination URL in the window
- To enable your visitors to send you an email directly from the header, add the following code to the window:
where firstname.lastname@example.org should be replaced with your own email.
4) You can choose to display one or two buttons in your header. To modify this, click on the "gear" icon to trigger the Block Settings menu. Here you can check or uncheck the Primary Button (filled with color) or Secondary Button (outlined only). Click Save to confirm your changes.
5) You can change additional settings of your Header block. While in the Block Settings menu, navigate to Appearance section.
Here you can change the background color of your Header block and also opt to make the block overlay the section beneath it.
To confirm changes, click Save.
Changing the phone number and social networks
You can modify these details in Website settings.
If you are not happy with the way your header looks, you can always hover over this element and click the "trash can" icon to delete the block and start all over again.
Once you are done editing, click Publish to see your header live!