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 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, hover your cursor over 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. Hover your cursor over the current website name and click on the "pen" Edit site name icon.
Edit the site name in Website settings:
Click Submit and Publish when done.
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.
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. Hover over the website name to activate the control panel.
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 in your Business settings.
To edit the phone number, hover your cursor over the number to activate the Control panel.
You will be taken to the Website settings menu where you can update your contact phone number in the Business Info section.
Note: When you enable all the elements of the header, it will split into two sections, so the additional space required for the social media icons and the phone number can appear.
Editing social media icons in the header
To edit your social media links in the header, follow these steps:
1. Hover over any social media icon in the header. The link editing menu will be activated. Click on the "chain" link:
2. In the Link )) menu, enter the URL of the corresponding social media page. For example:
3. To change the social media icon, hover over the existing icon you want to change:
In the icon selector menu, type in the name of the social media:
Click on the icon you like and it will automatically replace the existing one in the header:
Click Save to confirm the change. 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 add. Simply add the first block and the header will appear on top of it.