IT ENGLISH BOARD

How to change Header and Footer

Website
Author
author
Date
2020-07-16 21:25
Views
1466
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
103
Join a Microsoft Teams meeting
author | 2020.09.22 | Votes 0 | Views 3018
author 2020.09.22 0 3018
102
How to delete songs and albums from your Google Play Music library
author | 2020.09.19 | Votes 0 | Views 3183
author 2020.09.19 0 3183
101
Watch Prime Video on Chromecast
author | 2020.09.14 | Votes 0 | Views 3173
author 2020.09.14 0 3173
100
How to Fix the Win­dows 10 We Could­n’t Con­nect to the Update Ser­vice Issue (2)
author | 2020.09.09 | Votes 0 | Views 3954
author 2020.09.09 0 3954
99
IONOS Joomla! Standard Installation
author | 2020.09.02 | Votes 0 | Views 1950
author 2020.09.02 0 1950
98
How to improve the life of a Battery: (1)
author | 2020.08.25 | Votes 0 | Views 1985
author 2020.08.25 0 1985
97
Laptop battery not charging
author | 2020.08.21 | Votes 0 | Views 2297
author 2020.08.21 0 2297
96
Plugged in, not charging (1)
author | 2020.08.21 | Votes 0 | Views 2105
author 2020.08.21 0 2105
95
How to add reCaptcha plugin to a custom form on my WordPress website?
author | 2020.08.13 | Votes 0 | Views 2270
author 2020.08.13 0 2270
94
I can't log in to the WordPress admin dashboard after installing and activating Limit Attempts plugin
author | 2020.08.13 | Votes 0 | Views 1957
author 2020.08.13 0 1957
New