Page headers and footers can be added to page templates, which form the basis of individual pages. Since different page templates can be applied to different pages, page headers and footers can appear differently on different pages.
Page headers and footers can also be added directly to pages that are based on templates without predefined header and footer content.
Modifying the page header
Within a page template, the page header is simply the content that appears at the top of the template and thereby, the top of each page that is based on it. Typically, it contains your organization name and logo.
To modify the page header within a page template, follow these steps:
- Within the Website module, click the Page templates option.
- Within the list of templates on the left, click the template you want to modify. The selected template will appear on the right.
- Click the Edit button.
- To add elements to the page header, click the Gadgets button, then drag and drop a gadget from the list into layout cells or placeholders at the top of the template, or above or below existing layouts and gadgets. If you want to add text and graphics, use a content gadget.
Placeholders define the areas within a page template where layouts and gadgets can appear. A layout can be used to divide a page into sections consisting of multiple columns. - To delete an existing gadget within a page header, position your pointer over the gadget then click the Trash icon.
- To move a gadget, position your pointer over the gadget, then drag the Move icon to the new location.
- To modify dynamic gadgets, like menu gadgets and login gadgets, hover over the gadget and click the Settings icon. From the gadget settings, you can control the appearance and behavior of the gadget.
- To modify content gadgets – displaying custom content such as text, graphics, etc. – position your pointer over a content gadget then click anywhere within the gadget.
- Using the content editor that appears, you can add or modify the content within the content gadget.
- Once you are finished modifying the page template, click Save. Any changes made to a template are automatically applied to all pages that are based on that template.
If you want a gadget to appear on top of your logo graphic – a log in gadget, for example – you should add a layout, then set the background image of the layout to your logo, and add the gadget to a cell within the layout. Whether you add a one-column or two-column layout might depend on where you want the log in gadget to appear within the layout.
Designing a page header
Page headers typically consist of a menu, an organization logo, and maybe a graphic. You might want to include breadcrumbs that indicate the visitor's current position within your site's menu hierarchy. You may also choose to include a log in form or log in button within the page header, or maybe you'd prefer to see it within the body of the page.
You might even want to add an animated slideshow to your page header.
To add these elements to a page header within a page template, insert the following gadgets into layout cells or placeholders at the top of the template:
- Menu: Menu gadget
Depending on the current website theme, the menu may be vertical or horizontal. You can control the order of menu options from the Site pages screen, and control whether a page appears in the menu from its page settings. Within the menu gadget settings, you can choose whether to include all menu pages, only pages at the top level of the menu hierarchy, or only subpages of the currently displayed page. - Logo, banner: Content gadget
You can combine text, pictures, and other content. You can format the text, using local formatting or text styles, or use ArtText to create stylized text with special effects such as drop shadows. You can layer and overlap content so that text can appear on top of a picture, for example. You can also overlay text on a graphic by setting the graphic as the background image for the content gadget as part of the gadget's settings. - Breadcrumbs: Breadcrumbs gadget
Each page in the menu hierarchy is displayed as a link that the visitor can use to jump up to a higher level page. The style of the links and the current page name is defined separately for each theme, and can be modified from the Colors and styles screen. - Log in form or button: Log in form gadget or Log in button gadget
As part of log in gadget settings, you can choose whether you want the page preview to display the log in form as if the user is logged in or not logged in. - Animated slideshow: Slideshow gadget
You can display images from a folder on the Files screen or from a photo album gadget on your site.
Modifying the page footer
Within a page template, the page footer is simply the content that appears at the bottom of the template and thereby, the bottom of each page that is based on it.
To modify the page footer within a page template, follow these steps:
- In the Admin view, select Website from the sidebar menu.
- Select Page templates from the top menu.
- Within the list of templates on the left, click the template you want to modify. The selected template will appear on the right.
- Click the Edit button in the top left corner of the screen.
- To add elements to the page footer, click the Gadgets button, then drag and drop a gadget from the list into layout cells or placeholders at the top of the template, or above or below existing layouts and gadgets. If you want to add text and graphics, use a content gadget. Placeholders define the areas within a page template where layouts and gadgets can appear. A layout can be used to divide a page in sections consisting of multiple columns.
- To delete an existing gadget within a page footer, position your pointer over the gadget then click the Trash icon.
- To move a gadget, position your pointer over the gadget, then drag the Move icon to the new location.
- To modify dynamic gadgets, like menu gadgets and login gadgets, hover over the gadget and click the Settings icon. From the gadget settings, you can control the appearance and behavior of the gadget.
- To modify content gadgets – displaying custom content such as text, graphics, etc. – position your pointer over a content gadget then click anywhere within the gadget.
- Using the content editor that appears, you can add or modify the content within the content gadget.
- Once you are finished modifying the page template, click Save. Any changes made to a template are automatically applied to all pages that are based on that template.
Designing a page footer
Page footers typically display copyright information or a disclaimer. Depending on the size of your site, you might want to display text links to selected site pages, or include a link to a sitemap of all the pages in your site menu. You might also want to include social sharing buttons that allow visitors to share the page with one or more of their social networks.
It's also a good idea to include links to your organization's privacy policy and terms of use. Including these policies in the footer of your website makes them available on every page where the footer appears.
To learn more, see Sharing your organization's policies.
To add these elements to the page footer within a page template, insert the following gadgets into layout cells or placeholders at the bottom of the template:
- Copyright info: Content gadget
- Privacy Policy and Terms of Use: Content gadget
- Links to selected site pages: Navigation links gadget
Within the gadget's settings, you can choose whether to link to all pages in your site menu, to pages in the top level of your menu, or to subpages of the currently displayed page. - Sitemap: Sitemap gadget
You can control whether a page appears in the menu (and therefore the sitemap) from its page settings. - Sharing buttons: Sharing buttons gadget
For each button, you can modify the HTML code used. For example, you could change the code so that the current like count does appear beside the Facebook Like button.
