• Once you’ve created a new Page, you can choose to edit the existing content on the Canvas or insert new elements from the Element Palette.

Insert

• You can insert content by hovering over any tab on the Element Palette and picking a draggable element preview thumbnail on to the Canvas.
• When you drag an element from the Element Palette onto the Canvas, the Builder detects the position on the Canvas above which your cursor is hovering and suggests an Insert Point with a blue or red line indicator.
• The line indicator for your Insert Point could be the top, bottom, left or right external or internal edges of an existing grid element such as the right outer-side of a Column or the left inner-side of a Container.

• Insert Points outside a Container on the Canvas are highlighted in red and conversely, Insert Points inside a Container are highlighted in blue.

• When you have found a suitable Insert Point, you can simply release your drag gesture by letting go of the cursor left-click command. 
• The Canvas will automatically add all the parent layers to your new element in order to position it correctly within the Grid. 

Position

• You can hover over the Canvas to highlight elements that occupy different locations.
• To select an element simply left-click on it when highlighted by the hover.
• You can use the Margin and Padding handles that appear on the Canvas for a selected element to make finer adjustments to their position with the current Column or other layers within which they sit.
• You can move elements on the Canvas by dragging them from their element label, which appears when they have been selected.

• You can, for example, move a Heading element out of its current Column into a new Section below or above by simply dragging it across once it’s selected.
• You can also resize the horizontal area of Columns on the Canvas using the Column Width handle which appears between any pair of Columns.
• If you wish to position an element in Absolute Positioning mode, where it doesn’t follow the Grid, you can tick the Absolute Positioning option in the Alignment Status Indicator at the top of the Inspector.
• The default state of the Alignment Status Indicator would be a green “On Grid” value.
• Note that switching to Absolute Positioning mode from the default On Grid mode may erase some of the positioning values such as Padding and Margin that previously held the element.
• To recover these values, you have to use the Undo function.
• In addition to the visual tools available for positioning, you can also use the Inspector to set alignment rules, height and width dimensions, and even scale and offset properties to most elements.

Have more questions? Visit our community, its open to everyone!