Layout

How to change the site Layout


The layout of your page can contain the following elements:


Header: This is the top-most area in which usually a banner image or a company logo is placed.

For the header, you can perform the following actions:

    • Move the banner image or logo from the header anywhere on the page.
    • Reduce the header height to 25 pixels by removing all items from it.
    • Change the header width from the standard size, up to 100 percent, so that it is extended to the page width.



Content: This is the main part of a site where the majority of the content is placed.

For the content area, you can perform the following actions:

    • Adjust the height of the content area.
    • Divide content into multiple columns. You do this by pulling new modules to the left or right edge of the content area.
    • Change the position of the columns in the content area, by moving the content to the left or to the right. 



Sidebar: These are vertical columns in which all kinds of modules can be placed, both site-wide and page-specific.

For the sidebars you can perform the following actions:

    • Add a sidebar and place it to the left or right of the content area.
    • Add two sidebars. They are placed to the left and right of the content area.
    • Set the height and width of the sidebars.
    • Move the sidebar to the top of the page and place it to the left or right of the header area.
    • Swap the position of sidebars. 



Footer: This is located at the bottom area where the company name, contact information and copyright notices are usually placed.

For the footer you can perform the following actions:

    • Reduce the footer height to 25 pixels, by removing all items from it.
    • Change the footer width from the standard size, up to 100 percent, so that it is extended to the page width.


How to change the layout of your page:

  1. Go to the Design tab> Layout tab.
  2. Select the number of sidebars: under sidebars select either none, one or two.
  3. Select the position of the sidebars.
    • To move a sidebar to the other side or to swap the position of the sidebar (if you have two sidebars on your page) , click Change sidebars.
    • To move the sidebar to the top of the page, click on it in the layout-model.
  4. Set the size of page elements:
    • To determine the total width of the websites, choose one of the following options:
    • Fixed Layout: Your website will have a certain size, regardless of the size of the browser window in which you view the page . In this case, you enter the site width in pixels.
    • Liquid Layout: This setting is based on a percentage of the current browser window size. In this case, you enter the site width as a percentage of the browser window size.
    • To adjust the width of the header and footer areas to the page width, click in the layout-model on the corresponding elements.
    • Under minimum height of the column in pixels, set the height of the main field and the sidebars, if you use them. This value shows the height of your site elements without content. When you add content to the main field and the sidebars, they will be adjusted accordingly.
    • To ensure that the sidebars and the content is vertically aligned, select the check box expand sidebars and content area to footer.
    • If you use one or two sidebars, under width of the sidebar in pixels enter the width of each sidebar. The size of the main field will be automatically determined.
    • Under Margin Sizes in Pixels set the size of the vertical and horizontal edges. An edge is the distance between adjacent elements.
  5. Click OK to save the changes.