WebSite X5 Evo and Pro

Once you have defined the size of the page layout table, you can enter the page contents by adding Objects to the cells. To add an object, select the icon that represents it and drag and drop it into the appropriate cell.

When you have added an object to a cell, you can open the window in which to define its actual content, double-clicking on the object in the table where you have inserted it or selecting the object and clicking on the  Object Content button.


To make the best use of the page layout possibilities, remember that the software follows these rules:

  • The Page width is determined by the template.
  • The width of the columns in the Table is equal to the page width divided by the number of columns. By default, all the columns have the same width, but you can change the width of each one manually.
  • All the cells in a row have the same height: by default, the height is that of the biggest object among those in the cells in a row.
  • Inserted objects are automatically resized according to the size of the cells in the table.

Insert and resize Objects

A Cell can contain only one object, but an object can occupy several adjacent cells, horizontally as well as vertically. If you drop an object icon onto the border of a cell, the object will occupy the cells sharing that border. You can also pull on the object's handles to pull it into adjacent cells.

You don't have to fill all the cells in the table. Remember, though, that:

  • an empty cell will correspond to an empty space in the page;
  • you cannot define the graphics of an empty Row;
  • empty Cells and Rows reduce the possibilities of putting Objects in a specific order when working on a Responsive Website.

Move the Objects using the arrow keys

Once you define the number of Cells which must contain an Object, this value is kept even if you move the Object to another part of the Grid, provided that there is enough space. You can use the arrow keys for moving objects on the Grid:

  • arrow keys: they move the selected object from one cell to another in the Gird.
  • CTRL + arrow keys: this combination moves the selected Object to a different place in the table, maintaining its size.
  • SHIFT + arrow keys: this combination moves the selected Object to a different place in the table but it changes its size, making it bigger (compatibly with other objects) or making it smaller to occupy fewer cells.

Working on Objects with the context menu commands

You can right-click on an object's icon in a cell to open a menu with the commands for managing this object: Cut, Copy, Paste, Remove, Object Style, Effect.

Use these commands, for example, to make a copy of an object and paste it into a different cell or page, or delete it. You can also remove an object by dragging it outside the page layout table, or by pressing the DEL key. Remember that an object will be removed if you add a new object to the cell it is in, and the second object will take its place. However, if you drag an object from one cell to an occupied cell, the two objects will simply change places.

The Object Style>Copy and Object Style>Paste commands in the submenu of the Object Style command are used to apply the settings defined in the Object Style window for the object in one cell to the object in another cell.

Likewise, the Effect>Copy and Effect>Paste commands let you apply the effect that has been given to the first object to the second one.

Finally, the Object Style>Edit and Effect >Edit commands respectively open the Object Style and Reveal effect windows.

The page layout can be changed and updated at any time.

#tip - Responsive website. If you are creating a responsive website, when you make changes to the contents of a page, you must consider how the page will behave in the various viewports between the active breakpoints.