Compatibility:

WebSite X5 Evo and Pro

Texts, images, galleries, buttons, and all the other contents of a Page are added to WebSite X5 through Objects.


All you need to do to build a page is choose the Objects that suit the contents you want to add, drag them onto the Layout Grid, and define how much space they should occupy. You can then move, resize, or edit them at any time.


For more information on how to organize the Grid, see Layout Grid. How do you organize the structure of a page?


How to choose and add an Object

Objects correspond to the different types of content and functions you can add to the Page. For example, to add an image you can use the Image Object, while to add text you can use the Text Object.


To add an Object:

  • find the Object you need in the list;
  • drag it onto the Layout Grid;
  • drop it into the Cell where you want to place it;
  • double-click the Object, or select it and click the Edit button;
  • use the available settings to add and customize the content.



WebSite X5 includes a series of Preinstalled Objects for managing the main types of content.


You can also add Optional Objects, which extend the available features with new galleries, graphic elements, integrations, and other tools. Once installed, they are displayed in the same list as the Preinstalled Objects.


#tip - For more information, see Optional Objects: what they are and how to use them.


How to quickly find the Object you need

If you have installed many Objects, the list can become quite long. To find what you are looking for more quickly, you can:

  • use the Categories to display only the Objects belonging to a specific group;
  • use the search field if you already know the name of the Object.



How to resize an Object

Each Grid Cell can contain only one Object, but the same Object can occupy multiple adjacent Cells, both horizontally and vertically. 


You can define how much space the Object occupies in two ways:

  • while inserting it, drag the Object to the borders of the Cells it should occupy;
  • after inserting it, select it and use the available handles to extend it or reduce its size.


Objects are automatically adapted to the space they occupy in the Grid.


#tip - Sections. An Object must remain entirely within a single Section. If, while moving or resizing it, it were to occupy Cells belonging to different Sections, WebSite X5 adjusts its position so that it remains contained within a single Section. For more information, see Page Sections. How do you create layouts with different structures?


How to move an Object

You can move an Object by dragging it directly to another position in the Grid.


If you drag an Object onto an occupied Cell, the two Objects swap positions.


Once you have defined how many Cells an Object should occupy, its size is preserved, when the available space allows it, even if you move it to another part of the Grid.


You can also work with the keyboard:

  • arrow keys: move the selection from one Cell to another;
  • CTRL + arrow keys: move the selected Object while keeping its size;
  • SHIFT + arrow keys: change the size of the Object by extending or reducing it across the Layout Grid Cells.


How to copy, delete, and replace an Object

Right-clicking an Object inserted in the Grid opens the context menu with the commands you need to manage it.


For example, you can:

  • use Cut, Copy, and Paste to move or duplicate the Object on the same Page or on a different Page;
  • use Remove or the DEL key to delete it;
  • drag the Object outside the Grid to remove it;
  • insert a new Object into an already occupied Cell to replace the existing one.



From the context menu, you can also work on the style and effects applied to the Object:

  • with Object Style > Copy and Object Style > Paste, you can apply the same style to another Object;
  • with Effect > Copy and Effect > Paste, you can reuse the same display effect;
  • with Object Style > Edit and Effect > Edit, you can directly open the corresponding settings windows.


This way, you can quickly reuse the same appearance or effect without having to recreate all the settings.


#tip - Undo and Redo. If you accidentally move, resize, delete, or replace an Object while working on the Grid, you can use Undo (CTRL+Z) to go back and Redo (CTRL+Y) to reapply the operations you have undone. WebSite X5 keeps a history of the changes as long as you continue working in the same window. If you open a different window, the history is cleared.


How to recognize Objects more easily in the Grid

When a Page contains many elements, it can be useful to quickly recognize the different contents without having to open them one by one.


WebSite X5 provides two types of preview:

  1. by selecting an Object in the Grid and activating the Preview option, you can display a preview of it in the area below the Object list;
  2. for more graphic Objects, such as Image or Gallery, after defining their content, a small preview is displayed directly in the Grid. 

These visual references are particularly useful on longer Pages or on Pages containing many Objects of the same type.


#tip - Responsive website. If you add, remove, move, or resize Objects, also check how the Page behaves in the different responsive Views. For more information, see Responsive Contents. How do you manage Page contents and layouts at different breakpoints?