Features

Website Editor

WebDigital Website Editor is the next generation cloud development platform. It has a lot of features but the general structure is simple. The core is your workspace. It displays a route of your website. It allows you to to interact with the elements via drag and drop. Route is visible in the menu and updated via the component designer. Menu also provides access to 4 widgets for editing:

• Component Designer: edits website components and dependent objects. Changes are shown in the workspace instantly (on blur).
• View Manager: used for responsive design.
• Version Manager: you can review all past versions that you committed, compare them and cherry pick changes from them. You can load past versions to make them current.
• Commit Dialog: Conflict resolution interface available.

All website editing is done through an interaction between these widgets and the workspace. For example, you can drag and drop elements from the component designer onto the workspace. During the drag and drop operation, workspace will show guidelines as to where the new element would be placed. This is a convenient operation in most cases but sometimes you wish for finer control and in those cases you can drag and drop elements to the elements tree of the component designer.

You can edit elements on the workspace by clicking on them. Hovering over them will bring out the hover frame. Clicking on them provides a focus frame, where a lot of different operations are available. You can drag and drop the element from the focus frame title bar. Also in the same line, there are 3 buttons: parent link (changes the focus to the element's parent), edit (brings up the component designer to edit that element) and clone (creates a copy of the element after it). There is also another button that shows extended operations for the element. That reveals a delete option (somewhat hidden to prevent accidental delete of elements) and advanced operations dropdown. These include:

• Wrap In: select the element to wrap in this one. typically to wrap the element in a div.
• Add Before/After: select the element to add before or after this one.
• Add First/Last Child: select the element to add as first/last child of this one.
• Make Component: Create a component and make this element its content and replace this element with a "component element" that renders the component.

For text elements, focus frame also provides transition to the text edit mode for that element. Text edit starts from the highest text ancestor. This may be something like Rich Text element. During the text edit mode, menu changes and provides text editing functionality. This is essentially activating the content editable. Once the text edit is done, the editor imports the html back into the elements.