Compatibility:

WebSite X5 Evo and Pro

Templates are a good way to kick-start your project and speed up the realization of your website. They define the website's layout and include some pages: in this way, the bulk of the work is already done and you can focus on customizing your project and adding your own contents.


Still, if you are not new to graphic design tools and you want to create a really original website, you can start from scratch by using one of the available Blank Templates included in WebSite X5. 


If you want to follow this path, you can get all the images you need by using an external graphic editor and then following these steps:

  • Start WebSite X5 and click on New Project, so to open the window reporting the Template library.
  • As you can see, you can use filters and categories to find the right Template for you: click on Display>Blank and choose the structure which seems to best correspond to the results you want to obtain.
  • Go to Step 2 - Template Settings  and select Template Structure.
  • Now you need to select the Structure typeamong the following solutions: 
    •  Header and Footer
    •  Header, Footer and left side bar
    •  Header, Footer and right side bar
  • Once you've chosen the structure type you want to use, you need to make up the individual page sections: select them one by one and use the available options to define the graphic settings, size, margins and alignments. For example, you can create your Header by selecting the Header section. Then you can use the Color or Image File options to set a background color or image.

You can work on the following page sections:

  •  Page Background: this is the area surrounding the page. It's on view when the browser's window has a higher resolution than that set for the actual website..
  •  Header Background: this is the part of the Page Background which is behind the Header.
  •   Header: the header is at the top of the page. It normally contains mostly graphic elements, and is the ideal place for the website's title and subtitle, a company logo, search fields, the main navigation menu and service menus with links to such elements as the website's map and the website language choice.
  •   Page Contents: this section contains the actual page content and any navigation menus and submenus, if you have them.
  •   Footer: this section is at the bottom of the page and, like the header, is mainly graphic. It visually closes the page. It is often used for placing notes, disclaimers, copyright indications, VAT numbers, e-mail addresses, etc.
  •  Footer Background: this is the part of the Page Background that is behind the Footer.
  •   Side Bar: this option is only available if you have selected a structure type that has one. It is a column on the left or the right of the page contents and can be used for creating a vertical navigation menu
  • Once you are happy with the result, go back to the Template Settings to insert and customize the contents in the Header and Footer sections.


#tip - Select.  To select the page section to work on, you can click on the Preview you can find in the window


Advanced Options

You can get some peculiar results by using some of the available options:

  • Header and Footer Background - If you set the Header Background or the Footer Background as Transparent, they will be treated as part of the Page Background and will therefore take its graphic settings. Otherwise, you will get some bands  occupying the entire browser width. You can also choose the Extend to the width of the browser window option to get the same effect.
  • Fixed page background - You can set your page background image as fixed even when you scroll down the page by using the Fixed Background option you can find for the Page Background sections. 
  • Side Bar content always visible- If you set the Keep objects on view when scrolling pages option for the Side bar, all the contents inserted in this section through the Template Contents window will stay visible and in foreground even when scrolling down the page. 


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) in the Template Structure window you can use the Responsive Bar reporting all the breakpoints by creating some intervals.


You can manage the template structure for each breakpoint by following these steps:

  • When accessing the Template Structure for the first time,  you will find the interval for the Desktop resolution on the Responsive Bar. Define the structure by following the above reported steps without changing interval.
  • 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 any possible changes.
  • Use the Responsive Bar  to select all the intervals one by one and to manage the  template structure for the different resolutions.


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