Your website header is the first thing customers see when they land on your site, so we encourage you to edit it and make sure it's up to scratch. Remember, first impressions count!


The header can be used to display information like your business name, business logo, cover image, and telephone and WhatsApp contact number. You can also include a Send a message button to make it easier for customers to contact you and/or your team in seconds. 


TABLE OF CONTENTS

Accessing your Header menu

To edit your website header, log into your Hub and click on Edit Website (this will take you to your website editor).


From the editor menu, click on Pages. From there, click on Home and then select Header (the first section on the list).  Here's a visual guide for you: 

-


Here you can edit the different components within Header: 

  • Announcement 
  • Logo
  • Cover
  • Menu
  • Titles
  • Buttons
  • Phones
  • Address line
  • Header Layout
  • Header Settings


For detailed tutorials on customizing specific elements within your header, please see our dedicated articles:


Editing your contact number

To edit or even hide your business's mobile/office phone number, just select Phone.


You'll see the following options: 


Now, edit your contact number using the boxes provided. The relevant country codes will already be added for you. 


Finally, tick or untick the relevant boxes to display your Phone/Whatsapp number on your site. If you decide to show it, your phone number will be displayed in this way:


Customizing your Address Line

To display or hide your business address in the header, select Address Line from the menu.


You will see the following options to customize its appearance:

  • Show Address: Simply tick or untick this box to show or hide your business address on your website header.
  • Set Background Color: Choose a color for the address background. You can also use the slider to adjust its transparency for the perfect look.
  • Font Size: Use the slider to make the address text larger or smaller.
  • Set Font Color: Select a color for your address text to ensure it matches your website's style.


Once saved, your changes will be applied instantly.


Choosing a Header Layout

Note: Header Layout preferences are only available for Plus and Growth plan customers.


You can now choose your preferred header layout independently of your main website template! This means you can find the perfect header to make a strong first impression, no matter which overall design you've chosen for your site.


To try it, simply select Header Layout from the menu. You will see a variety of styles to choose from. Click on any option to see a preview, and then click Save to update your header instantly.


Header Settings

The Header Settings menu gives you control over advanced display options for your header section. 

To access it, select Header Settings from the Header component list.


You will see the following toggles to customize your header's functionality:

  • Full Screen Mode: Turn this ON to make your header section span the full width of the viewer's screen for a more immersive look. Turn it OFF to contain the header within your site's standard content width.
  • Show Google Reviews: Toggle this ON to display your Google Reviews star rating and link directly within the header, building instant trust with visitors. Turn it OFF to hide this feature.
  • Show Share Links: Toggle this ON to display social sharing icons for your website (e.g., Facebook, Twitter) in the header, making it easy for visitors to share your page. Turn it OFF to remove these icons.


Simply click the toggle next to each option to enable or disable it. Your changes will be saved and applied to your live site automatically.


Important: The settings for Mobile and Desktop views can be configured independently. Use the toggle at the top of the panel to switch between Mobile and Desktop views. Any changes you make will apply only to the currently selected view, allowing you to perfectly optimize the header experience for each device type.



Well done! Don't forget to click Save and your website header will be updated immediately.


Need a hand?
If you need any further assistance, please message our support team or get real-time help on our Live Chat!