Compatibility:

WebSite X5 Evo and Pro

Once the  layout table is defined (see: How to set up the page layout table), you can add a content in your page simply by selecting the most appropriate Object from the list of available Objects, drag it and drop it on the cell you want it to be: for instance, if you want to add an image, you need to use the Image Object.


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  Edit button.


    

In order for you to better identify the contents of a page, you can rely on two elements:

  1. You can display a preview of the Objects you already defined the content for in the dedicated space under the available Objects. Make sure to activate the Preview option and select the wished Object on the Grid.
  2. As far as the more graphical Objects are concerned (for instance the Image or the Gallery Object), after having defined the content, a small preview image will be displayed in the corresponding Grid Cell, so to help you better identify the content you are looking for. 

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.


Choosing the Objects

Objects then correspond to the different kind of contents you can use on your page. The most important ones are already installed in the software and are listed next to the page layout table, each one having a specific icon. The list of pre-installed Objects includes:


In addition to these, you can also enrich your pages with new galleries, social buttons or other useful functions available with the Optional Objects, whose list is constantly kept up-to-date. Once installed, Optional Objects are reported in the same list where you can find the pre-installed ones. 


#tip - For more information about how to find and install them, please see: Optional Objects: what they are and how to use them


Because the list of available Objects can be pretty long, you can easily find the wished Object in these ways:

  • Use the categories

The list of available Objects is organized in categories: click on the Categories button to select the wished one.

  • Use the internal search field

If you don't remember the category the Object is referred to, but you know its name, you can use the reported search field to find it.


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.