> ## Documentation Index
> Fetch the complete documentation index at: https://docs.avallon.ca/llms.txt
> Use this file to discover all available pages before exploring further.

# Visual Editor

> Edit your website visually with click-to-edit tools

## Overview

The Visual Editor allows you to edit your website directly by clicking on elements. No code knowledge required!

## Getting Started

1. Open your website in the editor
2. Click the "Visual Edit" button in the top navigation
3. Click on any element on your website to select it
4. Use the properties panel on the left to make changes

## Editing Elements

### Selecting Elements

* **Click** any element to select it
* A blue outline will appear around the selected element
* The properties panel will show the element's details

### Editing Properties

<CardGroup cols={2}>
  <Card title="Style Tab">
    * Font size, weight, and family
    * Text and background colors
    * Text alignment
    * Border radius
  </Card>

  <Card title="Spacing Tab">
    * Margin (outer spacing)
    * Padding (inner spacing)
    * Visual spacing controls
  </Card>

  <Card title="Content Tab">
    * Edit text content
    * Update links and URLs
    * Replace images
  </Card>

  <Card title="Actions">
    * Duplicate elements
    * Delete elements
    * Copy styles
  </Card>
</CardGroup>

## Element Actions

### Duplicate Element

1. Select an element
2. Click "Duplicate" in the properties panel
3. The element will be copied right after the original

### Delete Element

1. Select an element
2. Click "Delete" in the properties panel
3. Confirm the deletion

<Warning>
  Deletions are permanent. Make sure to save your changes before deleting important elements.
</Warning>

## Saving Changes

Changes are automatically tracked. When you see "Save Changes" button:

1. Click "Save Changes" to persist your edits
2. Your changes will be saved to the backend
3. The preview will update with your saved changes

## Tips

<AccordionGroup>
  <Accordion title="Use Breadcrumbs">
    The breadcrumb trail shows the element hierarchy, helping you understand the page structure.
  </Accordion>

  <Accordion title="Preview Changes">
    All changes are visible immediately in the preview. No need to save to see results.
  </Accordion>

  <Accordion title="Undo/Redo">
    Use the undo/redo buttons in the top navigation to revert changes.
  </Accordion>

  <Accordion title="Switch Between Pages">
    Use the page selector to edit different pages of your multi-page site.
  </Accordion>
</AccordionGroup>