Navigator

The Navigator provides a hierarchical overview of the elements in your document. It helps you find, select, organize, and manage Containers, Sections, Columns, and Widgets, even in complex layouts with multiple nested elements.

Instead of searching for an element directly on the Canvas, you can use the Navigator to locate it within the document structure and work with it more precisely.

How to Access the Navigator

You can open the Navigator in several ways:

1. Click the Navigator icon () in the editor's Bottom Bar.
2. Right-click an element on the Canvas and select Navigator from its context menu.
3. Use the keyboard shortcut Ctrl + I (or Cmd + I on Mac).

The Navigator opens as a separate panel that you can move and resize to suit your workflow. You can also dock it to the side of the editor for a fixed workspace layout.

Live Editor - Navigator

Understanding the Navigator

The Navigator displays your document as a tree of nested elements. Each item represents an element on the Canvas, while its position in the tree shows how it relates to the surrounding elements.

For example, a Container can contain Widgets and additional nested Containers. In layouts built with Sections and Columns, Widgets appear inside their respective Columns.

Each item displays its element type and name to help you identify it. Elements that contain other elements can be expanded or collapsed to show or hide their contents in the Navigator.

Key Features and Actions

Use the Navigator to manage your document structure without having to select every element directly on the Canvas.

View Document Structure

See how Containers, Sections, Columns, and Widgets are organized. Nested elements appear beneath their parent elements, making complex layouts easier to understand.

Select Elements

Click an element in the Navigator to select it on the Canvas and open its settings in the Sidebar Panel. This is particularly useful for nested or overlapping elements that are difficult to select directly.

Rename Elements

Double-click an element's name to give it a custom label, such as "Hero Container", "Product Grid", or "Footer Links". Descriptive names make large documents easier to navigate and maintain.

Reorder and Move Elements

Drag and drop elements in the Navigator to change their position. Elements can also be moved into other parent elements when the destination supports that element type.

Show or Hide Elements in the Editor

Use the visibility icon () next to an element to temporarily hide or show it while editing.

Access the Context Menu

Right-click an element in the Navigator to access editing actions such as Edit, Duplicate, Copy, Paste, Paste Style, Paste from Other Site, Reset Style, and Delete. The available actions depend on the selected element and current selection.

Selecting Multiple Elements

You can select multiple elements from the Navigator to perform supported actions on several elements at once.

1. Click an element in the Navigator to select it.
2. Hold Ctrl (or Cmd on Mac) and click another element to add it to the selection.
3. Continue holding Ctrl or Cmd while clicking additional elements to add them to the selection.

Available actions depend on the selected elements. Some actions require the selected elements to be of the same type, while actions intended for editing a single element are unavailable when multiple elements are selected.

Renaming Elements

Custom names make elements easier to identify, especially when your document contains many similar Widgets or nested Containers.

1. Open the Navigator and locate the element you want to rename.
2. Double-click its name.
3. Enter a descriptive label.
4. Press Enter to finish editing the name.

For example, instead of keeping several Containers named "Container", you could rename them "Hero", "Featured Products", and "Newsletter".

Navigator names are editor labels used to help you organize the document. Renaming an element does not change its visible content on the storefront.

Reordering and Moving Elements

You can reorganize your layout directly from the Navigator using drag and drop.

1. Locate the element you want to move.
2. Click and hold the element in the Navigator.
3. Drag it to a valid position in the document structure.
4. Release it to place the element in its new position.

Use this feature to reorder Widgets, move elements between compatible parent elements, and reorganize nested structures.

Creative Elements checks whether the destination can contain the element being moved. This helps preserve a valid layout structure when moving elements between parents.

While dragging an element, hover over a collapsed parent element to expand it automatically. This makes it easier to move elements deeper into nested structures.

Expanding and Collapsing Elements

Click the arrow next to a parent element to expand or collapse its nested contents. This allows you to focus on the part of the document you are currently editing.

Use the Expand / Collapse All control () in the Navigator header to expand or collapse the entire element structure at once.

Collapsing an element in the Navigator does not hide it on the Canvas. It only hides its nested elements in the Navigator tree.

Showing and Hiding Elements

Click the visibility icon () next to an element to temporarily hide it in the editor. Click the icon again to show the element.

This can be useful when working with overlapping elements, accessing content behind another element, reducing visual clutter, or focusing on a particular part of a complex design.

Navigator Indicators

The Navigator can display indicators next to elements that use certain special settings. These indicators help you identify configured elements without opening their settings first.

For example, an element using Custom Positioning can display a positioning indicator. Click the indicator to open the corresponding settings directly in the Sidebar Panel.

Using the Context Menu

Right-click an element in the Navigator to open its context menu. This provides quick access to editing actions without having to locate the element on the Canvas.

Depending on the element and current selection, the available actions can include:

Edit

Open the selected element's settings in the Sidebar Panel. This action is available when editing a single element.

Duplicate

Create a copy of the selected element or elements.

Copy

Copy the selected element or elements so they can be pasted elsewhere in the layout.

Paste

Insert previously copied elements into a compatible location.

Paste Style

Apply the styling from previously copied element data to the selected element or elements without replacing their content.

Paste from Other Site

Paste element data copied from another site into the current layout.

Reset Style

Reset the custom styling of the selected element or elements without deleting their content.

Delete

Remove the selected element or elements from the document.

Additional actions may be available depending on the selected element and the available Creative Elements features.

Moving, Resizing, and Docking the Navigator

You can reposition and resize the Navigator to create a workspace that suits your editing workflow.

Drag the Navigator by its header to move it. Drag its edges to resize the panel. The Navigator can also be docked to the side of the editor, keeping the document structure visible while you work on the Canvas.

Creative Elements remembers the Navigator's visibility, size, position, and docked state, so your workspace can be restored when you return to the editor.

Closing the Navigator

Click the Close icon () in the Navigator header to close the panel.

You can reopen it at any time from the Bottom Bar, an element's context menu, or with Ctrl + I (Cmd + I on Mac).