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 review.
Related docs​
FAQ​
Why use the Navigator instead of clicking the canvas?
The Navigator is more reliable when elements are nested, overlapping, hidden behind other blocks, or inside modal content.
What does the Modal area show?
The Modal area separates popup or overlay content from the main page structure so you can edit modal sections without confusing them with normal page sections.
Can I use the Navigator to review page structure?
Yes. Expand sections and containers to confirm where forms, buttons, tracking-related elements, and repeated layout blocks are placed.
What should I check before deleting a layer?
Confirm the parent section, child elements, mobile behavior, and any connected form, button, product, quiz, or script behavior before deleting or moving the layer.