Use the Outline Panel to Manage Page Structure

This guide explains how to use the Outline panel inside the Admin Web Editor.

Use it when you want to:

• manage page structure from one tree view instead of the canvas
• find the correct section faster on a busy page
• select a block from a page-structure list instead of clicking on the canvas
• rename blocks so the structure is easier to understand later
• move blocks into a new position
• add new blocks between existing sections

Before You Start

Open the Web Editor first from System > Platform Customization.

Then open the Outline tool from the left side of the builder.

What The Outline Panel Is For

The Outline panel shows the current page as a structure tree.

Use it when the page is crowded, long, or difficult to work with directly on the canvas.

For many page updates, this is the fastest way to find the exact block you want to edit.

It is especially useful when you need to:

• reorder large pages more quickly
• find nested blocks that are hard to select on the canvas
• clean up page structure without scrolling through the whole page visually

Open The Outline Panel

Select the Outline icon in the left sidebar.

OpenMirai then shows the page structure as a tree of rows.

Each row represents one block or section on the page.

Use Outline As Your First Step On Busy Pages

If the page feels crowded or several sections look similar, start with Outline before clicking around on the canvas.

This is often the fastest way to:

• narrow down the correct section
• select the exact block you want
• avoid editing the wrong area first

Find The Right Block Faster

Use the outline tree when you want to narrow down a busy page.

You can:

• expand tree levels to reveal nested content
• collapse sections you are not working on
• scan block names more quickly than scanning the full page visually

This is especially useful when several sections look similar on the canvas.

Select A Block From The Tree

Select a row in the tree to choose that block for editing.

When you do this, OpenMirai highlights the selected row in the Outline panel and matches that selection in the page canvas.

This helps you confirm that you are editing the correct section before changing content or settings.

Rename A Block Inline

If a block name is unclear, you can rename it directly in the outline tree.

Double-select the block name to edit it inline.

This is useful when you want to give important sections clearer names for future editing.

Clear names can save time later, especially on large pages with many repeated sections.

Move Blocks In The Page Structure

Use drag and drop in the tree when you want to move a block to another position.

OpenMirai lets you reorder rows and, where supported, move blocks into a nested position.

While you drag a row, the builder can show a target highlight so you can see where the block will be placed.

Add A Block From The Outline Tree

The outline tree can also show + insert controls at the top of the structure, between rows, or inside supported sections.

Use these controls when you want to add a new block in a specific position without guessing on the canvas.

This is helpful when placement matters and you want the new block to appear exactly where you expect.

Use Row Menus In The Outline Tree

Some rows in the outline can also show a block action menu.

Use this menu when you want to work on one block directly from the structure list instead of selecting it first and moving to another part of the editor.

Depending on the block and its current state, this menu can include actions such as:

• adding a block
• duplicating or renaming the block
• cutting, copying, or pasting
• saving a block to the library
• removing a block

If an action is not available for the selected block, OpenMirai can show it in a disabled state.

Move Through The Outline Tree With The Keyboard

When you want to work faster without switching between mouse and keyboard, OpenMirai can support keyboard navigation inside the outline tree.

You can use:

• arrow keys to move between visible rows
• left and right arrow keys to collapse or expand the current part of the tree, or move across the current hierarchy
• Home and End to jump to the first or last visible row

As you move through the tree, OpenMirai updates the selected row so you can track which block is currently active.

Work With Hidden Blocks

If a block is hidden, OpenMirai can show it in a faded style in the outline tree.

Use Show hidden blocks when you want to reveal blocks that are not currently easy to spot.

This helps you manage content that still exists in the page structure but is not meant to be fully visible in the normal editing view.

What Happens On Empty Pages

If the page has no blocks yet, the outline area can show an empty state.

In that state, OpenMirai can show an Add block action so you can start building the page immediately.

What To Expect While Using The Outline Panel

While working in the outline tree, you may notice:

• selected row highlighting
• matching block highlighting in the canvas
• expanded and collapsed tree groups
• selected row updates while using keyboard navigation
• faded styling for hidden blocks
• insertion markers or target highlights while moving blocks

This is normal while OpenMirai updates the page structure.

Best Practices

To make the outline tree more useful over time:

• rename important blocks clearly
• use the outline first when the page is crowded
• collapse sections you do not need
• insert new blocks from the tree when you need precise placement

These habits make complex pages much easier to manage.

What To Do Next

• use the outline tree to select the correct block before editing settings
• rename unclear sections so future edits are faster
• add or move blocks when you need to reorganize the page

If you need help with block actions such as duplicate, copy, paste, or save to library, use the related Website Builder and Pages guides.