Header block

Header block provides a place for branding and other important site features such as a Navigation Menu. The header is usually placed at the very top of your website and it is a place where your site visitors get to know your site.

There are many elements you can add to the header, including:

• Site name
• Logo
• Social media links
• Business phone number
• Navigation Menu
• Call to action buttons

Let's take a look at how you can modify each of these elements.

Note: When you edit the elements in your Header block on one page, these amendments are applied to Header blocks on all other pages also. The Header block will have the same layout on all pages it is added to.

Customizing the block appearance

You can customize your Header block appearance in various ways - choose one of the pre-selected color options for your header that match the look and feel of your site template, make the header sticky or make it overlay the next block.

To access these options, hover over the Header block and click Block settings:

In the Appearance tab, you will be able to pick the new color for your Header block:

To make the header stick to the top of the screen while the visitor scrolls down, check the box next to Make header sticky.

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.

Once you are happy with the appearance of your header, click Save to confirm the change.

Customizing the block layout

You cannot change the placement of the Header block elements but you can add or remove them. To do so, hover over the Header block and click Block settings: 

In the Layout tab, you will be able to enable/disable the appearance of certain elements in the Header block:

If the elements won't fit in one line, an additional line will appear at the top:

Adding a logo

You can enable a logo to show in your header by activating the Business logo option in the Layout section of the Block settings menu.

To add your own image as a logo, follow these steps:

1. Click on the existing logo to trigger the appearance of the image editing panel.
2. Click Replace image.
   
   
   
3. Choose the new logo file on your computer.

The new logo will be added to your site. You can learn more about adding a logo from this tutorial.

Editing social media links

To edit your social media links in the Header block, 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 button next to the social media icon you want to link:
   

   

3. Enter the URL of the corresponding social media page.

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

   

Note that the color of the icons is set by the website palette. Follow the steps to customizing your social media icons.

Changing the phone number

To show your business phone number, first enable this option in the Block settings menu:

To edit the phone number, simply click on it and type in the new number.

Adding the Navigation Menu

The Navigation Menu, much like all other elements of your site, can be added or removed in the Layout section of the Block settings menu:

You can also make a local Navigation Menu for a particular page. Turning on local navigation on a specific page allows you to hide other Navigation Menu items on this specific page, while they will be displayed in global navigation on other pages. Here’s how to turn on local navigation:

1. Go to the page where you want to create page-specific navigation.
2. Click on the Navigation Menu and then click More...
   
   
   
3. Click Convert to local element: 
   
   
   

Now you can hide a page from navigation and this change will be visible only on the page where you have enabled the local navigation. To disable local navigation, follow the steps above and click Revert to global element.

To learn more about Navigation Menu editing, follow this tutorial.

Editing the buttons

Your Header block can contain up to two buttons. Check or uncheck the Primary button (filled with color, so it appears more prominent) or a Secondary button (outlined only) in the Layout tab of the Block settings.

If you want to change button colors, follow the steps in this tutorial. To hyperlink a button, click on it and then click on the "chain link" icon:

You will be prompted to manage the link. Review this tutorial to learn how to create links.