Adding Headers and Footers
Overview
Headers and footers are global elements that can be added to your pages to provide a consistent navigation across the site. They work in exactly the same way except headers are added at the top of the page and footers to the bottom.
Editing a header/footer on one page will change it across all pages where it is added.
Headers/footers can be setup by Supadu or, for more advanced users, you can set them up yourself. This help page covers how to add/remove headers from your pages.
Adding a Header to a Page
-
Go to the page in Supadu
-
Right-click in the page towards the top and choose Canvas > Add header
-
When the Create/edit header toolbox appears (see screenshot below), there are 2 choices you need to make:
(1) Placement. Choose how you want your header to span the screen - either the width of the editable content (around 960 pixels), or the full width of the screen. This choice only matters if you want to add content like a background that is wider than the main content on the page. If unsure, choose the first option (full width).
(2) Header Selection. Click on the header you want to add. These will be any headers previously created under your client account. They may be only one, or there may be several.
-
Click the continue button.
-
The screen will refresh with a confirmation message, and after a few seconds the page will reload with the new header. Note: the page will save at this point so make sure you don't mind any recent edits being saved.
-
There are 2 possible ways the header may be displayed in the editing Supadu page:
-
Embedded iFrame. This is when the embed app is placed in the header and the header is pulled into an iFrame. To avoid conflict with Supadu, embedded code is always diabled in editing view and you'll need to Preview to see the header in context with the rest of the page.
Example:
-
No iFrame. This when the header is created by adding images and text in the same way as editing a normal page. In this case, you'll see the header on the page while in editing mode.
Example:
Adding a Footer to a Page
-
The process is essentially the same as adding a header except you right-click in the page towards the bottom and choose Canvas > Add footer
Removing a Header or Footer from a Page
-
Right-click in the page and choose either Canvas > Remove header or Canvas > Remove footer