Navigator and Layers

The Navigator shows the structure of your page as a hierarchy of sections, containers, and elements.

Use it when you need to select a nested item, understand how a page is built, review containers, or work with modal sections.

What the Navigator shows

The Navigator reflects the same nested page structure used by the builder canvas.

Navigator area	What it represents
Page	Main page sections and the elements inside them.
Modal	Modal sections when the page includes modal content.
Nested rows	Containers and elements inside a parent item.
Active item	The currently selected section, container, or element.

Why use the Navigator

The canvas is best for visual editing. The Navigator is best for structural editing.

Use the Navigator to:

• Select a container that is hard to click on the canvas.
• Confirm where an element is nested.
• Expand or collapse the page hierarchy.
• Find elements inside complex sections.
• Work with modal content separately from the main page.
• Reorder supported items using drag and drop.

Selecting an item

Click an item in the Navigator to select it in the builder.

When you select an item, Atomicat scrolls the related canvas area into view and opens the editing interface for that item. If the item is inside a modal, the builder opens the modal context so you can edit it safely.

Expand and collapse behavior

The Navigator supports expanding and collapsing page layers so large pages are easier to inspect.

Use expand/collapse when:

• The page has many repeated containers.
• You are reviewing a template.
• You need to focus on one section at a time.
• You want to reduce visual noise while editing.

Working with modal layers

Modal sections are separated from the main page structure in the Navigator. This helps avoid confusing modal content with standard page content.

Use the Modal area when editing popups, overlays, or other modal-based sections.

Best practices

• Use the Navigator before deleting or moving complex containers.
• Check the parent container before editing spacing or alignment.
• Keep section nesting readable for future editors.
• Use clear page structure so forms, buttons, and tracking elements are easier to audit.

Related docs

• Sections and Containers
• Preview and Responsive Views
• Undo and Redo

FAQ

When should I use this Navigator and Layers page?+

Use this page when you need to understand the workflow, settings, or decisions related to Navigator and Layers. It is most helpful before editing a live asset, publishing changes, or troubleshooting behavior in an Atomicat workspace.

What should I check before changing Navigator and Layers?+

Confirm that you are in the correct workspace, project, page, funnel, site, or account area. Review access permissions, saved changes, publishing status, and any connected integrations before making updates.

How do I verify that Navigator and Layers is working correctly?+

Preview the affected page or feature, test the main user path in a fresh browser session, and confirm that forms, redirects, tracking, products, quizzes, or publishing states behave as expected.

What should I do if Navigator and Layers does not work as expected?+

Recheck the configuration described on this page, save the changes again, clear browser cache if needed, and test with a simple version of the setup. If the issue continues, collect the page URL, workspace details, and screenshots before contacting support.