Each drag-and-drop editor template is made up of different elements and a collection of elements are held in what we term a container. Let’s take a look at an example.
An element may contain other elements, for example the below image shows:
As you rollover a particular element, the outline becomes orange and an options bar appears in the top right corner of the element. Now you can carry out different actions on the element:
When you duplicate an element, the duplicate appears directly below the element you selected.
If the element you select is also acting as a container for other elements, as in this example, then all elements are duplicated. When duplicated, all elements appear directly below.
Adding and moving elements
You can move existing elements within the template to new positions or drag in new elements from the Tools palette.
As you drag an element over an area in the template, colored drop-bars appear above and below each element and container.
These drop-bars make it really easy for you to see where you can place other elements.
The new element will be inserted either above or below depending on whether the drop-bar is at the top or bottom of the selected element.
So, if we selected the drop-bar shown in our example then the new element will be inserted below because the drop-bar we selected is at the bottom of the existing element.