Selecting elements

The first step to editing with the Edit Tool is selecting the element you want to modify. This guide shows you how to select elements precisely and efficiently.

Enabling Selection Mode

Before you can select elements:

1. Make sure you have a project open with a preview
2. Click the Edit Tool button in the toolbar
3. The cursor changes to indicate Edit Mode is active

How to Select

Basic Selection

1. Hover over elements – they'll highlight with a colored border
2. Click on the element you want to edit
3. The element is now selected and the editing panel appears

Visual Feedback

When hovering:

• Elements show a blue highlight border
• The element type is displayed (e.g., "Button", "Image", "Heading")

When selected:

• A solid border appears around the element
• The editing panel opens on the side

Selecting Different Element Types

Text Elements

Click directly on:

• Headings (h1, h2, h3...)
• Paragraphs
• Links
• Button text
• List items

Images

Click on any image to:

• Replace it with a new image
• See image properties

Containers

Some elements contain others. Click carefully:

• Click on text to select just the text
• Click on empty space within a section to select the container

Buttons

Buttons can be selected to:

• Edit the button text
• Change button styles (color, size, etc.)

Selection Tips

Be Precise

The element that highlights when you hover is what will be selected. Make sure it's the right one before clicking.

Zoom for Small Elements

If elements are too small to select easily:

1. Use the device preview options
2. Try desktop view for larger elements

Look at the Label

When hovering, check the element label to confirm you're selecting what you intended.

Working with Nested Elements

Websites have elements inside elements (nesting). For example:

Section
  └── Container
       └── Card
            └── Heading
            └── Paragraph
            └── Button

Selecting Nested Elements

• Click on the innermost element you want to edit
• For example, to edit button text, click directly on the button

Selecting Parent Elements

Sometimes you want to select a parent container:

1. Click on any child element first
2. Look for "Select Parent" option in the editing panel
3. Or click on empty space within the parent

Deselecting Elements

To deselect the current element:

• Click on empty space in the preview
• Press Escape key
• Click the X on the editing panel

Troubleshooting Selection

Can't Select an Element?

Some elements might be:

• Overlapped by other elements
• Very small - try zooming in
• Dynamically generated - some elements appear on hover

Selected Wrong Element?

1. Click elsewhere to deselect
2. Hover carefully to find the right element
3. Click when the correct element is highlighted

Element Not Highlighting?

• Make sure Edit Mode is enabled
• Refresh the preview
• Try disabling and re-enabling Edit Mode

Best Practices

Plan Your Edits

Before selecting, know what you want to change. This makes the process faster.

Work Section by Section

Edit all elements in one area before moving to another.

Check Your Work

After editing, deselect and view your changes in the preview.