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.

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 the mouse pointer on the Homepage.
4. Click the Edit button. The Edit Content area opens. 
   

1  Opening the Edit Settings panel

Open 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.

2  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.

3  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

Control which devices display the content. The default is all devices. To learn about visibility settings, see:

• Customising Visibility