Experiencing an issue?

Creating the Header

The header is the top bar of information on a web page. It contains your site navigation (also called menu links), a logo, social media links, and the name of the site. It’s the first thing visitors see on your site.

Adding content to the Header Component is described elsewhere. This article shows you how to create a header with the Header Component. Use this tool when adding a Header to a blank page, or to replace the header on an existing page. It's not possible to have more than one Header Component on a page.

See Also

Note: Headers are a universal component. Any change you make to the Header Component on the Homepage appears on all website pages.

 

 

1  Creating a header

Place a header on your website by dragging a Header Component to the top of the Homepage.

  1. Click WEBSITE on the top menu bar. 
  2. On the left side menu, select the CONTENT folder and then click Manage. The Website Content page displays. 
  3. Hover your mouse pointer on Homepage.
  4. Click the Edit button. The Edit Content area opens.
  5. Drag the Header Component to the top of the web page.

 

header-1b.png

 

2  Understanding Header Component elements

The Header Component has two parts:

  • 3-column section on the left
  • 2-column section on the right


a-nav-3.png

 

Empty Cell

Load content into an empty cell, such as a logo, text, and images.

 

Navigation Links

Visitors click these links to see other pages on your site. You can customise the menu item text and links.

 

Social Media Links

When the basic settings are configured properly, these links automatically connect visitors to your social media platforms.

 

Button

Customise the button to connect with your visitors. Create a Call to Action (CTA), a Contact Us button, or a link to more information. 

 

Header Tab

Move the Header Component by dragging the green tab.

 

X

Click the X to delete the Header Component and its content.

Maximise-Minimise

Click the Maximise button to expand the Header Component to full-screen width. The Drag and Drop panel on the left side of the screen becomes a floating element.

  • For a cleaner workspace on the screen, click Hide Controls to hide the floating Drag and Drop panel. Click Show Controls to make the panel visible.
  • Click Minimise to reduce the width of the Header Component and return the Drag and Drop panel to its fixed position.

 

nav-max.png

 

Edit

Click the Pencil button to open the component. When open, you can edit the Header Component settings and add content.

 

pencil-2.png

 


3  Adding Header Component content

To add content to the Header Component, open the Edit Header panel.

  1. Hover the mouse pointer on the Header Component.
  2. Click the Pencil button in the bottom right corner. The Header Component becomes bright and the rest of the page dims.

Now you can insert content by adding components from the Drag and Drop panel on the left side of the screen.

 

4  Customising Header Component settings

To change the size, design, or behaviour of the Header Component, open the Settings panel.

  1. Hover the mouse pointer on the Header Component.
  2. Click the Pencil button in the bottom right corner.
  3. Click the round Settings button in the bottom right corner next to the Save button.

 

nav-settings-btn-1.png

For more information about Header Component customisation, see:

 

Related articles