Header and Footer Content

Step 2 - Template > Customization >

Header and Footer Content

Previous pageReturn to chapter overviewNext page
Show/Hide hidden text

After you have chosen the template to work on (a default template, a custom template or a new template to create from scratch) in the Template selection window and defined the Template Customization, you can use the features in this window to customize the header and footer even more, adding various types of content, such as texts, pictures, animations, slideshows, HTML code, search fields and links.

You can work on the header and footer of the graphic template for both the Desktop display and, if you are working on a responsive website, the various viewports that correspond to the breakpoints that you have set up.

You must choose the Responsive Site option in the Resolutions and Responsive Design window if you want to create a responsive website.

Click to expand/collapse

The commands and options for the Header and Footer are identical.

Click to expand/collapseReference: The template editor

If you have chosen to create a responsive website, the Header and Footer Content window shows a Responsive Bar that you also see in the Resolutions and Responsive Design window.

The Responsive Bar displays all the breakpoints that have been set up and the various intervals between each breakpoint: click on an interval to select it and define the header and footer of the corresponding viewport.

As well as the Responsive Bar, this window also includes the graphic editor, with a Toolbar, for editing the template's header and footer. Underneath the toolbar, you can see the background image of the header or footer of the template you have chosen (default or custom). The image is shown in a 1:1 scale, and you can scroll it, if necessary. Any changes you make with this editor will be shown in real time in the image.

There is a status bar immediately underneath the image that gives this information:

Position: the x and y coordinates of the upper right corner of the selected object are displayed.
Size: this gives the height and width in pixels of the selected object.

If, when defining the Template Structure, you chose the Horizontal - Menu inside the header option as the Menu Type, a gray area marked by a broken line corresponding to the size of the menu appears in the image of the Header. This indication should help you to plan where to position other objects in the header.

There is a list of all the objects that can be used in the template's header and footer underneath the status bar.

These objects are the ones used to compose the pages (see Step 4 - Pages): they are easy to identify, thanks to the filters, and there is a preview available for each one.

Click to expand/collapseReference: Toolbar options

You can use the options in the toolbar to work on the objects you insert in the template's header and footer:

Cut [CTRL+X] - Copy [CTRL+C] - Paste [CTRL+V]

To cut, copy or paste the selected object.

Undo [CTRL+Z] - Redo

These commands undo/restore the last operation to be carried out/undone.

Bring to Front - Send to Back

To bring the selected object to the foreground or background (to show it over or underneath any other overlapping object.

Position and Size

To open another window and specify the coordinates which give the position and size of the selected object. The Keep ratio option (active by default) maintains the object's original proportions if you should resize it.

Hidden object management

This option is available if you are creating a responsive website. You can indicate whether the selected object is visible or invisible in the viewport you are working on (which is set up with the Responsive Bar).

Click on the triangle on the button to open a menu with these items:

Hide for this viewport: the selected object will be invisible in the current viewport.
Hide for this and subsequent viewports: the selected object will be invisible in the current viewport and all the viewports with lower resolutions.
Hidden object management for this viewport: a window opens with a list of all the objects that are invisible in the current viewport. A preview is available for each one, and you can restore visibility from here.  

Object Content

This option opens a window where you can create the object selected from those that have been added to the template's header or footer. The window varies according to the type of object (text, image, etc.).

Some of the objects in the header and footer, for example the animation or HTML code objects that you add will be visible only when the website is opened with a browser.

Click to expand/collapseReference: The list of objects available

To insert an object in the template's header or footer, select its icon from the list and drag&drop it in the editor, in the required position.

To make your work easier, the objects can be filtered and managed with these commands:

Filter List

This shows a list of the filters that you can use to organize the objects to make it easier to identify them. You can, for example, display all the Main page contents or all the Main header/footer contents.

Show Objects Management

This opens the Objects Management window where you can install, uninstall and update all those objects that are not included in the initial Program installation.

The objects that are included in the Main page contents and the Main header/footer contents are:

Once you have inserted an object in the template's header or footer, click on the button (or double-click the object) to open the window for actually creating it.


Best practices:


How to work with templates


Where to find new templates for WebSite X5


How to create a responsive website in WebSite X5 | How to define the template

Further information:


How the search engine works in WebSite X5