Compatibility:

WebSite X5 Evo and Pro

When creating a website, the visual and functional appearance of the pages largely depends on the structure of the Template. To achieve a consistent, professional, and easy-to-navigate site, it is therefore important to understand the role of the main sections that compose it.

  • Header: this is the top part of the site, immediately visible when the page is opened. It generally contains the logo, main menu, navigation tools, search field, and strategic buttons such as login or contact. 
  • Footer: this is the final section of the page. It can be limited to essential content such as VAT number, copyright, and policies, or include additional menus, quick links, social networks, newsletter forms, and contact information.
  • Sidebar: not always present, it is a column positioned alongside the main content, either on the right or left. It is often used for section menus, supporting content, banners, or promotional spaces.

Knowing how to properly configure these areas allows you to customize the template more effectively, improving structure, usability, and user experience across the entire site.



Why Header, Footer and Sidebar are important

Proper management of these sections allows you to:

  • strengthen visual identity and branding;
  • improve navigation and accessibility;
  • ensure a consistent structure across all pages;
  • facilitate access to main content;
  • improve usability and user experience.


How to modify Header, Footer and Sidebar

If you choose to use a predefined template, all Template elements are already set, but you will still need to modify them to customize them with your own content: for example, you will need to replace the placeholder image with your actual logo. If, on the other hand, you decide to create a template from scratch, you will need to define the template structure yourself. 


In both cases, knowing how to properly modify these areas allows you to build a more consistent, professional, and effective website. For convenience, let’s assume you are working with a predefined template:

1. Access the Template Content

  • Go to Step 2 - Template Settings.
  • Click on Template Content. This window is organized into the Header, Footer and Sidebar sections: the commands and options available in all three sections are identical.
  • Select the section you want to modify: for example, Header. 

2. View and manage the existing Objects

  • The workspace shows the background image at a 1:1 scale along with all the Objects placed on it. If the space is not sufficient, use the scroll bars to bring the relevant elements into view.
  • From here you can edit existing elements, add new Objects, remove unnecessary content, and reposition elements.

3. Edit or add content

  • For example, if you want to change the logo image, click on the corresponding Image Object to select it, then click the  button to access the settings window.
  • If you want to add a title instead, click the Title Object icon and drag it into the workspace. Use the selection handles to position and resize the object, then double-click it to access the settings window.  

To build the Header, you have access to the full list of Objects: simply choose the ones you need and place them in the workspace. 

4. Optimize layout and visual hierarchy

  • To position inserted Objects more precisely, click the Arrange button and use the commands to adjust position, size, alignment, and distribution.
  • If Objects overlap, use the Bring to front and Send to back buttons to define the display order.  


The same procedures apply identically to the Footer and Sidebar.


#tip -  Multiple selection. To speed up your work, you can select multiple Objects at the same time by holding down the CTRL or SHIFT key. Alternatively, click in the workspace and, while holding down the left mouse button, drag to draw a selection box that includes all the desired Objects.


How to adapt Header and Footer in responsive websites

If you are working on creating a responsive website (you have enabled the Responsive Website option in Step 2 - Template Settings > Resolutions and Responsive Design), in the sections where you define the Header, Footer, and Sidebar you have access to the Responsive Bar , which displays all the configured breakpoints and, based on these, identifies different ranges.


To manage the display of Header, Footer, and Sidebar for each breakpoint, proceed as follows:

1. Configure the Desktop version

  • On the Responsive Bar, select the range corresponding to the Desktop view.
  • Build the Header by following the steps described in the previous paragraph.

2. Check each breakpoint using the Responsive Bar

  • Click on the Responsive Bar to progressively select each subsequent range.
  • Check the arrangement of the Objects, review spacing, and adjust sizes.

3. Manage hidden Objects

  • The available space decreases: evaluate whether it is still possible to keep all Objects. To hide an Object, select it and click the Hidden Objects management: you can choose to hide the Object only in the current view or also in all lower views.
  • To make a previously hidden Object visible again, select the desired range on the Responsive Bar, click the and select the command Hidden Objects management for this view: from the list of hidden Objects, select the one you want and click to make it visible again.  


#tip. In lower breakpoints, it is advisable to simplify the Header, Footer, and Sidebar by keeping only the truly essential elements to avoid visual overload. For more information, see Responsive Template. How to adapt the site layout to different devices?


Practical tips

To achieve better results:

  • maintain a consistent structure across all pages;
  • prioritize clarity and simplicity;
  • avoid overloading Header and Footer;
  • always check readability and navigation;
  • use multiple selection to work more quickly;
  • check every breakpoint;
  • test the website using the local Preview.


In summary

Header, Footer, and Sidebar are essential components for building a well-organized, professional, and easy-to-navigate website.


With WebSite X5, you can modify them visually, customizing structure, content, and responsive behavior without working on the code.


A well-designed Template allows you to create more effective, consistent, and high-performing websites on any device.