Template Structure

Step 2 - Template >

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 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 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 Template 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 of the template structure 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: Template Structure options

Before you start creating a custom template, you have to specify the Structure type , which means whether there is a sidebar or not, in addition to the header and footer. The options are:

Header and footer

Header, footer and left side bar

Header, footer and right side bar

Click to expand/collapseReference: Page section selection options

When you have chosen the template structure 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, 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.

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 same appearance. If they aren't Transparent, then the Header and/or Footer will be shown as bands that cover the whole width of the browser's window.

Click to expand/collapseReference: Page section graphic 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 size

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 from 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.
Extend to the width of the browser window: this option is only available for the Header and Footer sections. It ensures that the defined aspect is applied to the full width of the browser window, and not just to the width of the page contents.

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 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).

The following option is available for the Page Background:

Alignment: it specifies how the page is to be aligned in the browser's window.

The following option is available for the Side Bar section:

Keep objects on view when scrolling pages: if this option is selected, the sidebar (set up in the Template Content window) remains visible when the page is scrolled.

 


Read the guides:

-

How to create a new template from an empty template