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 many elements you can change in the header, including:

  • Header color
  • Site name
  • Logo
  • Social media links
  • Business phone number
  • Navigation
  • 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. Choose the Appearance tab and pick the new color for your header:

Screen_Shot_2020-05-26_at_16.02.03.png

Screen_Shot_2020-05-26_at_16.04.26.png

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.

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.

header_block_1.png

Edit the site name in Website settings and click Submit 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.

header_block_2.png

Alternately, 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 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).

header_block_3.png

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:

header_block_4.png

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.

header_block_5.png

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:

header_block_6.png

 

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 icons in the header to activate a control panel. Click on the "links" Edit social profiles icon.

header_block_7.png

 

You will be taken to the Website settings > Business info menu.

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

 

header_block_8.png

 

Follow the steps to 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.

Was this article helpful?
1 out of 1 found this helpful