Cornerstone Outline Panel

• Overview
• Accessing the Outline Panel
• Display Modes
• Understanding the Outline Structure
• Working with Elements
• Hidden Features
• Settings Tab
• Tips and Best Practices

Overview

The Outline Panel is a powerful navigation and organization tool in Cornerstone that provides a hierarchical tree view of all elements on your page. It allows you to quickly navigate, select, and manage elements without having to click through the preview area.

The Outline panel displays your page structure in a collapsible tree format, showing:

• Element hierarchy (parent-child relationships)
• Element types
• Element labels/names
• Quick access to element controls

Accessing the Outline Panel

The Outline panel is located in the builder interface and can be accessed in several ways:

1. Default Location: The Outline tab appears alongside the Settings tab, typically opposite the Workspace panel
2. Tab Selection: Click on the "Outline" tab to view the panel
3. Keyboard Shortcuts: Use builder keyboard shortcuts to quickly navigate (see Preferences > Keyboard Shortcuts)

Display Modes

The Outline panel can be displayed in four different modes, which can be configured in Preferences:

1. Nested (Default)

• The Outline and Settings tabs are nested within the same panel
• Switch between tabs by clicking on "Outline" or "Settings"
• Most compact view, ideal for smaller screens

2. Split

• The Outline and Settings panels are split vertically or horizontally
• Both panels are visible simultaneously
• Useful for monitoring both structure and settings at the same time

3. Adjacent

• The Outline and Settings panels appear side-by-side
• Provides maximum visibility of both panels
• Best for larger screens and multi-monitor setups

4. Modal

• The Outline appears in a modal/popup window
• Can be positioned anywhere on screen
• Useful for temporary reference while working in the preview

To Change Display Mode: 1. Open Preferences (gear icon in toolbar) 2. Navigate to Workspace section 3. Find the Outline setting 4. Select your preferred display mode: Nested, Split, Adjacent, or Modal

Understanding the Outline Structure

The Outline displays your page elements in a hierarchical tree structure:

Element Hierarchy

Visual Indicators

• ▶ (Collapsed): Element has children but they are hidden
• ▼ (Expanded): Element has children and they are visible
• No Arrow: Element has no children (leaf node)

Element Information

Each element in the outline shows:

• Element Type: The kind of element (Section, Row, Column, Button, etc.)
• Element Label: Custom name or default title
• Nesting Level: Indentation shows parent-child relationships

Working with Elements

Selecting Elements

• Click on any element in the Outline to select it
• The selected element will be highlighted in both the Outline and the preview
• The Inspector panel will show controls for the selected element

Expanding/Collapsing

• Click the arrow (▶/▼) to expand or collapse child elements
• Shift + Click: Expand/collapse all nested children recursively
• Helps manage complex page structures

Navigating the Structure

• Use the Outline to quickly jump to deeply nested elements
• Especially useful for elements that are difficult to click in the preview
• Navigate through off-canvas content, modals, and hidden elements

Reordering Elements

• Drag and drop elements within the Outline to reorder them
• Visual indicators show valid drop zones
• Maintains proper parent-child relationships

Element Actions

Right-click (or long-press on touch devices) on an element to access:

• Duplicate: Create a copy of the element
• Delete: Remove the element
• Copy/Paste: Copy element data
• Wrap: Wrap element in a container
• Additional Actions: Context-specific options

Hidden Features

CTRL/CMD + Click to Open Element Library

One of Cornerstone's most powerful hidden features is the ability to open the Element Library when adding new elements:

How It Works

When Adding Elements: 1. Locate an "+ Add Element" button (insertion point) in your page 2. Hold CTRL (Windows/Linux) or CMD (Mac) while clicking the "+ Add Element" button 3. The Element Library will open instead of inserting the default element 4. Browse and select any element from the library to insert

Default Behavior (without CTRL/CMD):

• Clicking "+ Add Element" normally inserts the default element type for that location
• For example, clicking in a Section might add a default Row or Column

With CTRL/CMD Modifier:

• Opens the full Element Library modal
• Access to all available elements, templates, and saved components
• Search and filter elements
• Preview element options before inserting

Reversing the Behavior

You can reverse this behavior in Preferences:

1. Open Preferences (gear icon)
2. Find "Open Library Default" setting
3. When Enabled:
   • Normal click opens Element Library
   • CTRL/CMD + click inserts default element
4. When Disabled (default):
   • Normal click inserts default element
   • CTRL/CMD + click opens Element Library

Preference Description:

"Instead of using the default element, open the Element Library whenever you click on the insert areas. This can also be controlled through CTRL / MOD (Mac) to open the library. When this preference is enabled, this reverses how the modifier works"

Benefits

• Faster Workflow: Quickly access any element without navigating menus
• Flexibility: Choose the exact element you need at insertion time
• Discovery: Browse available elements and templates while building
• Precision: Insert the right element the first time

Where This Works

• Section insertion points
• Row/Column insertion points
• Container dropzones
• Any "+ Add Element" button throughout the builder

Settings Tab

The Settings tab (adjacent to Outline) provides document-level settings:

Document Settings

• General Settings: Page title, slug, template
• Layout Settings: Header, footer, and content layout assignments
• Custom Code: Custom CSS and JavaScript for the document
• Advanced Options: Document-specific configurations

Multi-Region Layouts

For Headers and Footers with multi-region enabled:

"Allows for more advanced layout options, such as left, right, and bottom Bar positioning. After selecting, go back to the 'Outline' tab to see these new regions."

Tips and Best Practices

Organization

1. Use Descriptive Labels: Rename elements with meaningful names for easier navigation
2. Collapse Completed Sections: Keep your Outline clean by collapsing sections you're not actively working on
3. Group Related Elements: Use Containers and Divs to organize related content

Navigation

1. Use Outline for Deep Elements: Access deeply nested elements more easily through the Outline
2. Search Functionality: Use browser search (CTRL+F) within the Outline to find specific elements
3. Keyboard Navigation: Learn keyboard shortcuts for faster element selection

Workflow Efficiency

1. Split View: Use Split or Adjacent mode when working on complex layouts
2. Element Library Shortcut: Master the CTRL/CMD + Click shortcut for faster element insertion
3. Context Menu: Right-click elements in the Outline for quick actions
4. Drag and Drop: Reorder elements via drag-and-drop in the Outline for precision

Troubleshooting

1. Can't Find Element: Use the Outline to locate elements that are hidden or off-screen
2. Complex Structures: Expand/collapse sections to understand element relationships
3. Reordering Issues: Use the Outline for more precise drag-and-drop operations

Performance

1. Large Pages: The Outline is more performant than scrolling through long pages in the preview
2. Nested Elements: Navigate complex nested structures without rendering delays
3. Quick Selection: Select elements instantly without waiting for preview interactions

Additional Resources

Keyboard Shortcuts

Access the full list of keyboard shortcuts: 1. Click the Help icon in the toolbar 2. Select Keyboard Shortcuts 3. Review shortcuts for Outline navigation and element management

Support

• Documentation: Visit theme.co/docs
• Forum: Get help at theme.co/forum
• Video Tutorials: Check the Themeco YouTube channel

Version Information

This documentation covers the Outline panel features available in Cornerstone 7.x and later.

Last Updated: 2025

For more information about Cornerstone and its features, visit the official documentation at theme.co/docs