Adding and moving elements
You can add elements to the page using the Elements panel in the Navigator panel. This panel opens when you click the + button to the right of the tab names.
Elements panel contains a list of all available elements and widgets available, divided into groups:
- Layout – elements that are used to create a website structure, position other elements on it.
- Typography – elements to display text.
- Widgets – complex elements performing specific functions as well as elements for adding images.
- Forms – elements that are used to create forms.
You can add elements to the Canvas in two ways: by dragging and by clicking.
To do this, place the mouse cursor over the element on the Elements panel, press and hold down the left mouse button and drag the element to the desired position on the Canvas.
- an element, into which you insert another element, is highlighted with the blue outline and has a label with a name
- an element, which is inserted into another element, is highlighted with the dashed blue outline
- the place where you put the element is marked with the yellow line
- elements that do not allow to place other elements into them are marked with blue hatch lines
To do this, select an element on the Canvas, into which you want to insert the new element (it will be highlighted with the blue outline and have a label at the top).
Then, on the Elements panel, click on the name of the element to be added. The new element will be automatically added into the active element. If there are other child elements in the active element, the new element will be added last.
You will see the error message shown below, if you cannot place the new element into the existing one.
You can move elements in two ways:
You can drag and drop elements to another position directly on the Canvas. To do this, select the desired element on the Canvas (it will be highlighted with the blue outline and have a label at the top). Then place the mouse cursor over the element, press and hold down the left mouse button and drag the element to the desired position on the Canvas.
- an element, into which you insert another element, is highlighted with the blue outline and has a label with a name
- an element, which is inserted into another element, is highlighted with the dashed blue outline
- the place where you put the element is marked with the yellow line
- elements that do not allow to place other elements into them are marked with blue hatch lines
You can drag elements above or below, or nest them within other elements on the Layers tab. To do this, select an element, place the mouse cursor over it, press and hold down the left mouse button and drag the element to the desired position.
The yellow line indicates where an element will be nested to. By holding down the mouse button while dragging and moving the cursor slightly to the left or to the right, you can adjust the desired nesting of the element. The blue outline highlighting the target element will show where the element will be nested to. The yellow line becomes longer or shorter depending on how nested the element is.
Example:
Thus, to nest an element to another element, you need to hover the cursor on the target element while dragging the required element and, without releasing the mouse button, slightly move the cursor to the right. Please pay attention to the blue outline. It should highlight the desired target element.
You cannot drag some elements to another position as these are pinned elements. This can be widgets items that cannot be moved outside the element, such as Menu or Block list items. These elements are marked with borders at the corners.
The error message shown below will be displayed when trying to move such an element.
