Accessing the Outline Panel
The Outline panel offers a comprehensive overview of the content within your layout, allowing you to see everything at a glance. It also provides a simplified interface for editing and interacting with the content in your layout.
Usage
Dragging a row from the lower portion of a lengthy page has often been a frustrating experience. However, with the Outline panel, reorganising content on extensive pages becomes effortless. It enables swift navigation and editing of various sections within a page, facilitating seamless workflow.
How to access the Outline Panel
To access the Outline panel and view your page layout structure in an outline format, click on the Outline icon located in the Top Bar. This panel enables you to both observe and make modifications to the organisation of your page.
Although the Outline panel lacks a drag handle, you can eliminate its overlap on the layout by doing this: Start by displaying the Content panel and use the drag handle to attach it to the right side of the layout. Next, click on the Outline panel icon, and it will then appear on top of the Content panel without any overlap.
Expand/Collapse
By utilising the actions menu item in the Outline Panel you have the ability to expand (show) or collapse (hide) all items with ease.
Keyboard Shortcut
With the keyboard shortcuts provided by the Outline Panel, you can effortlessly open and close the panel itself, as well as expand and collapse the tree view within it.
- Toggle Outline Panel - Shift & O
- Expand or Collapse the Tree View - Shift & T
Navigate
A single click on any entry within the Outline panel will smoothly scroll to the corresponding node (row, column, or module) in the layout. To access the settings of a specific node, simply double-click on its entry.
Move Content
By utilising drag-and-drop functionality, the Outline Panel allows you to easily relocate content such as rows, columns (excluding child columns), and modules. This feature enables quick and seamless movement of elements within the panel.
Right-Click
When you right-click on a row, column, or module, a list of available options will be presented to you. Additionally, this action will cause a blue outline to appear around the selected item in the builder interface.
- Rows and Columns have Open settings and Remove options.
- Modules have Open settings, Duplicate, and Remove options.
Labels
In order to provide clarity regarding the purpose of a row, column, or module within the Outline Panel tree view, you have the option to add a label through the Advanced tab. The accompanying screenshot below demonstrates an example where a label, "Hero Heading," has been applied to a Heading module and is now visible in the Outline Panel.
Icon Indicators
Within the Outline Panel, icons will become visible when certain modifications have been made to the display visibility settings, or when custom CSS or JavaScript has been applied to a row, column, or module using the CSS or JavaScript sections found in the Advanced tab.
- The Eye icon signifies that the display visibility settings for the respective row, column, or module have been altered from the default state of "Always."
- The Code icon signifies that custom CSS or JavaScript code has been inserted into the row, column, or module via the CSS or JavaScript sections within the Advanced tab.
