Organizing Elements Using the Elements Tree

This page describes how to use the elements tree to traverse across the page structure.

The elements tree enables you to review the page structure, navigate to a specific element, move an element to a different position in the page, and hide an element from view.

Using the Elements Tree

To view the elements tree:

Select the elements icon from the tools menu.

tools_menu_with_elements_highlighted.png

The elements tree appears.

CS-ElementsTree-1.png

The number on each line indicates the number of child elements of that element.

When you select an element in the WYSIWYG area, the elements tree opens to the selected element with that element highlighted. The actions in the tree are as follows:

Expand/Collapse CS-ElementsTree-Collapse.png CS-ElementsTree-Expand.png Show or hide all child elements in the elements tree.
Show/Hide CS-ElementsTree-Hide.png Display or hide the element in the page.
Move CS-ElementsTree-Move.png Move an element to a different position in the page.

Use Cases

Example use cases for the element tree include:

  • Navigate to a specific element in the page, for example a small icon in the footer.
  • Remove rows from a table. This can be done in the page itself, but may be safer to do in the tree.
  • Move a top-level element with many child elements to a different position in the page.