Hierarchy panel

Summary: Learn how the hierarchy panel organizes page elements in Antimanual Builder, making structure search, reordering, and editing faster for complex layouts.

The hierarchy panel in antimanual builder user documentation is the fastest way to inspect and control a page structure from one place. It shows every element on the canvas as a navigable tree, so you can locate sections, text, images, containers, and nested children without hunting visually across the page.

For teams learning how to use antimanual builder, this panel is especially useful when a layout becomes large or heavily nested. It supports search, reordering, and element-level actions, which makes it a practical companion to direct canvas editing. If you want a broader context for workflow choices, see How to Resolve GitHub Conflicts: Quick and Effective Solutions and .

antimanual builder user documentation: what the hierarchy panel does

The hierarchy panel presents a tree view of the current page, with parent and child relationships displayed clearly. You can expand or collapse branches, search for specific elements, and switch between Friendly and Developer labels depending on whether you prefer plain-language names or raw tag names.

This view is designed to help you manage structure rather than appearance. Instead of selecting elements one by one on the canvas, you can identify the exact component in the tree, highlight it on hover, and then move or edit it with precision. In antimanual builder pro documentation, this is often described as one of the most efficient tools for structural editing.

• Locate deeply nested sections quickly.
• Expand or collapse entire branches for easier navigation.
• Reorder elements by dragging them before, inside, or after another item.
• Inspect the page structure without leaving the editor.
• Highlight elements on hover to confirm the correct target.

Using the hierarchy panel in the editor

Open the Hierarchy panel from the toolbar when you need a structural overview. The panel works alongside the AI Chat panel, but only one of these panels is shown at a time, keeping the workspace focused. Once open, you can search for elements with Ctrl or Cmd plus F and jump directly to the item you need.

Each tree item includes child counts, so you can understand how much content sits inside a section before expanding it. This is particularly useful on landing pages, pricing pages, and content-heavy layouts where repeated blocks may be hard to distinguish on the canvas.

If you are documenting how to use antimanual builder for a production team, this panel is the recommended place to start whenever you need to debug structure, move a block, or confirm which element is nested inside another. For background on structure and design controls, you can also review Advanced Accordion v5.0.0 — Release Notes & Features and How to Customize the 404 Page Text and Images in WordPress.

Key actions available in the hierarchy panel

The hierarchy panel includes a right-click menu with several structure-focused actions. These actions let you work on elements without relying only on the canvas, which is helpful when precise targeting matters.

• Edit with AI for AI-assisted changes to the selected element.
• Copy Selector for targeting the element in external workflows.
• Scroll to Element to bring the target into view on the canvas.
• Duplicate to create a copy of the selected item.
• Wrap in Container to reorganize structure.
• Show or Hide Element to control visibility without deleting content.
• Delete Element to remove the item from the page tree.

Delete Element does not show a confirmation dialog in this panel, so use it carefully. If you remove the wrong item, Ctrl or Cmd plus Z is the fastest recovery path. That makes version discipline and careful selection important in antimanual builder installation and activation workflows where teams are still learning the interface.

Working efficiently with search, highlight, and drag-and-drop

The search field is one of the most practical features in the hierarchy panel. It reduces long pages into a manageable list of matches, which is especially helpful when several elements share similar names. Friendly mode is ideal for non-technical users, while Developer mode is better when your team needs to match tag names or inspect precise markup relationships.

Hover-to-highlight helps prevent mistakes. When you move across items in the tree, the matching element is emphasized on the canvas, making it easier to confirm you are selecting the right container, heading, or image. Drag-and-drop then allows you to adjust order directly, including placement before, inside, or after another element.

For a general reference on structured content and accessibility practices, see the official WordPress documentation at WordPress Documentation. For layout and markup guidance, the MDN HTML element reference is also a reliable external source.

Best practices for hierarchy panel use

Use the hierarchy panel whenever canvas selection becomes difficult, especially in pages with multiple repeated sections or nested containers. It is also the best place to verify the structure before applying AI-driven edits, since the panel gives you a clear view of what exists on the page and how it is organized.

• Search before scrolling through a long page tree.
• Use Friendly labels for editorial review and Developer labels for debugging.
• Drag carefully when working with nested containers.
• Use Show/Hide instead of deleting when you may need the element later.
• Undo immediately if an element is removed by mistake.

When combined with the rest of antimanual builder pro documentation, the hierarchy panel becomes a central navigation tool rather than just a convenience feature. It helps editors move faster, reduce structural errors, and keep complex pages easier to maintain over time.

For additional technical context, consult the official WordPress plugin handbook at Developer WordPress plugin resources. These references are useful when your team wants to align builder workflows with standard WordPress behavior.