Customising Header and Footer Settings

In this article, learn how to customise settings for the Header and Footer components. The options for each component are identical.

The settings panels provide options to change the appearance and behaviour of these components. You can modify the header or footer, for example, by changing:

• text alignment
• background images and colour
• borders

You can also fix the position of the header or footer if you wish.

See Also

• Creating the Header
• Creating a Footer
• Customising Menus for Mobile

Locating the Header and Footer Components

To edit the header or footer, go to the Edit Content area. Click PUBLISH on the top menu bar. A popup window displays. Click Website Content > Manage.

The Website Content page displays.

1. Hover your mouse pointer on the Homepage.
2. Click the Edit button. The Edit Content area opens.

Opening the Edit Settings panel

1. Inside the Edit Content area, hover the mouse pointer on the header or footer.
2. Click the pencil button on the bottom right corner of the component. The Header, or Footer, opens and is ready to be edited.
3. Click the round button beside the Save button. The Settings panel displays.

Customising the Settings panel

The Settings panel for the Header and Footer are the same. Both panels contain six menu items. 

• Content Alignment - Choose how to align content: to the top, in the centre, or to the bottom of the component.
• Width - Set the width of the component in absolute terms, by selecting the number of pixels, or as a percentage of screen size. The preset is 100% of screen size.
• Inner Background - Change the appearance of the component background. Click the square button to open the Colour Picker. Choose one of your branding colours (if selected) or a colour from the palette. Click the box with a red line to select a transparent background. For information about branding colours, see Customising Brand Colours. To insert a background image, upload a picture from your computer, or insert an image from your File Manager.
• Outer Background - Add a layer of colour or an image behind the Inner Background. Choose a colour from the Colour Picker, or click the black box with a red line to select a transparent background. To insert an image, upload a picture from your computer, or select an image from the File Manager.
• Spacing - Click the plus (+) or minus (-) boxes to increase or decrease the padding and margins.

Customising Advanced features

You can create a sticky header or footer in the Advanced Settings panel. A sticky component remains in a fixed position as visitors scroll up and down a page. For more information, see Creating a Sticky Website Element.

• ID or Class Name - To learn about custom styling with ID and Class Name selectors, see  Adding CSS 
• Component Visibility - Controls which devices display the content. The default is all devices. To learn about visibility settings, see Customising Visibility.