Skip to main content

Agency Header

Description

Agency Header is a component that appears near the top of home-templated pages, directly beneath the Global Header. This component controls how the header renders for the website.

Authoring

The Header can only be edited from the website home page. Changes made to it will be automatically inherited by all the child pages.

Configuring the Properties tab

  • Drop in a logo image of your choice.
  • Logo link is a field for hyperlinking your logo, typically to the homepage itself.
  • Enter the logo alt text.
  • Enable translate if your agency or website has subscribed to translation services.

Configuring the Header tab

  • Use the ADD button at the top of this tab to build a link that will be displayed at the top right of the header. Once you add a link, you can add the Link Text, URL, and indicate whether you want the link to open in a new tab. 
  • Configure the header section background color using a color picker.

Configuring the Navigation tab

It's possible to add both dynamic navigation based on your site's structure or to build a Manual Navigation for your website.

Site Structure

  • For every page you add to the navigation, its child pages will be fetched to form the dropdown menu.
  • To hide a particular page from the dropdown, go to that page's properties and select hide in navigation.

Manual

  • It's also possible to build a manual navigation with any number of parent and child pages. 
  • Select the Manual Navigation page you would like to use for your site.  Visit our Manual Navigation control page to learn more.

Additional Configuration

  • Configure the navigation section background color using a color picker.

Configuring the Social Links tab

To boost your social media presence, you can make your accounts visible on the Header. We have a pre-set option available for popular platforms such as Facebook, Instagram, LinkedIn, Spotify, Threads, TikTok, Twitter (X), YouTube, and Eventbrite. Additionally, you can add a custom icon to link to a social media platform not in the pre-set options. It can also be used to promote any website that's relevant to your agency.

Social Links Tab

  • Social Media Text: Select the social media icon to be displayed
  • URL: Web address to the social media page
  • Aria Label: Add a title to provide more context for the people using assistive technology
  • Customer Path: Select the path for the website or social media platform you want to promote on the header.

Configuring the Alerts tab

  • Add site-wide alerts as needed, which will be displayed above the header across all pages.
  • Available alert types: Alert, Warning, Information.

Configuring the Styles

  • Select white text style for the header section if you have configured a dark background color and vice versa.
  • Select white text style for the navigation section if you have configured a dark background color and vice versa.

Configuring the embedded components

  • A Search Bar component is embedded as part of the Header. Make sure to link the search results page to it.

Examples