Explorer sidebar

The Explorer exhibits the content of the ongoing page in the Designer in a structured tree format. It enables you to choose any component on a specific page, including those that might be difficult to select on the canvas. In the Explorer, you can also rearrange elements and adjust the structure of components. The changes in structure are promptly reflected on the canvas.

Throughout this tutorial, you’ll discover: 

1. Methods to access, anchor, and resize the Explorer sidebar
2. Techniques for selecting components through the Explorer
3. Strategies to distinguish unique components in the Explorer
4. Ways to relocate components using the Explorer

Accessing, anchoring, and resizing the Explorer sidebar

The Explorer sidebar is located in the side toolbar. You can toggle the Explorer by clicking on its icon in the side panel or by pressing Z on your keyboard. If unpinned, you can also open the Explorer by dragging an element onto its icon in the side panel.

On screens smaller than 1440px, the Explorer expands on the right (above the panels on the right) while dragging an element for repositioning.

Anchoring the Explorer

On a browser wider than 1440px, you have the option to anchor the Explorer to keep it visible at all times. This facilitates effortless placing of elements inside and interacting with elements swiftly.

To anchor the Explorer, click on the anchor icon located in the top toolbar of the Explorer. To unanchor it, select the unanchor icon in the Explorer toolbar.

Resizing the Explorer

When anchored, you can adjust the width of the Explorer panel.

To resize the Explorer, ensure it’s anchored, then hover over its right edge and drag the blue line that emerges.

Viewing the elements of the current page

The Explorer also functions as a means to visualize your page hierarchy and identify which components are nested within others.

You have the choice to expand or collapse parent components. By expanding a parent component, the child components within become visible and are indented. You can also opt to Collapse All to view only the top-level parent components or Expand All to show every element on the page.

To expand or collapse a parent component, click the “toggle” icon ▸ to the left of the component.

To expand or collapse all components, click the expand/collapse icon in the Explorer toolbar.

Insider tip: Press Alt/Option + Z on your keyboard to swiftly expand or collapse all Explorer components.

Selecting components through the Explorer

Hovering over different components in the Explorer will highlight the corresponding components on the canvas. Conversely, hovering over canvas elements will highlight elements in the Explorer.

Click a component in the Explorer to choose it. Upon selection of an off-screen component in the Explorer, the canvas auto-scrolls to that component. Once you’ve chosen a component, you can style it in the Style panel or configure its settings in the Component settings panel. Additionally, interactions can be created through the Interaction panel.

Selecting a component through the Explorer is beneficial for recognizing the component’s hierarchy, its parent, and siblings. This knowledge can be invaluable when crafting interactions.

Selecting inaccessible components through the canvas

The Explorer proves especially valuable when selecting components that are challenging or impossible to select on the Canvas. These include elements with their Display property set to None or components with a negative Z-index.

Identifying unique components in the Explorer

In the Explorer, you may observe colored icons on the left of some components, while others have icons to their right. These serve as unique indicators. They aid in swiftly distinguishing between static and dynamic components or auto-positioned and pinned grid children. These icons also allow immediate identification of components that trigger an interaction or components hidden on the canvas.

The icons in the Explorer convey critical details about components: 

• Green “box” icon(left) — the component is a module
• Green “box” icon(right) — the component is an open module in edit mode
• Purple icon(left) — the component is a Collection List, linked to a Collection Field, or has a condition applied
• “Hash” icon #(right) — the element is a grid child pinned to a cell or area in its grid‍
• “Eye-slash” icon(right) — the component’s display is set to hidden and is invisible on the canvas
• Lightning icon (right) — the component has an interaction trigger
• “Globe” icon (right) — the component has been localized in the current locale view

Moving components using the Explorer

Components can be moved directly on the canvas, but sometimes it’s beneficial to visualize the structure when moving components in the Explorer. For instance, you can rearrange sibling components (those sharing the same parent) by dragging the components within the Explorer. Sections of a page can also be moved along with all child components within.

The Explorer simplifies altering the hierarchy of your page. This task can be challenging on the Canvas, particularly for nested components of similar sizes. However, in the Explorer, you can promptly grab a child component and position it outside its parent component. Similarly, you can nest a component by clicking and dragging it into another element.