# Visual editor

We've updated the Visual Editor with a fresh look that aligns with our company's branding. This includes new colors, fonts, and icons for a more modern and consistent experience.

## The Quick-Action Bar

When you select an element, the **Quick-Action Bar** appears just below it, offering shortcuts to the most frequently used actions. This allows you to perform common edits without needing to open the full context menu.

<figure><img src="/files/YJTaoxAs8Rv2QrWScRYu" alt="" width="183"><figcaption></figcaption></figure>

The standard actions include:

* **AI Copilot:** Invoke the AI assistant.

<figure><img src="/files/jJyyMukzfjUDHUoKaEwa" alt="" width="375"><figcaption></figcaption></figure>

* **Edit Style:** Open the style editor.

<figure><img src="/files/UQbxRDVUy7GTEdJYKiRN" alt="" width="375"><figcaption></figcaption></figure>

* **Edit Text:** Open the text editor.

<figure><img src="/files/5WqzYWDGWNe7Q4pwEgYX" alt="" width="375"><figcaption></figcaption></figure>

* **Add Tracker:** Add an action tracker to the element.

<figure><img src="/files/yZux9ECfKNuqcAQk8kus" alt="" width="375"><figcaption></figcaption></figure>

* **More Options (`...`):** Click this to open the full context menu.

<figure><img src="/files/ftJQ7QO7uywgQDfLhYTW" alt="" width="316"><figcaption></figcaption></figure>

The **Quick-Action Bar** is adaptive. For example, if you select a widget, the style and text edit icons will be replaced by an icon to open the widget's configuration panel. If an element has already been modified, an icon to access the "active changes" panel will appear.

<figure><img src="/files/37uUjZpUfQbUOUK9SYWA" alt="" width="363"><figcaption></figcaption></figure>

## The SmartOutline Panel

The **SmartOutline** panel, located on the left side of the editor, displays the complete hierarchical structure (DOM) of your page. It is designed to make element selection more precise and powerful.

<figure><img src="/files/niTN2fGo9lkHan5Y2UR4" alt="" width="234"><figcaption></figcaption></figure>

Key features include:

* **Synchronized Selection:** Hovering or clicking an element in the SmartOutline panel will highlight and select it in the Visual Editor, and vice-versa.
* **Precise Targeting:** Easily select elements that are difficult to click on, such as nested or overlapping components.
* **Right-Click Menu:** You can now right-click directly on an element within the SmartOutline panel to open the full context menu, saving you time.
* **Collapsible:** You can collapse the panel to maximize your screen space. The collapsed panel can be moved vertically if it obstructs an element you need to see.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.abtasty.com/web-experimentation-and-personalization/editors-and-widget/visual-editor.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.