Designer Use Guide

1. Structure Panel (Document Tree)

As your design grows, it can become difficult to click on small elements nested inside many containers. The structure panel provides a clear, hierarchical view of every element on your canvas.

• Selection: Click any item in the structure list to select it on the canvas. This is the safest way to select "Parent" containers that are fully covered by their "Children."
• Visibility: Toggle the eye icon to hide an element on the canvas. This is useful for working on content that sits behind other elements.
• Nesting: The indentation shows you exactly which elements are inside which containers. If an element is "indented," it is a child of the item above it.

2. Properties Panel (Element Settings)

Styling handles CSS, but the Properties panel handles Attributes. Properties are settings that change based on what type of element you have selected.

Common Properties

• Links: When a link or button is selected, the Properties panel allows you to set the Href ( URL destination ) and the Target ( whether it opens in a new window ).
• Images: Set the Alt Text ( important for SEO and accessibility ) or the Title.
• Ids & Titles: You can assign a unique Id to any element. This is useful for "Anchor Links" (E.g. a button that scrolls the user down to the #Contact section).

Plugin & Element Objects Specific Properties

If you are using special Object (like Forms or Maps), the Properties panel will expand to show specific controls, such as form action URLs or map coordinates.