Adding elements and nesting them

Site Designer is built around a real-time canvas where you drag and drop web elements to construct a page. This article covers getting an element onto the canvas and into the right place.

Adding an element

To add elements to your design, simply drag and drop your selection onto the canvas. You can also click the element and it will appear on the canvas automatically.

Rearranging items works the same way — drag and drop.

The drop zone line indicator

While you drag, a drop zone line indicator shows where the element will land. Its appearance can be adjusted, and the Focus Viewer demonstrates how.

Inside the Elements Tree the equivalent cue is a grey indicator bar, which represents where the element will be placed when you drop it.

Selecting a nested element

Dropping into the container you intended is easier when you can see and select the nesting.

• The context menu on the canvas lets you select nested elements directly. See the Focus Viewer.
• The indicator hover bar carries a dropdown on its left side listing the element’s parents — useful when there’s no gap to click a container directly. See the indicator hover bar.
• The Element Navigator at the bottom of the canvas moves between elements in the same hierarchy, back and forward between parents and children.
• The Elements Tree shows the whole nesting structure, and you can drag rows there instead of on the canvas.