Compatibility:

WebSite X5 Evo and Pro

WebSite X5 uses a unique page layout method where you can work in a completely visual way while creating your Pages.


The page is shown as a table where you can specify the number of rows and columns to prepare the cells which will contain the various contents.


You can easily drag and drop the available Objects into the cell to insert your contents.


Add / remove rows and columns

The default table is 2 rows x 2 columns, and you can add more rows and columns so that you have enough cells to add all your contents on the Page.


Use the   buttons in the toolbar to add rows and columns. The table can have a maximum of 96 rows and 12 columns.


All the rows and columns in the page layout table automatically have the same width and height.


Width and height of columns and rows

By default, the page layout table's column width is obtained by dividing the width of the page (determined by the Template) by the number of columns it has. You can change the width of the columns manually using the cursors at the bottom of the table:

  • Click on and drag a cursor to move the column line. It is moved by a tenth of the available space. For greater precision, hold down the CTRL key to move the line one pixel at a time.: otherwise, the line is moved for one tenth of the available space.
  • Right-click on a cursor and choose Set Column Width from the menu, and then type in the width of the column in pixels.
  • Right-click on a cursor and select Reset Column Width to restore all the columns to the same width.


The row height depends on the height of the objects inserted in the row, and this value cannot be modified manually.


Important Note:  The sole purpose of the table is to help you lay out your page contents to obtain the best effect. The page layout table is not translated as a table in the page's HTML code and it is not visible when your website is published on the Internet


Finally, you can modify the graphics of the rows by changing the settings in the Row Formats window, which opens when you click on the  button.


#tip -  When you work on the Row Formats you can extend a row in its width and height so it takes the size of the viewport, i.e. the browser window used by the user (see How to work on the Row Formats to create horizontal bands? and How to set the Full Height effect?).