Editing and Managing Components

Once components are on your page, you have full control to edit and manage them. Here's everything you need to know.

Selecting Components

Single Click

Click on a component to select it. You'll see:

• Selection outline around the component
• Toolbar with options
• Component menu access

Component Boundaries

Sometimes nested elements can be tricky. Click the outer edge of a component to select the whole thing.

The Component Toolbar

When you select a component, a toolbar appears with:

• Move handle - Drag to reposition
• Settings - Component-specific options
• AI Chat - Modify with AI
• Menu - More options (three dots)

Editing Content

Text

Click directly on text to edit:

• Headlines
• Paragraphs
• Button labels
• List items

Images

Click on an image to:

• Replace it
• Adjust sizing
• Edit alt text

Links

Select linked elements to:

• Change the destination URL
• Edit link text
• Open link settings

Moving Components

Drag and Drop

Hover over the component

Grab the move handle

Drag to new position

Release to drop

Using Menu Options

Click component menu (three dots)

Select:

• Move Up - Move higher on page
• Move Down - Move lower on page
• Move to Hero - Make it the hero section
• Move to Footer - Make it the footer

Duplicating Components

To create a copy:

Select the component

Open the menu (three dots) or right-click

Click "Duplicate" or "Copy"

A copy appears below the original

Great for:

• Creating similar sections
• Testing variations
• Building repetitive layouts

Keyboard shortcut: Some browsers support Ctrl+C / Ctrl+V for components.

Making Components Full-Width

Want a component to span the entire screen width?

Select the component

Right-click to open the context menu

Select "Full Width" or toggle the full-width option

The component now stretches edge-to-edge

This is great for:

• Hero sections
• Full-bleed images
• Section dividers
• Footers

To revert, right-click and toggle full-width off.

Adding Links to Buttons

Method 1: Direct Editing

Click on the button text to select it

Look for a link icon in the toolbar

Enter your URL

Choose to open in same tab or new tab

Method 2: Component Settings

Select the component containing the button

Open settings (gear icon)

Find the button URL or link field

Enter your destination URL

Method 3: Ask AI

"Add a link to the button that goes to /contact"

"Make the 'Learn More' button link to https://example.com"

Link Types

• Internal pages: Use /page-name (e.g., /about, /contact)
• External sites: Use full URL (https://example.com)
• Email: Use mailto:email@example.com
• Phone: Use tel:+1234567890
• Sections: Use #section-id for same-page scrolling

Deleting Components

To remove a component:

Select the component

Open the menu (three dots) or right-click

Click "Delete"

Component is removed

Undo available: Press Ctrl+Z (Cmd+Z on Mac) to undo deletion.

Using AI to Edit

For more complex changes:

Select the component

Open AI chat (sparkle icon)

Describe your changes

AI modifies the component

Examples:

• "Add a third column"
• "Change the layout to vertical"
• "Update the style to be more minimal"
• "Make the button link to /pricing"

Component Settings

AI-generated components often have editable settings:

Select the component

Click the settings icon (gear)

A panel opens with adjustable options

Change values and see live updates

Common editable settings include:

• Text content
• Colors
• Spacing/padding
• Border radius
• Show/hide elements
• Number of items

Learn more: Making AI Components Editable

Best Practices

Keep It Organized

• Delete unused components
• Don't duplicate unnecessarily
• Keep your page clean

Save Before Major Changes

• Save components you like to your library
• Use undo for mistakes
• Preview before publishing

Test Responsiveness

After editing, check:

• Desktop view
• Tablet view
• Mobile view