IT ENGLISH BOARD

How to change Header and Footer

Website
Author
author
Date
2020-07-16 21:25
Views
1041
Modified on: Wed, 17 Jun, 2020 at 10:59 AM




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.
5HOGke93ZPessfmMfTS-0tBb0XhOMtobNw.jpg?1565692371

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  HeaderFooter 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.
    8hfJhUluYAhIxxvnThqErTa0z0YluRQp9w.jpg?1565692408
  • 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 ajR07L7aB9DnppTiovU7kdUwWcZyPlI0iw.png?1557483569 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 theFFfPRDM8xhqvzB-o7NnMnQhyH9OqIBEDoQ.png?1557485730 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 theQYz3C7eNiQ_gTOcwcaG7O0RQNxiyPSPGgw.png?1557485864 Bring to front and hboRpGTuISu4yfeNFd4_MBYkvS3uZueUJg.png?1557485880 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.
    5aDFnXXlnPLWJrpmf6g8wj_nwPqfspHIQA.jpg?1565692466
  • 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 gkx9KspRUlnZvmn_rU8TQeaR-SvVAqaAmg.png?1557494795 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 GMEA2MkXkbXDPYLTicw8N-JcdC7GKt_cjQ.png?1557495086 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? 

Total Reply 0

Total 104
Number Title Author Date Votes Views
73
Website not working in smartphone view   (6)
author | 2020.07.16 | Votes 0 | Views 1002
author 2020.07.16 0 1002
72
LiveChat Object. How to add a chat
author | 2020.07.16 | Votes 0 | Views 988
author 2020.07.16 0 988
71
RESPONSIVE DESIGN TROUBLES (2)
author | 2020.07.16 | Votes 0 | Views 1214
author 2020.07.16 0 1214
70
How to check the correct functioning of a responsive Website using the local Preview
author | 2020.07.16 | Votes 0 | Views 1022
author 2020.07.16 0 1022
69
How to change Header and Footer
author | 2020.07.16 | Votes 0 | Views 1041
author 2020.07.16 0 1041
68
How to manage the contents of a responsive website
author | 2020.07.16 | Votes 0 | Views 1142
author 2020.07.16 0 1142
67
How to set up a redirection according to the device resolution
author | 2020.07.16 | Votes 0 | Views 977
author 2020.07.16 0 977
66
How to correctly report the Desktop and Mobile URLs in the page code
author | 2020.07.16 | Votes 0 | Views 1148
author 2020.07.16 0 1148
65
How to create the Desktop and Mobile versions of a website
author | 2020.07.16 | Votes 0 | Views 1035
author 2020.07.16 0 1035
64
How to create a Responsive Website
author | 2020.07.16 | Votes 0 | Views 1021
author 2020.07.16 0 1021
New