Adding and moving elements

Adding elements to the Canvas

You can add elements to the page using the Elements panel in the Navigator panel.

Elements panel contains a list of all available elements and widgets available, divided into groups:

• Basic – 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.

Adding by dragging an element

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.

Adding by clicking the name of an element on the Elements panel

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.

Moving elements

You can move elements in two ways:

1. Moving by dragging an element on the Canvas

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.

2. Moving by dragging elements on the Layers tab

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 yellow 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 yellow outline. It should highlight the desired target element.

3. Moving using arrows

When you select an element on the canvas, control arrows will appear in the top right corner of the element. By clicking these arrows, you can move elements within their parent block. If the elements are placed side by side in the block, left-right arrows will be available. If they are stacked vertically, up-down arrows will appear.

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.