Customizing the Header block

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
  • 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, click on the header to activate the Control Pane. Click on the "cog" Block settings icon.

Screenshot_2021-06-02_at_19.06.38.png

You will appear in the Block settings menu. Click the Appearance tab and pick the new color for your header:

Screen_Shot_2021-04-05_at_12.48.23.png

When you add extra elements to the Header, an additional line will appear at the top:

Screen_Shot_2021-04-05_at_12.51.41.png

 

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:

Screenshot_2021-06-02_at_19.07.32.png

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:

Screenshot_2021-06-02_at_19.09.17.png

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:

Screenshot_2021-06-02_at_19.11.30.png

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.

Screenshot_2021-06-02_at_19.13.15.png

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

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 to your Business settings.

To edit the phone number, hover your cursor over the number to activate the control pane.

Screenshot_2021-06-02_at_19.14.49.png

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:

Screenshot_2021-06-02_at_19.18.29.png

 2. Enter the URL of the corresponding social media page. For example:

Screenshot_2021-06-02_at_19.17.01.png

If desired, change the link icon: Click on the Choose icon button and search for another social media icon from the Icon Library:

Screenshot_2021-06-02_at_19.21.07.png

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.

Click Submit.

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. 

FAQ

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.

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