The Navigator is a crucial tool, acting as a navigation tree panel that grants you immediate access to every element on the editor with a single click. This feature is essential for navigating through lengthy pages or complex layouts, especially when dealing with elements like Z-Index, minus margin, or absolute positioning. It simplifies the process of locating and editing elements that might be hidden behind others, streamlining your website design workflow.
How to access the Navigator
There are several ways of accessing the Navigator while editing your pages:
- Direct Selection: Right-click any element on your page and select Structure from the menu. This action will pinpoint the element within the navigation tree.
- Using the Editor Top Panel: Click on the Structure button located at the top of the panel.
- Keyboard Shortcut: Press Cmd/Ctrl + i to open the Navigator instantly.
Navigating and editing with the Navigator
Once you've accessed the Navigator, a variety of settings and actions are at your disposal:
- Edit Elements: Simply click on any element within the Navigator to be taken to its Edit panel for immediate modifications.
- Rearrange Elements: Drag and drop elements within the tree to reposition them on your page.
- Access Right-Click Options: Right-clicking an element within the Navigator opens a menu for quick actions like Edit, Duplicate, Copy, and Paste.
- Hide/Show Elements: Use the View button beside an element to toggle its visibility. This action only affects your view in the editor, not the live website.
- Rename Elements: Double-click an element's name and type in a custom identifier for easier reference.
- Collapse/Expand Elements: Manage your view of the tree by collapsing or expanding individual elements or all elements at once using the arrow buttons.
Customizing the Navigator's position
- Floating Mode: You can move the Navigator panel freely around your workspace to suit your design process.
- Docking Mode: Secure the Navigator to the side of your screen by dragging it towards the right side until a vertical drop zone appears, then release.
The Navigator is an essential tool within 10Web Website Builder, designed to enhance your website-building experience by providing streamlined navigation and editing capabilities. By leveraging these features, you can efficiently manage even the most complex designs, ensuring a smooth and productive workflow.