Template Structure

Step 2 - Template > Customization >

Template Structure

Previous pageReturn to chapter overviewNext page
Show/Hide hidden text

When you want to define the graphic appearance of a website, WebSite X5 lets you choose a default template, a custom template or a completely new one. Whatever method you choose, you can use the options in the Template Structure window to make all the changes you want to a default or custom template, or to create your new template from scratch. Not only can you define the layout of the graphic template for Desktop display, but you can also specify how the template must look in the various viewports of a responsive website.

To create a responsive website, select the Responsive Site option in the Resolutions and Responsive Design window.

The template's Header and Footer can be completed with contents such as: text, images, animation, galleries, search fields and links. The options for these are in the Header and Footer Content window, which opens when you click on the Next button.

To make your work easier, the Template Structure window offers a Preview that shows a graphic representation of the page. You can choose which section of the page to change from the list, or click on a part of the preview to edit it and see the changes appear in the preview as you make them.

Click to expand/collapse

In addition, if you are working on a responsive website, the window also shows a Responsive Bar that repeats the information given in the Resolutions and Responsive Design window.

The Responsive Bar gives all the breakpoints that have been set and, consequently, identifies the intervals: click on an interval to select it and go on to define the template for the corresponding viewport.

Once you have selected the viewport to work on, you can choose the page section to change from the list or by clicking directly on the various sections in the page preview.

It's advisable to work according to a certain order, first defining the template for the Desktop viewport and then the various versions of it, with the necessary changes for all other cases, until you reach the Mobile viewport.

Click to expand/collapseReference: Menu type options

Before you start creating a custom template, you have to specify the Menu Type, which defines where and how the navigation menu will be displayed in all the website pages. The options are:

Horizontal – Menu above the header

Horizontal – Menu below the header

Horizontal - Menu inside the header

Vertical - Menu on the left

Vertical – Menu on the right

When shown at the Desktop resolution, the horizontal menu is displayed to its full extent: all the items are visible and displayed according to the settings specified in the Main Menu Style window. If you are working on a responsive website, as the resolution gets lower, the menu is compacted according to the width of the buttons and the number of items in the menu. When the resolution is too low to permit all the items to be displayed, the menu is automatically replaced by the Hamburger Button.

Click to expand/collapse

As long as the items in the first-level menu are displayed, the drop-down menu continues to behave as it does in the Desktop viewport. When the resolution forces the display of the hamburger button, instead of the entire main menu, the items in the menu slide in from the right and are superimposed on the page contents. The graphics of the drop-down menu (color, background and text) are those indicated in the Drop Down Menu Style window. If you scroll the drop-down menu, the page contents remain still, and vice versa.

Click to expand/collapse

Likewise, even if you have a vertical menu, as soon as there is insufficient space to display all the buttons, it is replaced by the Hamburger Button.

Click to expand/collapseReference: Page section options

When you have chosen the menu type you have to select the Page section that you want to work on. Pages are divided into the following 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, service menus with links to such elements as the website's map and the website language choice.

Menu: this is where the fixed navigation menu appears. This menu displays the first-level choices available, which appear in exactly the same way on every page of the website. This section will be either at the top, bottom, left or right of the page, depending on the menu type you have previously chosen.

Page Contents: this section contains the actual page content and any 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.

If you set the Header Background or Footer Background as Transparent, they will be treated as part of the Page Background and will have exactly the appearance. If they aren't Transparent then the Header and/or Footer will be shown as strips that cover the whole width of the browser's window.

Click to expand/collapseReference: Page section graphics properties

You can set the following Graphic Properties for all the various page sections:

Color: indicates the color to use for the background.
Image File: indicates the image file (.JPG, .GIF, .PNG.) for the picture to use as the background. You can select the picture in the online library, using the button, or in offline folders using the File selection button.
Repeat: this indicates whether the background image is to be repeated. Images can be repeated horizontally, vertically, or in both directions to take up all the available space. If you are working on the Page Background the image can be resized so that it covers the entire background. In this case, the original proportions may not be maintained.
Alignment: indicates how the image is to aligned in the particular page section.

The following option is also available for the Page Background:

Fixed Background: if you select this option, the page's background image is fixed, even when the page contents are scrolled.
Click to expand/collapseReference: Page section sizes

You can set the Size for some of the page sections.

The following options may be displayed, depending on the selected page section:

Width: gives the width in pixels of the selected page section. You cannot manually set this value for the Page Contents option: it is taken automatically from the Site Resolution option in the Resolutions and Responsive Design window, if you are creating a Desktop website, or as Desktop Viewport, if the website is responsive.
Height: gives the height in pixels of the selected page section.
Minimum Height: only for the Page Contents section, gives the minimum height in pixels that the page contents section must have, regardless of the height of the contents that are added.
Offset X / Offset Y: only available for the Menu section, if the Horizontal - Menu inside the header option has been selected as the Menu Type, this indicates by how many pixels the menu must be moved left/right and up/down with respect to the heading.

With all these options available, there are practically no limits to the size and position of the horizontal menu inside the heading, making it possible to obtain extraordinary results.

Click to expand/collapseReference: Page section content properties

You can define Content Properties for some page sections.

The following option is available for the Page Background, Menu and Page Contents sections:

Margins: gives the value in pixels of the margins (the empty space between the edge of the section and its contents).

This option is available for the Page Background and Menu sections:

Alignment: for the Page Background, it specifies how the page is to be aligned in the browser's window; for the Menu it specifies how the menu buttons are to be aligned with respect to the page.


Best practices:


How to work with the templates


Where to find new templates for WebSite X5


How to create a Responsive website in WebSite X5 | How to define the template