Design basics

In order to design your web site in all possible ways, open Advanced design. You edit the design and layout in a WYSIWYG mode, Changes are shown immediately.
The working area of the browser is split in two. In the upper section you can see the multifunction bar. This displays the available functions. For more information, see Multifunction bar and content.
In the lower section you can see the page preview. You can edit the design and layout directly there. The page preview shows you the current Web page in the design and layout specified by the selected style; see Own styles.
The web site is split into the following functional areas; see Figure 8.
Figure 8: Web site structure

Area 1:
Header
Area 2:
Top
Area 3:
Left
Area 4:
Content area
Area 5:
Right
Area 6:
Bottom
Area 7:
Footer

In addition there is the surrounding working area of the browser on which the Web site is displayed. See Page view in browser.
If you want to edit an area, click the mouse in the corresponding location. This activates that area. It is highlighted by a border and the multifunction bar displays the functions that can be carried out in this area.
In terms of editing and configuration options, the areas of the site can be categorised into vertical and horizontal areas as well as the content area:

Horizontal areas:
Header, Top, Bottom, Footer
The horizontal areas mostly extend over the entire width of the Web site. They are wider than they are high. They mostly contain links and narrow display elements. Typical page elements for horizontal areas include:
  • Logo
  • Name of the Web site
  • Link to the Home page, Contact information, Terms and Conditions, Customer information, Categories, Shopping basket
  • Flags for the country selection
Vertical areas:
left, right
The vertical areas are mostly located between horizontal areas and lie parallel to the content area. They are higher than they are wide. They mostly contain boxes with texts, lists, links or entry fields. Typical page elements for vertical areas are, among others:
  • List of main categories
  • Signing in
  • Compact shopping basket view, Shopping basket status
  • Product search
  • Promotional products
Content area:
Whereas the other areas contain mainly functional elements such as menus and links, the content area contains the content of the pages that you have created under Content / Categories.
The size of the content area is determined by the height and width information of the other areas, as well as the padding. The "rest" of the browser window is left for the contents.

The parameters for the individual areas create the complete design when they are combined. Some parameters influence each other or are interdependent. These side-effects must be considered. The following information should be helpful:
Notes on background images
Matching templates are loaded for the background images in each design template. You can replace these with your own images. If you delete your own images, the template is reloaded automatically. If you do not want a background image at all, you must delete the template image too. To do this, click the Delete template link. When the template has been deleted, the name of this link changes to Restore template. Click this link to restore the default template for the background image without having to search for file names.
Note: If you set both a background colour and a background image, the background image will always be on top of the background colour. Therefore, if you want to display the colour, delete the background image. If the background is to be filled completely, the image must be resized to fit the area or you can activate Tile image.
Tile image
Background images can either be displayed as a single image or repeatedly displayed so that the background of the entire page is filled. This arranges copies of the image next to and below each other until they fit the whole page.