A page contains elements of different types, each of these types can be modeled with specific properties.
Each element can contain other elements, in these cases they are called superior elements while the elements they contain are called inferior elements.
Superior Elements
Operations
Add Elements on the Page
Elements can be added to a page via “drag-and-drop” to any location on the page, in isolation, or embedded in superior elements.
When adding an element, it automatically docks to the top or bottom border of the closest highest ranking element.
When added, the elements width is defined by default as a percentage, with the exception of the button element, which has an automatic width.
Modify Position of an Element
Once the element is added, its position can be changed by moving it within the page or by changing its structure and position properties with respect to the superior element.
If an element changes its position, this applies to all breakpoints.
Modify Element Size
The dimensions of an element can be modified by dragging the handles on its outline or by modifying its structure properties.
Guides
There are different types of guides that are displayed when selecting an element and pressing the “Alt” key.
•Docking guides: they are displayed when moving an element and the position where it is moved depends on how close it is to its highest hierarchy element. In addition, the distance to the margins of the upper element is indicated.
•Alignment guides: displayed to help items align.
•Guides of space between elements to know the space between them.
Properties
Each element has specific properties that are displayed using a context menu, which is enabled when selecting the element. Properties are grouped according to their functionality and are detailed for each element type.
