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
You can also fix the position of the header or footer if you wish.
Locating the Header and Footer Components
To edit the header or footer, go to the Edit Content area.
- Click WEBSITE on the top menu bar.
- On the left side menu, select the CONTENT folder and then click Manage. The Website Content page displays.
- Hover the mouse pointer on the Homepage.
- Click the Edit button. The Edit Content area opens.
1 Opening the Edit Settings panel
Open the Edit Settings panel.
- Inside the Edit Content area, hover the mouse pointer on the header or footer.
- Click the Pencil button on the bottom right corner of the component. The Header, or Footer, opens and is ready to be edited.
- 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.
Choose how to align content: to the top, in the centre, or to the bottom of the component.
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.
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:
To insert a background image, upload a picture from your computer, or insert an image from your File Manager.
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.
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:
ID or Class Name
To learn about custom styling with ID and Class Name selectors, see:
Control which devices display the content. The default is all devices. To learn about visibility settings, see: