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. Click PUBLISH on the top menu bar. A popup window displays. Click Website Content > Manage.

mceclip0.png

The Website Content page displays.

  1. Hover your mouse pointer on Homepage.
  2. Click the Edit button.

Untitled design.png

The Edit Content area opens. Drag the Header Component to the top of the web page.

f-13.png

 

2  Understanding Header Component elements

  1. Empty column cell - Load content into the cell, such as a logo, text, and images. Click the Settings icon to customise the column (e.g. add cells).
     
  2. Navigation Links - Visitors click these links to see other pages on your site. Click the Settings icon to customise the menu items and links.
  3. Settings - Click this button to customise the header. Configure margins, padding, spacing, and more.
  4. X - Click the X to delete the Header Component and its content.
  5. Header tab - Move the Header Component by dragging the green tab.

f-14.png

Header features

  • 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. Click Minimise to reduce the width of the Header Component and return the Drag and Drop panel to its fixed position.

f-15.png

  • Hide / Show Controls - For a cleaner workspace on the screen, click Hide Controls to hide the floating panel. Click Show Controls to make the panel visible. 
  • Edit - Click the Pencil button to open the component. When open, you can edit the Header Component settings and add content.

 

3  Adding Header Component content

To add content to the Header Component, open the Edit Header panel. Hover the mouse pointer on the Header Component. 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 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.

f-16.png

For more information about Header Component customisation, see:

 

Related articles