Compatibility:

WebSite X5 Evo and Pro

Header and Footer are the two sections which are always present in a template structure. 


The Header  is the top section of the template, the one which is immediately visible when opening a website, and which therefore is used to show the logo, the navigation menu and, in many cases, the search field or the login/logout buttons.


The Footer, on the other hand, is the section you find at the end on the page: it can be minimal, and report only the VAT ID-Number and the link to the Policies, or it can be more complex, and report links to different pages, the social buttons and the form for the subscription to a newsletter service. 


A part from these section, a Side Bar on the left or on the right side of page can also be found in the template structure. This section is usually used to report the page menu and some advertising messages.  


If you are using a preset template, all these elements are already available by default, but you will need to customize them with your own information: for instance, you will need to substitute the placeholder image with your own logo. On the other hand, if you are creating a template from scratch, you will need to create the template structure and define the contents for Header, Footer and possibly for the Side Bar.


Both if you want to add a new element in the Header, Footer or Side Bar and if you just need to modify an element which is already present in the template, the procedure to follow is very similar. Let's assume you're working with a preset template:

  • Go to Step 2- Template Settings and click on the Template Content entry. There, you will find the  Header, Footer and Side Bar section: the available commands and options are the same for every section.
  • Stay in the Header section. The workspace shows the background image on a scale of 1:1, as well as the Objects which have been inserted. If the available space is not enough, you can use the scroll bar to display the part you want to work on.
  • For example, if you want to modify the logo image, you need to click on the corresponding Image Object to select it and then use the  button to open the settings window.
  • On the other hand, if you want to add a title, select the icon for the Title Object and drag it onto the workspace. Use the anchors to position and resize the object, then double-click on it to open the settings window.

As you can see, you have the complete list of Objects at your disposal to configure the Header: you just need to choose which one you want to use and add them in the workspace.

  • You can position the Objects more precisely with the Arrange button and use the options to work on position, size, alignment and distribution.
  • If some objects are placed on top of others, you can use the Bring to front and Send to Back buttons to define the order in which they must be displayed.


#tip - Multiple selection. You can select more Objects at a time by pressing the CTRL or the SHIFT key. Alternatively, you can click the workspace and keep the left mouse button pressed while you draw a rectangle including all the needed Objects.


Responsive Website

If you want to create a responsive website (you have activated the Responsive Site option on Step 2- Template Settings > Resolutions and Responsive Design),  you can use the Responsive Bar reporting all the breakpoints by creating some intervals while you are working at your Header, Footer and Side Bar.


In order to manage the visualization of Header, Footer and Side Bar for each breakpoint, you need to follow these steps:

  • When accessing the Template Content section for the first time, you will find the interval for the Desktop resolution on the Responsive Bar. Don't change interval and create the Header according to the steps reported above
  • When you are happy with the result for the Desktop resolution, select the following interval on the Responsive Bar.
  • The available space is now reduced: consider if it is possible to keep all the Objects. You can make an Object no longer visible by selecting the  Show/Hide button: you can choose to hide the Object for the current resolution as well as for the lower ones.
  • Use the Responsive Bar  to select all the intervals one by one and to manage the Objects' visualization for the different resolutions.
  • You can show an Object you had previously hidden by selecting the desired interval on the Responsive Bar and by using the Show/Hide button to select Hidden Objects management from this viewport. You will find the list of the hidden Objects: choose the one you want to show and click it to make it visible again.  


#tip. For more information see: How to define the template for a responsive website?