Skip to main contentDesign Tab: Select Mode
Select mode provides precise element selection and hierarchy navigation.
Activating Select Mode
Click the Select tab in the mode switcher.
Features
Element Selection
- Click to select any element
- Visual highlight shows selection
- Properties panel updates
Element Hierarchy
- See parent/child relationships
- Navigate up/down the tree
- Select nested elements precisely
Quick Adjustments
- Resize elements
- Adjust spacing
- Modify properties
Properties Panel
When an element is selected:
- View element type
- See applied classes
- Quick style options
When to Use Select Mode
- Precise selection - When Editor mode selects wrong element
- Nested elements - Access deeply nested items
- Inspection - View element properties
- Structure changes - Reorder or restructure
Selection Techniques
Click Selection
Click directly on an element to select it.
Hierarchy Navigation
Use the Layers panel to:
- See full page structure
- Click to select from tree
- Navigate parent/child
Breadcrumb Navigation
Selection breadcrumbs show:
- Current element
- Parent elements
- Click to select parent
Visual Feedback
- Blue border - Selected element
- Dotted outline - Selectable area
- Highlight - Hover indication
Combining with AI
After selecting in Select mode:
- Switch to Editor mode
- Use AI chat with selection context
- AI understands what’s selected
Tips
- Use for complex nested structures
- Combine with Layers panel
- Switch modes as needed
Next Steps
