Compatibility:

WebSite X5 Evo and Pro

When building a Page, you need to be able to organize texts, images, galleries, forms, and other contents in an orderly way without having to work directly on the code.


For this reason, WebSite X5 provides a Layout Grid that you can work on in a completely visual way. The Grid is made up of Rows, Columns, and Cells and can be divided into multiple Sections, so you can use different structures in different parts of the Page.


For example, one Section can have 2 columns, the next one 3, and another one 4. This way, you can create even complex layouts while keeping the Page structure simple and easy to read.


How the Layout Grid is organized

To work more easily on the Grid, it is useful to distinguish the elements it consists of:

  • Cell: the area of the Grid where you can add an Object.
  • Row: a horizontal sequence of Cells.
  • Column: determines the vertical subdivision of a Section.
  • Section: a group made up of one or more Rows that can have its own Column structure.


If you do not create any additional Sections, the entire Page is managed as a single Section and you can continue working on the Grid as usual.


To add contents, simply drag the available Objects into the Grid Cells and arrange them in the desired position.



How to add and remove Rows

You can add all the Rows you need to organize the Page contents.

  • Select a Cell or an Object in the Grid.
  • Use the commands available on the Toolbar to add () or remove () a Row.
  • The new Row is inserted according to the selected position in the Grid. 


The height of the Rows is determined by the Objects they contain and does not need to be set manually.


How to add and remove Columns

Columns define the horizontal space available for arranging Objects. If the Page is divided into multiple Sections, each Section can have its own number of Columns.


To change the number of Columns:

  • Select a Cell or an Object belonging to the Section you want to work on.
  • Use the Toolbar commands to add () or remove () a Column.
  • The change is applied only to the selected Section.


This way, for example, you can have a Section with 2 columns and the next one with 3 columns without changing the structure of the first one.


#tip - If you want to use different Column structures on the same Page, you can divide the Grid into multiple Sections. See Page Sections. How do you create layouts with different structures?


How to change Column widths

By default, the available space in the Section is distributed among the Columns. If you want to create a different layout, you can manually change their widths.


Select a Cell or an Object in the Section you want to work on: the sliders for its Columns become available at the bottom of the Grid.


At this point, you can:

  • Click and drag a slider to move the line that defines a Column and change its width. The column then takes on the width specified in the note displayed while dragging the slider.
  • Hold down the CTRL key while dragging for more precise adjustment;
  • Use the commands available in the sliders' context menu to directly set the width of a Column or make the Columns the same width again.


The changes affect only the Columns of the selected Section and do not alter the structure of the other Sections on the Page.


How to undo or redo changes

If you make a mistake while working or want to return to a previous situation, you can use the Undo and Redo commands.


WebSite X5 keeps a history of the changes made in the current window, so you can undo several operations in succession and, if necessary, redo them.


You can use the commands available in the Grid context menu:

  • Undo, to go back through the changes you have made;
  • Redo, to reapply the changes you have undone.


Alternatively, you can use the keyboard shortcuts:

  • CTRL+Z for Undo;
  • CTRL+Y for Redo.


The commands can be used, for example, after moving or deleting an Object, adding or removing a Row or Column, creating or modifying a Section, or applying a style or an effect.


#tip - The change history is kept only as long as you continue working in the same window. If you open a different window, the history is cleared and, when you return to the previous window, you can no longer undo the operations performed before the change.


Is the Grid displayed on the website?

No. The Layout Grid is a tool used by WebSite X5 to help you organize and arrange contents while creating the Page.


The Rows, Columns, Cells, and the lines separating the Sections are not displayed to visitors while browsing the website.


How to customize the appearance of Sections

The Grid and Sections are primarily used to define the structure of the Page. After arranging the contents, you can also work on the graphic appearance of the Sections, for example by applying a background, margins, or a border.


To do this, use the Section Style command.


You can also graphically link multiple adjacent Sections: this way, they will continue to have independent Column structures but, to visitors, they can appear as a single continuous block.


#tip - For more information, see Section Style. How do you create strips with background, margins, and borders?