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.

The standard actions include:

• AI Copilot: Invoke the AI assistant.

• Edit Style: Open the style editor.

• Edit Text: Open the text editor.

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

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

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.

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.

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.