Header Block

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 you can modify each of these headers.

Changing the site name

To change the website name in the header:

1. Hover over the existing website name and click on the "pen" Edit site name icon.

2. You will be taken to the Website settings menu. Locate the Site name field and enter the new site name. 

3. Click Submit to confirm the changes. Your new site name will be updated on all pages.

Adding a logo

You can enable a logo to show in your header by hovering the website name and clicking on a "gear" Settings icon. Then in the Block settings menu activate the Business logo option.

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" Change logo icon.

3. In the Website settings menu, locate the field Site logo. Click on Choose file to locate the new logo image on your computer. Click Open and the new logo will appear in the preview window.

4. Click Submit to confirm the change. Your logo will appear in the header of your website.

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. Hover over the website name to trigger the control pane appearance. 

2. Click on the "gear" icon to access the Block settings panel. 

3. 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 site name 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 Business logo option.

Click Save and proceed to edit your header.

Adding buttons to the header

You can choose the Header block with two buttons. To edit them, 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 Block settings pane.

3. You can choose to display one or two buttons in your header. Check or uncheck the Primary Button (filled with color, so it appears more prominent) or Secondary Button (outlined only).

4. Click Save to confirm your changes.

5. To edit the links that the visitor will navigate to using these buttons, click on the "chain link" icon. You will be prompted to manage the link. 

You can change additional settings of your Header block. While in the Block Settings menu, navigate to the Block Appearance section.

Changing the phone number and social networks

To show your business phone number and social media icons linking to your social media profiles, first enable these options in the Block settings menu:

Click Save to confirm changes. Your header will now show the information you have added in your Business settings.

Note: In order to accommodate these options, an additional line of icons will appear in the Header block.

Editing business information in the header

To edit the phone number, hover over the number and click on the "phone" Edit phone icon.

You will be taken to Business info settings. Update the information as required. 

3. Click Submit to confirm the changes.

Editing social media links in the header

To edit your social media links in the header, follow these steps:

1. Hover over any social media icons in the header to activate a control pane. Click on the "links" Edit social links icon:

2. In the Business info settings, scroll down to Social profiles and click Add social profile button.

Tip: 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. To undo deleting, click on Undo change arrow in the top-right corner of the Sitebuilder.

Once you are done editing, click Publish to see your header live!

Note: once you have published the Header navigation, it will be automatically added to all your new website pages.